/* ============================================================
   Spotious V2 — application styles
   Layout: constant top title bar + contextual bottom taskbar,
   with a middle stage that is a sliding stack on mobile and a
   3-pane layout on desktop.
   ============================================================ */

:root{
  /* Merah Laravel, disetel supaya bisa dipakai.
     #F05340 apa adanya cuma memberi kontras 3.5 untuk tulisan putih di atasnya —
     di bawah 4.5 yang dibutuhkan teks ukuran biasa, dan tombol utama adalah tombol
     yang paling sering ditekan di seluruh aplikasi.

     Sempat dipakai #D63E27 (4.6), tapi itu mepet ke ambangnya. #C93A22 memberi 5.1:
     ruang amannya lebih lega, warnanya lebih pekat, dan masih jelas merah Laravel. */
  --accent:#C93A22; --accent-weak:#fff1ee; --accent-text:#b8300f;
  --bg:#f5f5f7; --surface:#ffffff; --surface-2:#fafafa;
  /* Dua kelabu sekunder, DIUKUR bukan dikira-kira (20 Jul 2026).
     Sebelumnya --faint #a1a1aa hanya 2.56:1 di atas putih — jauh di bawah 4.5 yang
     dituntut untuk teks biasa, dan ia justru dipakai untuk yang paling kecil: jam di
     daftar chat, label bagian, keterangan medan. Di layar HP di bawah matahari itu
     praktis hilang.
     Keduanya digeser bersama supaya JENJANGNYA tetap terbaca — kalau hanya faint yang
     dinaikkan, ia jadi 4.49 sementara muted 4.83 dan bedanya lenyap.
       --muted 4.83 -> 6.32   --faint 2.56 -> 4.49  (di atas putih) */
  --text:#18181b; --muted:#5f5f68; --faint:#767680; --line:#e8e8ec;
  /* Crimson, bukan merah. Begitu aksennya jadi merah, warna bahaya HARUS pindah rona:
     var(--danger) yang lama cuma berjarak 29 dari aksen baru, dan tombol "Sign in" akan
     tampak sama dengan tombol "Hapus workspace". Itu bukan soal selera. */
  --good:#16a34a; --danger:#9f1239; --radius:12px;
  /* Tangga tenggat, dipisah dari merah.
     Setelah aksen jadi merah, penanda "Overdue" yang juga merah membuat layar penuh
     warna panas yang semuanya berteriak sama kerasnya. Sekarang tenggat memakai amber
     dan naik bertingkat: makin telat makin pekat. Keduanya lolos 4.5 di latar terang —
     yang lama (#e8811a) sebenarnya cuma 2.77 dan sudah gagal sejak dulu. */
  --due-late:#7c2d12; --due-today:#b45309;
  --prio-med:#1d5fb0; --prio-low:#5f6470;
  --topbar-h:56px;
  /* Safe areas. index.html ships viewport-fit=cover and the manifest is
     display:standalone, so once installed the page draws edge to edge —
     under the status bar at the top and the home indicator at the bottom.
     Every bar that touches an edge must pad itself by these, or its content
     sits underneath the system UI. In a normal browser tab they resolve to 0,
     so these are free on desktop. */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  /* Real on-screen height of the title bar, insets included. Anything
     positioned relative to the title bar must use this, not --topbar-h. */
  --topbar-total:calc(var(--topbar-h) + var(--sat));
  /* Liquid glass — translucent frosted surfaces for floating panels. */
  --glass:rgba(255,255,255,.68); --glass-strong:rgba(255,255,255,.82);
  --glass-brd:rgba(255,255,255,.55); --glass-blur:saturate(175%) blur(20px); --glass-hi:rgba(255,255,255,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overscroll-behavior:none}
body{font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;letter-spacing:-.006em}
h1,h2,h3,.brand,.lr-title{letter-spacing:-.02em}
#app{height:100vh;height:100dvh;height:var(--app-h,100dvh);overflow:hidden}
svg{display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--accent-weak);color:var(--accent-text)}
::-moz-selection{background:var(--accent-weak);color:var(--accent-text)}

.avatar{border-radius:50%;background:var(--accent-weak);color:var(--accent-text);display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}
.badge{background:var(--accent);color:#fff;border-radius:999px;font-size:11px;font-weight:600;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.btn{display:inline-flex;align-items:center;gap:7px;border-radius:10px;padding:9px 14px;font-size:14px;font-weight:500;border:1px solid var(--line);background:var(--surface);transition:background .12s,border-color .12s,transform .08s}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 1px 2px rgba(201,58,34,.28)}
.btn-primary:hover{background:var(--accent-text)}
.btn-ghost{border-color:transparent}
.btn-danger{color:var(--danger);border-color:var(--line)}
.btn-danger:hover{background:#fef2f2}
.icon-btn{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--muted);position:relative}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.btn:active,.icon-btn:active,.send:active,.chip:active,.list-row:active,.menu-row:active{transform:scale(.98)}

/* ---------- app shell ---------- */
.app{height:100%;display:flex;flex-direction:column}
.topbar{height:var(--topbar-total);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:var(--sat) 16px 0;border-bottom:1px solid var(--line);background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.04);position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px}
.brand .mark{width:32px;height:32px;border-radius:9px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center}
.brand-wrap{position:relative;display:flex;align-items:center;gap:7px}
/* Penanda beta. Kecil dan tenang dengan sengaja: ia menerangkan, bukan meminta maaf.
   flex:none supaya nama workspace yang panjang memendekkan dirinya sendiri, bukan
   menggencet penanda ini sampai hurufnya patah. */
.beta-pill{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.7px;padding:3px 7px;border-radius:6px;
  background:var(--accent-weak);color:var(--accent-text);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  cursor:pointer;line-height:1.2;transition:background .12s}
.beta-pill:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}
/* Di pintu depan ia memuat tanggalnya juga, jadi tidak sesempit yang di bilah atas. */
.beta-pill-auth{letter-spacing:.4px;font-size:10px;padding:3px 9px;cursor:default;align-self:center}
.beta-pill-auth:hover{background:var(--accent-weak)}
.brand-wrap>.brand{gap:6px;padding:6px 8px 6px 10px;border-radius:10px;max-width:56vw}
.brand-wrap>.brand:hover{background:var(--surface-2)}
.brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-wrap>.brand>svg:last-child{color:var(--faint);flex-shrink:0}
.co-backdrop{position:fixed;inset:0;z-index:100}
.co-menu{position:fixed;top:calc(var(--topbar-total) + 4px);left:12px;z-index:101;width:288px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 44px rgba(0,0,0,.18);padding:8px}
.co-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);padding:8px 10px 5px}
.co-item{width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;text-align:left;color:var(--muted)}
.co-item:hover{background:var(--surface-2)}
.co-item.on{background:var(--accent-weak)}
.co-item-body{flex:1;min-width:0}
.co-item-name{display:block;font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-item-role{display:block;font-size:12px;color:var(--muted);text-transform:capitalize}
.co-item.on>svg{color:var(--accent-text)}
.co-sep{height:1px;background:var(--line);margin:6px 4px}
.co-link{width:100%;display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;font-size:14px;font-weight:500;color:var(--accent-text)}
.co-link:hover{background:var(--surface-2)}
.co-code{font-size:12px;color:var(--muted);padding:9px 10px 4px}
.co-code b{color:var(--text);letter-spacing:1px}
.co-form{display:flex;flex-direction:column;gap:9px;padding:4px 6px 8px}
.co-form input{border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14px;outline:none;background:var(--surface)}
.co-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.co-form .btn-primary{justify-content:center}
.topbar .bell .badge{position:absolute;top:2px;right:2px}
/* inline top-bar search */
.brand-wrap{flex:none;min-width:0}
.brand-name{max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topsearch-wrap{flex:1;min-width:0;display:flex;align-items:center;gap:7px;margin:0 8px;border:1px solid var(--line);border-radius:20px;padding:0 6px 0 12px;background:var(--surface-2);height:38px}
.topsearch-wrap svg{color:var(--muted);flex:none}
.topsearch{flex:1;min-width:0;border:none;background:none;outline:none;font-size:14px;color:var(--text);height:100%}
.topsearch-x{flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:none;background:none;color:var(--muted);cursor:pointer}
.topsearch-x:hover{background:var(--surface);color:var(--text)}
.topsearch-panel{position:fixed;top:calc(var(--topbar-total) + 4px);left:12px;right:12px;z-index:101;max-height:72vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 44px rgba(0,0,0,.2);padding:6px}
@media (min-width:900px){.topsearch-wrap{max-width:420px}.topsearch-panel{left:auto;right:12px;width:420px}}
.stage{flex:1;min-height:0;display:flex;overflow:hidden}
/* The composer lives in here. padding-bottom must clear the home indicator,
   otherwise the message box is drawn underneath it and looks cut off. */
.taskbar{flex-shrink:0;min-height:calc(var(--topbar-h) + var(--sab));border-top:1px solid var(--line);background:var(--surface);padding:8px 14px calc(8px + var(--sab));display:flex;align-items:center;gap:10px}
.taskbar.empty{display:none}
/* Tombol utama di taskbar TIDAK BOLEH tergencet. Ia tindakan pokok layar itu; kalau
   "New task" patah jadi dua baris, yang rusak bukan cuma rupanya — tinggi taskbar ikut
   berubah dan isi di atasnya bergeser. flex:none menahannya, nowrap menjaga tulisannya. */
.taskbar>.btn{flex:none;white-space:nowrap}
/* Chip saring: memakai sisa ruang, dan digulir mendatar kalau tidak muat.
   justify-content SENGAJA dibiarkan di awal — flex-end pada wadah yang bisa digulir
   membuat bagian awalnya tidak bisa dijangkau, jebakan yang sama seperti tombol Screenshot
   yang melayang keluar kartu. */
.tb-chips{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tb-chips::-webkit-scrollbar{display:none}
.tb-chips>.chip{flex:none}
/* Ajakan pasang di bilah bawah layar utama. Keterangannya menyusut lebih dulu kalau
   ruangnya sempit — tombolnya yang harus utuh, bukan penjelasannya. */
.tb-install{flex:none;white-space:nowrap}
.tb-install-note{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12px;color:var(--muted)}

/* ---------- shared rows ---------- */
.list-row{width:100%;display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);cursor:pointer;text-align:left;transition:background .12s}
.list-row:hover{background:var(--surface-2)}
.list-row.active{background:var(--accent-weak);box-shadow:inset 3px 0 0 var(--accent)}
.lr-body{flex:1;min-width:0}
.lr-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-sub{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.lr-meta{font-size:12px;color:var(--faint);flex-shrink:0;display:flex;align-items:center;gap:8px}
.lr-avas{display:inline-flex;align-items:center}
.lr-avas .avatar{margin-left:-9px;box-shadow:0 0 0 2px var(--surface)}
.lr-avas .avatar:first-child{margin-left:0}
.ava-more{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--surface-2);color:var(--muted);font-weight:600;margin-left:-9px;box-shadow:0 0 0 2px var(--surface);flex:none}
.due{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);margin-top:3px}
.due svg{opacity:.7}
.due.overdue{color:var(--due-late);font-weight:600}
.due.due-today{color:var(--due-today);font-weight:600}
.due.due-soon{color:var(--text);font-weight:500}
.count-pill{font-size:12px;font-weight:600;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);min-height:56px}
.panel-head h2{font-size:16px;font-weight:600}

/* ---------- DESKTOP/TABLET: responsive column cascade ---------- */
.cascade{display:flex;flex:1;min-width:0;height:100%;overflow:hidden;background:var(--surface-2)}
/* ---------- company rail (Slack-style workspace switcher) ---------- */
.co-rail{flex:0 0 64px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0;background:var(--bg);border-right:1px solid var(--line);overflow-y:auto;overflow-x:hidden}
.co-rail::-webkit-scrollbar{width:0;height:0}
.co-home{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;flex:none}
.co-home:hover{filter:brightness(1.08)}
.co-rail-sep{width:26px;height:1px;background:var(--line);margin:2px 0;flex:none}
.co-rail-list{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;flex:1 1 auto;min-height:0}
.co-ava{position:relative;width:100%;height:46px;display:flex;align-items:center;justify-content:center;flex:none}
.co-logo{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;letter-spacing:-.01em;transition:border-radius .15s}
.co-ava:hover .co-logo{border-radius:10px}
.co-ava.on .co-logo{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.co-ava.on::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:24px;border-radius:0 4px 4px 0;background:var(--accent)}
.co-add{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--accent-text);border:1px dashed var(--line);flex:none}
.co-add:hover{background:var(--accent-weak);border-color:var(--accent)}
/* company switcher inside the mobile Home rail */
.co-rail-m{gap:6px}
.co-rail-m .co-ava.on .co-logo{box-shadow:0 0 0 2px var(--surface-2),0 0 0 4px var(--accent)}
/* ---------- onboarding (join / create a workspace) ---------- */
.onb-card{max-width:400px}
.onb-title{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.onb-form{margin-top:16px}
.onb-form>label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.onb-row{display:flex;flex-direction:column;gap:10px}
.onb-row input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text)}
.onb-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.onb-row .btn{width:100%;justify-content:center}
.onb-or{display:flex;align-items:center;text-align:center;color:var(--faint);font-size:12px;margin:16px 0 2px}
.onb-or::before,.onb-or::after{content:"";flex:1;height:1px;background:var(--line)}
.onb-or span{padding:0 12px;text-transform:uppercase;letter-spacing:.06em}
.co-link.co-danger{color:var(--danger)}
.co-link.co-danger:hover{background:rgba(159,18,57,.1)}
/* workspace settings (rename + members) */
.co-menu-wide{width:302px;max-height:76vh;overflow-y:auto}
.co-flabel{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--faint);display:block;margin:2px 2px 6px}
.co-info{padding:2px 2px 8px;font-size:14px}
.co-info b{display:block;margin-top:2px}
.co-rename{padding:2px}
.co-rename input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text);margin-bottom:8px}
.co-rename input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.co-rename .btn{width:100%;justify-content:center}
.co-member{display:flex;align-items:center;gap:9px;padding:6px 4px}
.co-member-body{display:flex;flex-direction:column;min-width:0}
.co-member-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-member-role{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-mem-actions{display:flex;gap:2px;margin-left:auto;flex:none}
.co-mem-btn{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--muted);flex:none}
.co-mem-btn:hover{background:var(--surface-2);color:var(--text)}
.co-mem-btn.danger:hover{background:rgba(159,18,57,.12);color:var(--danger)}
.co-copy{display:flex;align-items:center;gap:6px;width:100%;text-align:left;cursor:pointer;border-radius:8px}
.co-copy:hover{background:var(--surface-2)}
.co-copy b{color:var(--text)}
.co-copy svg{margin-left:auto;color:var(--faint);flex:none}
.co-copy:hover svg{color:var(--accent-text)}
/* Companies section detail */
.ws-detail{max-width:560px}
.ws-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.ws-head-b{min-width:0}
.ws-name{font-size:20px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
.ws-role{font-size:13px;color:var(--muted);margin-top:2px}
.ws-actions{margin-bottom:16px}
.ws-switch{width:100%;justify-content:center}
.ws-detail .co-rename{margin-bottom:14px}
.ws-detail .co-code{margin:6px 0 4px}
.ws-sep{height:1px;background:var(--line);margin:20px 0 14px}
.ws-danger{width:100%;justify-content:center}
.ws-hint{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.55}
/* message edit/delete */
.bubble{position:relative}
.msg-acts{position:absolute;top:50%;transform:translateY(-50%);display:flex;gap:1px;opacity:0;transition:opacity .12s;z-index:1}
.bubble:hover .msg-acts{opacity:1}
.bubble.me .msg-acts{right:100%;margin-right:3px}
.msg-act{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--faint);background:var(--surface);border:1px solid var(--line)}
.msg-act:hover{color:var(--text);background:var(--surface-2)}
.bubble.them .msg-acts{left:100%;margin-left:3px}
/* Di perangkat sentuh ikon aksinya DISEMBUNYIKAN, bukan dibuat setengah tembus.
   Dulu opacity:.5 — artinya tiga tombol samar menempel di SETIAP pesan, seumur hidup
   layar itu, dan tak satu pun bisa ditekan dengan yakin. Di ponsel jalannya sudah ada
   dan lebih baik: tekan-lama membuka menu penuh, geser untuk membalas. */
@media (hover:none){.msg-acts{display:none}}
/* Pemisah sebelum baris yang tidak bisa dibatalkan. */
.mm-sep{height:1px;background:var(--line);margin:6px 8px}
/* Penghitung karakter: diam sampai mendekati batas. */
.co-count{position:absolute;right:6px;bottom:calc(100% + 4px);font-size:11px;font-weight:600;color:var(--faint);background:var(--surface);padding:1px 7px;border-radius:20px;border:1px solid var(--line);opacity:0;transition:opacity .15s;pointer-events:none}   /* di ATAS kotak ketik, bukan menindih teksnya */
.co-count.on{opacity:1}
.co-count.warn{color:var(--due-late)}
.rxns{display:flex;flex-wrap:wrap;gap:4px;margin-top:-3px}
.rxns.me{align-self:flex-end;justify-content:flex-end}
.rxns.them{align-self:flex-start}
.rxns.them.grp{margin-left:36px}
.rxn{display:inline-flex;align-items:center;gap:3px;padding:2px 8px 2px 6px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:12px;line-height:1.7;cursor:pointer;transition:transform .08s}
.rxn:active{transform:scale(.94)}
.rxn.mine{background:var(--accent-weak);border-color:var(--accent)}
.rxn-e{font-size:13px}
.rxn-c{font-weight:600;color:var(--muted)}
.rxn.mine .rxn-c{color:var(--accent-text)}
.rxn-backdrop{position:fixed;inset:0;z-index:200}
.rxn-pop{position:fixed;left:50%;bottom:calc(84px + var(--sab));transform:translateX(-50%);z-index:201;display:flex;gap:4px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:0 12px 40px rgba(0,0,0,.24)}
.rxn-pick{width:44px;height:44px;border-radius:50%;font-size:24px;display:flex;align-items:center;justify-content:center;transition:transform .1s,background .12s}
.rxn-pick:hover{background:var(--surface-2);transform:scale(1.15)}
.rxn-more{color:var(--muted)}
.rxn-more:hover{color:var(--text)}
.emo-backdrop{position:fixed;inset:0;z-index:440;background:rgba(17,20,28,.4);animation:cfFade .12s ease}
.emo-panel{position:fixed;z-index:441;left:50%;top:50%;transform:translate(-50%,-50%);width:344px;max-width:calc(100vw - 28px);max-height:min(70vh,460px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.28);animation:cfPop .15s cubic-bezier(.2,.9,.3,1.15);overflow:hidden}
.emo-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 6px;font-size:15px;font-weight:700}
.emo-scroll{overflow-y:auto;padding:0 12px 12px;-webkit-overflow-scrolling:touch}
.emo-cat{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:12px 4px 6px}
.emo-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.emo-btn{height:38px;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;background:none;border:none;border-radius:9px;cursor:pointer;transition:background .1s}
.emo-btn:hover{background:var(--surface-2)}
.fwd-label{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-style:italic;color:var(--muted);margin-bottom:2px}
.bubble.me .fwd-label{color:rgba(255,255,255,.82)}
.fwd-label svg{opacity:.85}
.star-ind{display:inline-flex;vertical-align:middle;margin-right:3px}
.star-ind svg{color:#e8a91a}
/* Banner sematan. Garis bawahnya ada di pembungkus, bukan di tombolnya, supaya tetap utuh
   melintasi tombol "lihat semua" di ujung kanan. */
.pin-wrap{display:flex;align-items:stretch;background:var(--surface-2);border-bottom:1px solid var(--line)}
.pin-banner{display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding:8px 14px;background:none;border:none;text-align:left;cursor:pointer}
.pin-banner:hover{background:var(--surface)}
.pin-banner>svg{color:var(--accent);flex:none}
.pin-body{display:flex;flex-direction:column;min-width:0}
.pin-label{font-size:11px;font-weight:700;color:var(--accent-text)}
.pin-snip{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Penunjuk posisi: ruas terpisah sampai 6 pin, di atas itu jalur dengan penanda sebanding. */
.pin-bars{display:flex;flex-direction:column;gap:2px;width:3px;height:28px;flex:none}
.pin-seg{flex:1;border-radius:2px;background:var(--line)}
.pin-seg.on{background:var(--accent)}
.pin-track{position:relative;background:var(--line);border-radius:2px;overflow:hidden}
.pin-thumb{position:absolute;left:0;width:100%;border-radius:2px;background:var(--accent);transition:top .18s ease}
.pin-more{flex:none;display:flex;align-items:center;justify-content:center;width:42px;background:none;border:none;border-left:1px solid var(--line);color:var(--muted);cursor:pointer}
.pin-more:hover{background:var(--surface);color:var(--text)}
/* Baris di panel: satu tombol lebar untuk melompat, satu tombol kecil untuk melepas. */
.pin-row{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--line)}
.pin-row:last-child{border-bottom:none}
.pin-row .pin-row-main{flex:1;min-width:0;border-bottom:none}
.pin-row-off{flex:none;margin-right:6px;color:var(--muted)}
.pin-row-off:hover{color:var(--danger)}
.find-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.find-ico{display:inline-flex;color:var(--muted);flex:none}
.find-input{flex:1;min-width:0;border:none;background:none;font:inherit;font-size:14px;color:var(--text);outline:none}
.find-count{font-size:12px;color:var(--muted);flex:none;min-width:38px;text-align:center}
.find-nav{width:30px;height:30px}
.find-mark{background:#ffe08a;color:#18181b;border-radius:3px;padding:0 1px}
.bubble.me .find-mark{background:#ffd24d}
.bubble.find-cur{outline:2px solid var(--accent);outline-offset:2px}
.bubble.find-cur .find-mark{background:#ff9f43}
.mm-backdrop{position:fixed;inset:0;z-index:250;background:rgba(17,20,28,.35)}
.mm-sheet{position:fixed;z-index:251;left:50%;bottom:calc(16px + var(--sab));transform:translateX(-50%);width:280px;max-width:calc(100vw - 28px);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.28);padding:6px;animation:cfPop .14s ease}
.mm-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border-radius:10px;font-size:14.5px;color:var(--text);background:none;border:none;text-align:left;cursor:pointer}
.mm-row:hover{background:var(--surface-2)}
.mm-row svg{color:var(--muted);flex:none}
.mm-row.danger,.mm-row.danger svg{color:var(--danger)}
.fwd-modal{width:360px;padding-bottom:12px}
.fwd-list{max-height:min(50vh,360px);overflow-y:auto;margin-top:8px;display:flex;flex-direction:column;gap:2px}
.fwd-row{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:11px;background:none;border:none;text-align:left;cursor:pointer}
.fwd-row:hover{background:var(--surface-2)}
.fwd-name{flex:1;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fwd-row>svg:last-child{color:var(--faint)}
.star-panel{display:flex;flex-direction:column}
.star-head-title{display:inline-flex;align-items:center;gap:8px}
.star-head-title svg{color:#e8a91a}
.star-scroll{overflow-y:auto;padding:8px 10px 12px;flex:1}
.star-item{display:block;width:100%;text-align:left;padding:11px 12px;border-radius:12px;background:none;border:none;cursor:pointer;border-bottom:1px solid var(--line)}
.star-item:hover{background:var(--surface-2)}
.star-item-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:3px}
.star-item-who{font-size:13.5px;font-weight:600}
.star-item-conv{font-size:12px;color:var(--muted);flex:none}
.star-item-snip{font-size:13.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.star-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:44px 20px;color:var(--faint);text-align:center}
.star-empty svg{color:var(--line)}
.composer-wrap{display:flex;flex-direction:column;gap:7px;width:100%}
.reply-bar{display:flex;align-items:center;gap:9px;padding:7px 12px;background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px}
.reply-bar-ic{color:var(--accent-text);flex:none;display:flex}
.reply-bar-body{display:flex;flex-direction:column;min-width:0;flex:1}
.reply-bar-sender{font-size:12px;font-weight:700;color:var(--accent-text)}
.reply-bar-snip{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-bar-x{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);flex:none}
.reply-bar-x:hover{background:var(--surface);color:var(--text)}
.msg-quote{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;padding:5px 9px;margin-bottom:5px;background:rgba(0,0,0,.06);border-left:3px solid currentColor;border-radius:7px;cursor:pointer;overflow:hidden}
.bubble.me .msg-quote{background:rgba(255,255,255,.18)}
.mq-sender{font-size:11px;font-weight:700;opacity:.85}
.mq-snip{font-size:12px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* shared task / event cards inside a chat bubble */
.chat-card{display:flex;align-items:center;gap:10px;width:100%;min-width:210px;max-width:290px;text-align:left;padding:9px 10px;margin:1px 0 5px;background:var(--surface);border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.chat-card:hover{box-shadow:0 3px 10px rgba(0,0,0,.09)}
.chat-card:active{transform:scale(.985)}
.cc-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--accent-weak);color:var(--accent)}
.cc-main{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.cc-kind{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--faint)}
.cc-title{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.cc-meta{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-meta svg{flex:none;opacity:.85}
.cc-go{flex:none;color:var(--faint);display:flex}
.cc-done .cc-title{text-decoration:line-through;opacity:.6}
.bubble-card{padding:4px}
.bubble-card .bt{padding:0 6px 2px}
.task-src{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);background:var(--accent-weak);padding:7px 10px;border-radius:9px;margin-bottom:12px}
.task-src svg{flex:none;color:var(--accent)}
/* cross-workspace markers */
.lr-title.has-tag{display:flex;align-items:center;overflow:visible}
.lr-title.has-tag .lr-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ws-tag{flex:none;display:inline-flex;align-items:center;gap:3px;margin-left:7px;padding:1px 8px 1px 6px;font-size:10.5px;font-weight:600;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:20px;white-space:nowrap;max-width:130px;overflow:hidden}
.ws-tag svg{flex:none;opacity:.75}
.foreign-banner{display:flex;align-items:center;gap:8px;padding:7px 14px;background:var(--surface-2);color:var(--muted);font-size:12.5px;font-weight:500;border-bottom:1px solid var(--line)}
.foreign-banner svg{flex:none;opacity:.8}
/* peek at a deleted message */
.bubble-del{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.peek-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:none;padding:0;font:inherit;font-size:11.5px;font-weight:600;color:var(--accent);cursor:pointer;opacity:.9}
.peek-btn:hover{opacity:1;text-decoration:underline}
.peek-btn svg{flex:none}
.bubble-revealed{border:1px dashed var(--line)}
.bubble.me.bubble-revealed{border-color:rgba(255,255,255,.4)}
.revealed-tag{display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;opacity:.7;margin-bottom:3px}
.revealed-tag svg{flex:none}
/* activity center */
.ws-activity{width:100%;justify-content:center}
.act-panel .star-scroll{padding:6px 0}
.act-row{display:flex;gap:11px;align-items:flex-start;padding:11px 16px;border-bottom:1px solid var(--line)}
.act-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;margin-top:1px}
.act-ic svg{flex:none}
.act-body{min-width:0;flex:1}
.act-line{font-size:13.5px;color:var(--text);line-height:1.4}
.act-line b{font-weight:650}
.act-time{font-size:11.5px;color:var(--faint);margin-top:2px}
.nt-item.nt-unread{background:var(--accent-weak)}
.nt-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent-weak);color:var(--accent)}
.nt-ico svg{flex:none}
.nt-item .nt-strong{font-weight:500;color:var(--text);white-space:normal;line-height:1.35;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nt-item.nt-unread{align-items:flex-start}
.nt-time{display:block;font-size:11px;color:var(--faint);margin-top:2px}
.cl-entry.cl-shipped{background:var(--accent-weak);border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:16px}
.cl-shipped .cl-head{margin-bottom:6px}
.cl-shipped .cl-title{display:flex;align-items:center;gap:6px;color:var(--accent-text)}
.cl-shipped .cl-title svg{flex:none}
/* feedback hub */
.fb-sub{font-size:13.5px;color:var(--muted);margin:-6px 0 14px;line-height:1.5}
.fb-new{width:100%;justify-content:center;margin-bottom:14px}
.fb-form{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:14px;display:flex;flex-direction:column;gap:9px}
.fb-form input,.fb-form textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit;font-size:14px;background:var(--surface);color:var(--text)}
.fb-form textarea{min-height:66px;resize:vertical}
/* Tiga tombol (Screenshot, Cancel, Submit) tidak muat berjajar di kolom selebar ponsel.
   Tanpa flex-wrap mereka meluber KE LUAR kartunya — dan karena justify-content:flex-end,
   luberannya keluar lewat sisi kiri, jadi tombolnya tampak melayang di luar kotak. */
.fb-form-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.fb-list{display:flex;flex-direction:column;gap:9px}
.fb-card{display:flex;gap:11px;align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.fb-card.open{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.fb-vote{flex:none;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:46px;padding:6px 4px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--muted);cursor:pointer;font-weight:700;font-size:13px;transition:all .12s}
.fb-vote svg{flex:none}
.fb-vote:hover{border-color:var(--accent);color:var(--accent)}
.fb-vote.on{background:var(--accent-weak);border-color:var(--accent);color:var(--accent)}
.fb-card-main{flex:1;min-width:0;text-align:left;background:none;border:none;padding:0;cursor:pointer;font:inherit}
.fb-card-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.fb-card-title{font-size:14.5px;font-weight:650;color:var(--text);line-height:1.35;display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.fb-badge{font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:20px;white-space:nowrap}
.fb-card-desc{font-size:13px;color:var(--muted);line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fb-card-meta{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--faint);margin-top:2px}
.fb-card-meta svg{flex:none;opacity:.8}
.fb-detail{margin:-2px 0 4px;padding:12px;background:var(--surface-2);border:1px solid var(--line);border-top:none;border-radius:0 0 12px 12px}
.fb-status-set{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.fb-st-btn{font-size:11.5px;font-weight:600;padding:4px 10px;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--muted);cursor:pointer}
.fb-st-btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.fb-comments{display:flex;flex-direction:column;gap:11px;margin-bottom:11px}
.fb-comment{display:flex;gap:9px}
.fb-comment-b{min-width:0;flex:1}
.fb-comment-h{display:flex;align-items:baseline;gap:8px;font-size:12px}
.fb-comment-h b{font-weight:650;color:var(--text)}
.fb-comment-h span{color:var(--faint);font-size:11px}
.fb-comment-t{font-size:13.5px;color:var(--text);line-height:1.45;margin-top:1px;word-wrap:break-word}
.fb-nocom,.fb-cload{font-size:13px;color:var(--faint);padding:2px 0 10px}
.fb-comment-form{display:flex;gap:8px;align-items:center}
.fb-comment-form input{flex:1;border:1px solid var(--line);border-radius:20px;padding:8px 13px;font:inherit;font-size:13.5px;background:var(--surface);color:var(--text)}
.fb-comment-form .btn-sm{flex:none;width:34px;height:34px;padding:0;justify-content:center;border-radius:50%}
.fb-empty{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--faint);padding:34px 20px;text-align:center;font-size:14px}
/* event visibility */
.seg-vis button{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.seg-vis button svg{flex:none}
.field-hint{font-size:11.5px;color:var(--faint);margin-top:7px;line-height:1.45}
.ev-private{display:inline-flex;vertical-align:middle;margin-left:6px;color:var(--faint)}
.ev-private svg{flex:none}
/* swipe a bubble to reply */
.chat-body .bubble{transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.chat-body .bubble.swiping{transition:none}
.chat-body .bubble.swiping::before{content:'';position:absolute;left:-30px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;background-color:var(--accent-weak);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 17 4 12 9 7'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;opacity:calc(var(--swipe,0)/55)}
.msg-flash{animation:msgflash 1.3s ease}
@keyframes msgflash{0%,100%{outline:2px solid transparent;outline-offset:2px}30%{outline:2px solid var(--accent);outline-offset:2px}}
.bubble-del{opacity:.8}
.msg-gone{display:inline-flex;align-items:center;gap:6px;font-style:italic;color:var(--faint)}
.msg-gone svg{flex:none}
/* group info modal */
.chat-title{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-info{flex:none;color:var(--muted)}
.chat-info:hover{color:var(--accent-text)}
.gi-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:101;width:342px;max-width:calc(100vw - 32px);max-height:82vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.28);padding:6px 14px 14px}
.gi-head{display:flex;align-items:center;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);padding:10px 0 6px}
/* chat attachments */
.attach-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;color:var(--muted);cursor:pointer;flex:none}
.attach-btn:hover{background:var(--surface-2);color:var(--text)}
.att-img{display:block;margin-top:4px;border-radius:12px;overflow:hidden;max-width:240px;line-height:0;padding:0;border:none;background:var(--surface-2);cursor:zoom-in;-webkit-appearance:none}
.att-img img{display:block;width:100%;height:auto;max-height:280px;object-fit:cover}
.bubble.me .att-img{margin-left:auto}
.att-file{display:inline-flex;align-items:center;gap:10px;margin-top:4px;padding:8px 12px 8px 8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--text);text-decoration:none;max-width:250px}
.att-file:hover{background:var(--surface-2)}
.att-file svg{flex:none}
.af-ico{width:32px;height:32px;border-radius:8px;background:var(--accent-weak);color:var(--accent-text);display:flex;align-items:center;justify-content:center;flex:none}
.att-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500}
.bubble.me .att-file{background:rgba(255,255,255,.16);border-color:transparent;color:#fff}
.bubble.me .af-ico{background:rgba(255,255,255,.22);color:#fff}
.bubble-att{padding-bottom:6px}

/* ---------- image compose (crop + caption) + lightbox ---------- */
.ic-backdrop{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5)}
.ic-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:201;width:420px;max-width:calc(100vw - 28px);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.32);padding:8px 16px 16px;display:flex;flex-direction:column}
.ic-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:15px;padding:6px 0 10px}
.ic-stagewrap{display:flex;justify-content:center;align-items:center;background:var(--surface-2);border-radius:12px;padding:12px;overflow:hidden;min-height:120px}
.ic-stage{position:relative;line-height:0;touch-action:none;-webkit-user-select:none;user-select:none}
.ic-stage img{display:block;border-radius:6px;pointer-events:none}
.ic-crop{position:absolute;box-sizing:border-box;border:2px solid #fff;box-shadow:0 0 0 100vmax rgba(0,0,0,.45);cursor:move;touch-action:none}
.ic-h{position:absolute;width:16px;height:16px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.ic-h.nw{left:-9px;top:-9px;cursor:nwse-resize}
.ic-h.ne{right:-9px;top:-9px;cursor:nesw-resize}
.ic-h.sw{left:-9px;bottom:-9px;cursor:nesw-resize}
.ic-h.se{right:-9px;bottom:-9px;cursor:nwse-resize}
.ic-hint{text-align:center;font-size:12px;color:var(--muted);margin:10px 0 6px}
.ic-caption{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;outline:none;background:var(--surface);color:var(--text);margin-bottom:12px}
.ic-caption:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.ic-actions{display:flex;align-items:center;gap:8px}
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:100%;border-radius:8px;object-fit:contain}
.lb-close{position:fixed;top:calc(16px + var(--sat));right:16px;z-index:301;width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer}
.lb-close:hover{background:rgba(0,0,0,.75)}
.cf-backdrop{position:fixed;inset:0;z-index:400;background:rgba(17,20,28,.42);animation:cfFade .12s ease}
.cf-modal{position:fixed;z-index:401;left:50%;top:50%;transform:translate(-50%,-50%);width:340px;max-width:calc(100vw - 40px);background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.28);padding:20px 20px 18px;animation:cfPop .15s cubic-bezier(.2,.9,.3,1.15)}
.cf-title{font-size:17px;font-weight:700;color:var(--text)}
.cf-body{margin-top:8px;font-size:14px;line-height:1.55;color:var(--muted)}
.cf-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
/* Confirm dialogs were text-only until the export flow needed a password box.
   Give a field inside one room to breathe, and drop its own bottom margin —
   .cf-actions already supplies the gap below. */
.cf-modal .field{margin-top:16px;margin-bottom:0}
.cf-actions .btn{min-width:92px;justify-content:center;padding:10px 14px}
/* Bergaris, bukan berisi. Aksen dan bahaya kini sama-sama merah; membedakannya
   hanya lewat rona menuntut mata yang jeli, dan tombol hapus bukan tempat untuk itu.
   Beda BENTUK terbaca lebih cepat daripada beda warna. */
.btn-danger{background:transparent;color:var(--danger);border-color:var(--danger);box-shadow:none;font-weight:600}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-danger:hover{background:var(--danger);filter:brightness(.93)}
@keyframes cfFade{from{opacity:0}to{opacity:1}}
@keyframes cfPop{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.bubble.me.bubble-edit,.bubble.them.bubble-edit{background:var(--surface);border:1px solid var(--line);color:var(--text);box-shadow:none;width:min(82%,440px)}
.msg-edit-box{display:flex;flex-direction:column;gap:8px}
.msg-edit-ta{width:100%;resize:none;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font:inherit;font-size:14px;background:var(--surface);color:var(--text);line-height:1.4;outline:none}
.msg-edit-ta:focus{border-color:var(--accent)}
.msg-edit-actions{display:flex;gap:8px;justify-content:flex-end}
.pf-wrap{width:100%}
.pick-field{display:flex;align-items:center;gap:9px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-size:14px;text-align:left;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.pick-field:hover{border-color:var(--accent)}
.pick-field:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak);outline:none}
.pick-field svg{color:var(--muted);flex:none}
.pf-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-val.pf-ph{color:var(--faint)}
.dp-backdrop,.tp-backdrop{position:fixed;inset:0;z-index:420;background:rgba(17,20,28,.4);animation:cfFade .12s ease}
.dp-panel,.tp-panel{position:fixed;z-index:421;left:50%;top:50%;transform:translate(-50%,-50%);width:320px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.28);padding:14px;animation:cfPop .15s cubic-bezier(.2,.9,.3,1.15)}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dp-title{font-size:15px;font-weight:700}
.dp-nav{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:none;border:none;cursor:pointer}
.dp-nav:hover{background:var(--surface-2);color:var(--text)}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-dow{margin-bottom:2px}
.dp-dowc{text-align:center;font-size:11px;font-weight:600;color:var(--faint);padding:4px 0}
.dp-cell{height:38px;border-radius:9px;font-size:13.5px;color:var(--text);background:none;border:none;cursor:pointer;transition:background .1s}
.dp-cell:hover{background:var(--surface-2)}
.dp-cell.today{font-weight:700;color:var(--accent-text)}
.dp-cell.sel{background:var(--accent);color:#fff;font-weight:600}
.dp-cell.sel:hover{background:var(--accent)}
.dp-cell.blank{pointer-events:none}
.dp-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.dp-quick{padding:7px 13px;border-radius:9px;font-size:13px;font-weight:500;color:var(--accent-text);background:var(--accent-weak);border:none;cursor:pointer}
.dp-quick:hover{filter:brightness(.97)}
.tp-head{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:700;margin-bottom:8px;padding-left:4px}
.tp-list{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;-webkit-overflow-scrolling:touch}
.tp-opt{padding:10px 12px;border-radius:9px;font-size:14px;color:var(--text);background:none;border:none;text-align:center;cursor:pointer;transition:background .1s}
.tp-opt:hover{background:var(--surface-2)}
.tp-opt.sel{background:var(--accent);color:#fff;font-weight:600}
.btn-sm{padding:6px 12px;font-size:13px;border-radius:9px;min-width:0}
.top-actions{display:flex;align-items:center;gap:2px}
.sr-backdrop{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.4)}
.sr-panel{position:fixed;z-index:151;left:50%;top:50%;transform:translate(-50%,-50%);width:520px;max-width:calc(100% - 32px);max-height:82vh;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.28);display:flex;flex-direction:column;overflow:hidden;animation:cfPop .15s cubic-bezier(.2,.9,.3,1.15)}
.sr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);flex:none}
.sr-head .star-head-title{font-size:15px;font-weight:700}
.sr-top{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);color:var(--muted)}
.sr-top input{flex:1;border:none;background:none;outline:none;font-size:15px;color:var(--text)}
.sr-results{overflow-y:auto;padding:6px}
.sr-hint{padding:28px 18px;text-align:center;color:var(--faint);font-size:14px}
.sr-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);padding:10px 12px 4px}
.sr-item{width:100%;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;text-align:left;transition:background .12s}
.sr-item:hover{background:var(--surface-2)}
.sr-body{flex:1;min-width:0;display:flex;flex-direction:column}
.sr-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--surface-2)}
.sr-item>svg:last-child{color:var(--faint);flex:none}
/* contacts: friend requests + add/search */
/* 16px, not 12px — everything below it (.section-label, .list-row) sits at 16,
   so the button was starting 4px to the left of its own list. */
.contacts-top{padding:12px 16px 2px}
.contacts-top .btn{width:100%;justify-content:center}
.btn-sm{padding:6px 11px;font-size:13px;border-radius:9px}
.req-row,.cs-row{cursor:default}
.req-row:hover,.cs-row:hover{background:none}
.req-actions,.cs-action{display:flex;gap:6px;flex:none;margin-left:auto;align-items:center}
.cs-tag{font-size:12px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:5px 10px;white-space:nowrap}
.contact-search{display:flex;align-items:center;gap:8px;margin:8px 12px 2px;padding:0 12px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.contact-search .cs-ico{color:var(--faint);flex:none;display:flex;align-items:center}
.contact-search input{flex:1;min-width:0;border:none;background:none;padding:11px 0;outline:none;color:var(--text);font-size:14px}
/* notifications dropdown */
.nt-menu{position:fixed;top:calc(var(--sat) + 52px);right:12px;z-index:101;width:328px;max-width:calc(100vw - 24px);max-height:72vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 44px rgba(0,0,0,.18);padding:6px}
.nt-head{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);padding:10px 12px 6px}
.nt-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--faint);padding:8px 12px 4px}
.nt-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;width:100%;text-align:left}
.nt-click{cursor:pointer}
.nt-click:hover{background:var(--surface-2)}
.nt-body{flex:1;min-width:0;display:flex;flex-direction:column}
.nt-invite .nt-accept{flex:none;white-space:nowrap;padding:6px 12px}
.nt-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-empty{padding:22px 16px;text-align:center;color:var(--muted);font-size:14px}
/* Lebar kolom TIDAK diatur di sini — sengaja.
   flex:1 1 0 dengan min-width:0 berarti semua kolom membagi lebar dengan persis, tanpa sisa.
   Yang memutuskan berapa kolom (dan karenanya seberapa lebar masing-masing) adalah
   desktopStage(), yang memilih jumlah slot supaya lebarnya sedekat mungkin ke lebar ponsel.
   Satu sumber kebenaran, bukan dua angka yang harus dijaga tetap sama. */
.col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--surface)}
/* Placeholder boleh melar mengisi sisa ruang — lebih baik ajakan yang ramah daripada
   bidang abu-abu kosong. Ia bukan kolom isi, jadi tidak terikat lebar ponsel. */
.col-ph{min-width:0}
/* Slot sisa. Ikut kelas .col supaya lebarnya PERSIS sama dengan kolom isi — layar
   selalu terbagi habis jadi kolom-kolom seukuran, tidak pernah menyisakan remah sempit. */
.col-empty{background:var(--surface-2)}
.col-ph{background:var(--surface-2)}
.col-ph .empty{color:var(--faint)}
.col-brand{flex:0 0 60px;display:flex;flex-direction:column;align-items:center;padding:12px 0;background:var(--surface-2);border-right:1px solid var(--line);cursor:pointer}
.col-brand:hover{background:var(--line)}
.col-body{flex:1;overflow-y:auto;min-height:0}
.col-foot{flex-shrink:0;min-height:calc(var(--topbar-h) + var(--sab));border-top:1px solid var(--line);background:var(--surface);padding:8px 14px calc(8px + var(--sab));display:flex;align-items:center;gap:10px}
.col-strip{flex:0 0 64px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0;background:var(--surface-2);border-right:1px solid var(--line);cursor:pointer;color:var(--faint)}
.col-strip:hover{background:var(--line)}
.strip-logo{width:36px;height:36px;border-radius:10px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center}
.col-rail{cursor:default}
.col-rail:hover{background:var(--surface-2)}
.col-rail .m-mini{cursor:pointer}
.col-rail .m-mini:hover{background:var(--line);color:var(--text)}
.col-strip .m-back{cursor:pointer;padding-bottom:6px;border-bottom:1px solid var(--line);width:100%}
.col-strip .m-back:hover{color:var(--text)}
.menu-row.active{background:var(--accent-weak)}

/* ---------- MOBILE sliding ---------- */
.m-shell{display:flex;width:100%;height:100%}
.m-rail{cursor:pointer;width:64px;flex-shrink:0;background:var(--surface-2);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:10px;overflow-y:auto}
.m-rail[data-act]{cursor:pointer}
.m-back{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--faint)}
.m-mini{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--faint)}
.m-mini.on{background:var(--accent-weak);color:var(--accent-text)}
.m-mini-ava{width:38px;height:38px;font-size:12px;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.m-mini-ava.on{outline:2px solid var(--accent);color:var(--accent-text)}
.m-rail .m-mini:active,.m-rail .m-back:active{transform:scale(.92)}
.m-rail .m-mini:not(.on):hover{background:var(--line)}
.m-focus{flex:1;background:var(--surface);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.m-pane{flex:1;overflow-y:auto;animation:slideIn .24s ease;min-height:0}
.m-pane.back{animation:slideBack .24s ease}
.m-pane.noanim{animation:none}
@keyframes slideIn{from{transform:translateX(20%);opacity:.3}to{transform:translateX(0);opacity:1}}
@keyframes slideBack{from{transform:translateX(-12%);opacity:.3}to{transform:translateX(0);opacity:1}}

/* ---------- home menu (mobile) ---------- */
.home-h{padding:22px 18px 12px}
.home-h .hi{font-size:20px;font-weight:700}
.home-h .date{color:var(--muted);font-size:14px;margin-top:2px}
.today-card{margin:2px 14px 14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:6px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.today-head{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:9px 10px 5px}
.td-item{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;text-align:left;color:inherit;transition:background .12s}
.td-item:hover{background:var(--surface-2)}
.td-item>svg:last-child{color:var(--faint);flex-shrink:0}
.td-time{flex-shrink:0;width:40px;font-size:12px;font-weight:600;color:var(--muted);display:flex;align-items:center;justify-content:center}
.td-time.td-task{color:var(--accent-text)}
.td-dot{flex-shrink:0;width:7px;height:7px;border-radius:50%}
.td-dot.ev{background:var(--accent)}
.td-dot.tk{background:#e8811a}
.td-title{flex:1;min-width:0;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-item .due{margin-top:0;flex-shrink:0}
.menu-row{width:100%;display:flex;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line);text-align:left;transition:background .12s}
.menu-row:hover{background:var(--surface-2)}
.menu-ico{width:44px;height:44px;border-radius:12px;background:var(--accent-weak);color:var(--accent-text);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.menu-row .t{font-size:15px;font-weight:600}
.menu-row .s{font-size:13px;color:var(--muted);margin-top:1px}
/* color-coded icons (foreground everywhere; soft tint behind the rounded menu squares) */
.ic-chats{color:#0a5cbf}.ic-tasks{color:#177245}.ic-calendar{color:#a4661a}.ic-contacts{color:#0e6f77}.ic-companies{color:#4553b3}.ic-account{color:#5b3fb0}.ic-attendance{color:#0e766e}
.ic-edit{color:#0e6f77}.ic-password{color:#c0392b}.ic-whatsnew{color:#b23a5b}.ic-notifications{color:#b45309}.ic-feedback{color:#7c3aed}.ic-developer{color:#be185d}.ic-devices{color:#2563a8}
.menu-ico.ic-chats{background:#e7f1fd}.menu-ico.ic-tasks{background:#e9f7ef}.menu-ico.ic-calendar{background:#fdf0e2}.menu-ico.ic-contacts{background:#e6f6f7}.menu-ico.ic-companies{background:#ececfb}.menu-ico.ic-account{background:#f0ecfb}.menu-ico.ic-attendance{background:#dcf5f0}
.menu-ico.ic-edit{background:#e6f6f7}.menu-ico.ic-password{background:#fdecea}.menu-ico.ic-whatsnew{background:#fbeaf0}.menu-ico.ic-notifications{background:#fdf0e2}.menu-ico.ic-feedback{background:#f2ecfd}.menu-ico.ic-developer{background:#fce7f0}.menu-ico.ic-devices{background:#e7f1fd}
.ic-report{color:#177245}.ic-insights{color:#7c3aed}.ic-managers{color:#0e6f77}
.menu-ico.ic-report{background:#e9f7ef}.menu-ico.ic-insights{background:#f2ecfd}.menu-ico.ic-managers{background:#e6f6f7}
/* Verifikasi dua langkah. Tanpa aturan ini ia jatuh ke --accent-weak/--accent-text,
   yaitu merah aksen aplikasi — warna yang disediakan untuk tindakan utama, bukan untuk
   satu baris menu. Hijau dipilih karena maknanya aman, bukan karena giliran warna. */
.ic-twofactor{color:#177245}
.menu-ico.ic-twofactor{background:#e9f7ef}

/* ---- Devices / sessions ---- */
.dev-sess-list{margin-top:6px}
.dev-sess{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line)}
.dev-sess-ic{width:38px;height:38px;flex:none;border-radius:10px;background:#e7f1fd;color:#2563a8;display:flex;align-items:center;justify-content:center}
.dev-sess-b{flex:1;min-width:0;display:flex;flex-direction:column}
.dev-sess-name{font-size:14.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dev-sess-cur{font-size:11px;font-weight:700;color:#177245;background:#17724518;padding:1px 8px;border-radius:20px}
.dev-sess-sub{font-size:12px;color:var(--muted);margin-top:2px}
/* ---------- contacts ---------- */
.contact-invite{display:flex;align-items:center;gap:12px;margin:4px 12px 12px;padding:12px 14px;background:var(--accent-weak);border:1px solid var(--line);border-radius:14px}
.contact-invite .ci-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--surface);color:var(--accent-text);flex:none}
.contact-invite .ci-text{display:flex;flex-direction:column;flex:1;min-width:0}
.contact-invite .ci-title{font-weight:600;font-size:13.5px;color:var(--text)}
.contact-invite .ci-sub{font-size:12px;color:var(--muted)}
.ci-code{display:inline-flex;align-items:center;gap:6px;font-weight:700;letter-spacing:.06em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface);color:var(--accent-text);border:1px solid var(--accent);border-radius:9px;padding:7px 10px;flex:none}
.ci-code:hover{background:var(--accent-weak)}

/* ---------- chat ---------- */
.chat-top{position:sticky;top:0;z-index:3;background:var(--surface)}
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.chat-body{padding:16px;display:flex;flex-direction:column;gap:8px}
.bubble{max-width:74%;padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.45;word-wrap:break-word;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.bubble .who{display:block;font-size:11px;font-weight:600;color:var(--accent-text);margin-bottom:3px}
.bubble .btxt{white-space:pre-wrap}
.btxt code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:rgba(0,0,0,.06);padding:1px 5px;border-radius:5px}
.bubble.me .btxt code{background:rgba(255,255,255,.22)}
.btxt del{opacity:.75}
.mention{color:var(--accent-text);font-weight:600}
.bubble.me .mention{color:#fff;text-decoration:underline;text-underline-offset:2px}
.mention.me{background:var(--accent-weak);color:var(--accent-text);border-radius:5px;padding:0 3px}
.bubble.me .mention.me{background:rgba(255,255,255,.26);color:#fff;text-decoration:none}
.composer-wrap{position:relative}
.mention-pop{position:absolute;left:10px;right:10px;bottom:calc(100% + 6px);z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.18);padding:5px;max-height:220px;overflow-y:auto}
.mention-opt{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:10px;background:none;border:none;text-align:left;cursor:pointer}
.mention-opt:hover{background:var(--surface-2)}
.mention-name{font-size:14px;font-weight:500}
.mic-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);background:none;border:none;cursor:pointer;flex:none}
.loc-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);background:none;border:none;cursor:pointer;flex:none}
.loc-btn:hover{color:#0e766e}
.cc-ico-loc{background:#0e766e1a;color:#0e766e}
/* ---- Chat polls ---- */
.poll-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;min-width:236px;max-width:320px}
.bubble.me .poll-card{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25)}
.poll-q{display:flex;gap:7px;font-weight:700;font-size:14px;margin-bottom:10px;line-height:1.35}
.poll-q svg{flex:none;margin-top:2px;color:var(--accent)}
.bubble.me .poll-q svg{color:#fff}
.poll-opt{position:relative;display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--surface-2);border-radius:9px;padding:0;margin-bottom:7px;overflow:hidden;cursor:pointer}
.bubble.me .poll-opt{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.1)}
.poll-opt-bar{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent-weak);transition:width .35s cubic-bezier(.2,.7,.3,1)}
.bubble.me .poll-opt-bar{background:rgba(255,255,255,.22)}
.poll-opt.voted .poll-opt-bar{background:var(--accent);opacity:.2}
.poll-opt-row{position:relative;display:flex;align-items:center;gap:7px;padding:9px 11px;font-size:13.5px}
.poll-opt-check{width:15px;flex:none;color:var(--accent);display:inline-flex}
.bubble.me .poll-opt-check{color:#fff}
.poll-opt-label{flex:1;min-width:0}
.poll-opt-pct{flex:none;font-weight:700;font-size:12.5px;color:var(--muted)}
.bubble.me .poll-opt-pct{color:rgba(255,255,255,.85)}
.poll-foot{font-size:11.5px;color:var(--muted);margin-top:2px}
.bubble.me .poll-foot{color:rgba(255,255,255,.75)}
.poll-form{display:flex;flex-direction:column;gap:10px}
.poll-form input[name="question"],.poll-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;font-family:inherit;outline:none;background:var(--surface);color:var(--text)}
.poll-form input:focus,.poll-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.poll-form textarea{resize:vertical}
.poll-multi{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer}
.poll-multi input{width:16px;height:16px;accent-color:var(--accent)}
/* ---- Tagihan Terbuka (open-book billing) ---- */
.ic-billing{color:#3b6d11}
.menu-ico.ic-billing{background:#eaf3de}
/* Who-can-see-this badges — one colour + icon per role, used on every restricted area */
.vis-badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;vertical-align:middle;line-height:1.5}
.vis-badge svg{flex:none}
.vis-dev{color:#6d28d9;background:#7c3aed1a;border:1px solid #7c3aed33}
.vis-owner{color:#b45309;background:#f59e0b1a;border:1px solid #f59e0b33}
.vis-mgr{color:#0f766e;background:#14b8a61a;border:1px solid #14b8a633}
:root[data-theme="dark"] .vis-dev{color:#c4b5fd;background:#7c3aed26;border-color:#7c3aed4d}
:root[data-theme="dark"] .vis-owner{color:#fbbf24;background:#f59e0b26;border-color:#f59e0b4d}
:root[data-theme="dark"] .vis-mgr{color:#5eead4;background:#14b8a626;border-color:#14b8a64d}
.vis-me{color:#4a5261;background:#64748b1a;border:1px solid #64748b33}
:root[data-theme="dark"] .vis-me{color:#cbd5e1;background:#64748b30;border-color:#64748b55}

/* ---- Label & catatan pribadi tentang seorang kontak ----
   Delapan warna, latar pastel + teks gelap senada. Ubinnya membawa latarnya sendiri, jadi
   pasangannya sama di terang maupun gelap — pola yang sama seperti .menu-ico. Tiap
   pasangan sudah diperiksa: 5,31–6,77 (ambang 4,5). */
.lbl-chip{display:inline-flex;align-items:center;font-size:12px;font-weight:650;padding:3px 10px;border-radius:20px;white-space:nowrap;line-height:1.55;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.lbl-sm{font-size:10.5px;padding:1px 7px;font-weight:700}
.lbl-c0{background:#eceef2;color:#4a5261}
.lbl-c1{background:#e7f1fd;color:#0a5cbf}
.lbl-c2{background:#e9f7ef;color:#177245}
.lbl-c3{background:#fdf0e2;color:#8a5510}
.lbl-c4{background:#fdecea;color:#b3271a}
.lbl-c5{background:#f2ecfd;color:#6b31d6}
.lbl-c6{background:#e6f6f7;color:#0e6f77}
.lbl-c7{background:#fbeaf0;color:#a92e56}

.note-card{margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:14px;background-color:var(--surface-2)}
.note-head{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.note-head svg{flex:none;color:var(--accent-text)}
.note-head>span{margin-right:auto}
.note-text{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--text);white-space:pre-wrap;word-break:break-word}
.note-empty{margin:0;font-size:13px;color:var(--muted)}
.note-edit-btn{margin-top:12px}
.note-card form{display:flex;flex-direction:column}
.note-card input[type="text"],.note-card #note-label,.note-card textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background-color:var(--surface);color:var(--text);font:inherit;font-size:14px;outline:none}
.note-card #note-label:focus,.note-card textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.note-card textarea{resize:vertical;min-height:70px;line-height:1.5}
.note-card .co-flabel{margin:10px 0 5px}
.note-card .co-flabel:first-of-type{margin-top:0}
.note-acts{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.note-acts .btn{min-width:88px;justify-content:center}

/* Contoh warna. Centangnya hanya terlihat pada yang terpilih — bentuk, bukan cuma
   warna, supaya yang buta warna tetap bisa melihat mana yang aktif. */
.lbl-sws{display:flex;flex-wrap:wrap;gap:8px;margin:9px 0 2px}
.lbl-sw{width:30px;height:30px;border-radius:9px;border:2px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:transform .12s ease,border-color .12s ease}
.lbl-sw svg{opacity:0}
.lbl-sw.on{border-color:currentColor}
.lbl-sw.on svg{opacity:1}
.lbl-sw:hover{transform:scale(1.08)}
.lbl-sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Penyaring label di atas daftar kontak. */
.lbl-filter{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.lbl-filter::-webkit-scrollbar{display:none}
.lbl-filter .lbl-chip{cursor:pointer;border:1.5px solid transparent;flex:none}
.lbl-filter .lbl-chip.on{border-color:currentColor}
.lbl-filter .lbl-all{background-color:var(--surface-2);color:var(--muted)}

/* ---- Daftar tugas (bentuk Wunderlist) ---- */
/* Satu baris yang digulir mendatar. Di Wunderlist daftar itu hal yang dilihat orang
   sepanjang hari; menyembunyikannya di balik menu membuat orang berhenti berpindah. */
.tv-bar{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tv-bar::-webkit-scrollbar{display:none}
.tv-chip{flex:none;display:inline-flex;align-items:center;gap:5px}
.tv-chip svg{flex:none}
.tv-n{font-size:11px;font-weight:700;opacity:.75;margin-left:3px}
/* Tepi kanan yang memudar: 725px isi deret ini tersembunyi di kolom 453px, dan tanpa
   tanda apa pun orang tidak tahu ada yang bisa digulir. Diukur di demo, bukan diduga. */
.tv-bar{position:relative;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.tv-manage{border-style:dashed}

/* Baris kedua di tiap tugas: tenggat + lencana daftar + hitungan komentar/berkas.
   Sebelumnya semua ini berdesakan di kanan dan memakan lebar JUDUL — diukur: judul
   butuh 424px, cuma dapat 72px. */
.lr-sub2{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;overflow:hidden;min-width:0;margin-top:2px}
.lr-sub2>.due,.lr-sub2>.lr-sub{flex:none;white-space:nowrap}
/* Nama daftar dipotong, bukan dibiarkan mendorong yang lain keluar. 140px cukup untuk
   dikenali; selebihnya kalah penting dari tenggat di sebelahnya. */
/* display:inline-block, BUKAN inline-flex warisan .lbl-chip: text-overflow:ellipsis
   tidak berlaku pada wadah flex, jadi namanya terpotong di tengah kata tanpa titik-titik
   dan terlihat seperti kerusakan, bukan seperti pemotongan yang disengaja. */
.lr-sub2 .lbl-chip{display:inline-block;flex:0 1 auto;min-width:0;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr-sub2 .t-mini{flex:none}
/* Bintang menempel di judul sekarang, bukan mengambang di tengah baris. */
.lr-title .t-star{margin-left:6px;vertical-align:-1px}

/* Tanda di baris tugas. --amber-ish untuk bintang: warnanya sendiri, bukan aksen app,
   supaya "penting" tidak tertukar dengan "terpilih". */
.t-star{display:inline-flex;color:#BA7517}
:root[data-theme="dark"] .t-star{color:#FAC775}
.t-mini{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--muted)}
.t-mini svg{flex:none}

.t-h1{display:flex;align-items:flex-start;gap:10px}
.t-star-btn{flex:none;margin-left:auto;background:none;border:none;padding:4px;cursor:pointer;color:var(--faint);border-radius:8px;transition:color .14s ease,transform .12s ease}
.t-star-btn:hover{color:#BA7517;transform:scale(1.1)}
.t-star-btn.on{color:#BA7517}
:root[data-theme="dark"] .t-star-btn.on,:root[data-theme="dark"] .t-star-btn:hover{color:#FAC775}
.t-star-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.meta-btn{width:100%;text-align:left;background:none;border:none;font:inherit;color:inherit;cursor:pointer;border-radius:10px;padding:8px 6px;margin-left:-6px}
.meta-btn:hover{background-color:var(--surface-2)}
.meta-btn>svg:last-child{margin-left:auto;color:var(--faint)}

/* Bagian lampiran & komentar di detail tugas. */
.task-sec{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.task-sec-h{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.task-sec-h svg{flex:none;color:var(--accent-text)}

.tf-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.tf-row:last-of-type{border-bottom:none}
.tf-thumb{width:40px;height:40px;flex:none;border:none;padding:0;border-radius:8px;overflow:hidden;cursor:pointer;background:var(--surface-2)}
.tf-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tf-ico{width:40px;height:40px;flex:none;border-radius:8px;background-color:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.tf-b{display:flex;flex-direction:column;min-width:0;flex:1}
.tf-name{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-sub{font-size:12px;color:var(--muted)}
.tf-add{margin-top:12px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}

.cmt{display:flex;gap:10px;padding:9px 0}
.cmt-b{flex:1;min-width:0}
.cmt-h{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--muted)}
.cmt-h b{font-size:13px;color:var(--text);font-weight:600}
.cmt-x{margin-left:auto;background:none;border:none;padding:2px;cursor:pointer;color:var(--faint);border-radius:6px}
.cmt-x:hover{color:var(--danger)}
.cmt-t{font-size:14px;line-height:1.5;margin-top:2px;white-space:pre-wrap;word-break:break-word}
.cmt-del{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--faint);font-style:italic;padding:9px 0}
.cmt-form{display:flex;gap:8px;margin-top:12px}
.cmt-form input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background-color:var(--surface);color:var(--text);font:inherit;font-size:14px;outline:none}
.cmt-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}

/* Kelola daftar. */
/* Dalam alur biasa, bukan position:absolute: .detail-pad tidak punya position:relative,
   jadi yang absolut akan mengambil patokan dari leluhur yang tidak terduga — dan itu
   berbeda-beda tergantung kolom mana yang sedang tergambar. */
.lm-head{display:flex;align-items:center;gap:10px}
.lm-head h1{margin:0;flex:1}
.lm-close{flex:none}
.lm-row{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.lm-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:none;border:none;padding:0;cursor:pointer;font:inherit;text-align:left}
.lm-sub{font-size:12px;color:var(--muted)}
#lm-name{width:100%;padding:10px 12px;margin-top:5px;border:1px solid var(--line);border-radius:10px;background-color:var(--surface);color:var(--text);font:inherit;font-size:14px;outline:none}
#lm-name:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}

/* ---- Verifikasi dua langkah ---- */
.tf-qr{display:flex;justify-content:center;margin:16px 0 6px}
/* Latar putih dipatok di dalam SVG-nya sendiri: QR di atas latar gelap tidak terbaca
   pemindai mana pun, dan tema gelap tidak boleh mengubah itu. */
.tf-qr svg{border-radius:12px;max-width:100%;height:auto;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.tf-manual{margin-top:14px}
.tf-secret{display:flex;align-items:center;gap:9px;width:100%;justify-content:center;padding:11px 12px;margin:6px 0 4px;border:1px dashed var(--line);border-radius:12px;background-color:var(--surface-2);color:var(--text);cursor:pointer;font:inherit}
.tf-secret code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;letter-spacing:.06em;word-break:break-all}
.tf-secret:hover{border-color:var(--accent)}
#tf-code{width:100%;margin-top:5px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background-color:var(--surface);color:var(--text);font:inherit;font-size:19px;letter-spacing:.28em;text-align:center;outline:none}
#tf-code:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
#tf-confirm .co-flabel{display:block;margin-top:16px}
.tf-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.tf-acts .btn{justify-content:center}
.tf-done{display:flex;align-items:center;gap:9px;padding:12px 14px;margin:4px 0 12px;border-radius:12px;background-color:#e9f7ef;color:#177245;font-weight:600;font-size:14px}
:root[data-theme="dark"] .tf-done{background-color:#14b8a626;color:#5eead4}
.tf-done svg{flex:none}
.tf-warn{display:flex;align-items:flex-start;gap:8px;margin-top:12px}
.tf-warn svg{flex:none;margin-top:2px;color:var(--accent-text)}
/* Kode pemulihan: monospace dan berjarak, karena ia dibaca dari layar lalu diketik
   ulang — kadang dari kertas. */
.tf-codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:14px 0 4px}
.tf-codes code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;letter-spacing:.06em;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background-color:var(--surface-2);text-align:center}
.vis-row{margin:-6px 0 14px;display:flex;flex-wrap:wrap;gap:6px}
.lr-title .vis-badge,.star-head-title .vis-badge{margin-left:7px}
.bl-sec-lbl{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-top:6px}
.bl-cmp-oth .bl-cmp-ini{background:transparent;border:1px dashed var(--line);color:var(--muted);font-size:11px}
.bl-cmp-note{font-size:12px;color:var(--muted);padding:2px 0 0 44px}
/* Billing plan (fixed-price mode) */
.bl-card.bl-plan{text-align:center;padding:20px 16px}
.bl-plan-label{font-size:12px;color:var(--muted)}
.bl-plan-amt{font-size:34px;font-weight:750;color:var(--accent-text);line-height:1.15;margin:2px 0}
.bl-plan-sub{font-size:12.5px;color:var(--muted)}
.bl-mode-seg{display:flex;gap:6px;background:var(--surface-2);padding:4px;border-radius:11px;margin-bottom:4px}
.bl-mode-seg button{flex:1;border:none;background:none;color:var(--muted);font-size:12.5px;font-weight:650;padding:8px 6px;border-radius:8px;cursor:pointer;transition:background .15s,color .15s}
.bl-mode-seg button.on{background:var(--surface);color:var(--accent-text);box-shadow:0 1px 3px #0000001f}
.bl-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:14px}
/* Peringatan riwayat grup: cukup terbaca untuk dilihat sebelum menekan Add, cukup tenang
   untuk tidak terasa seperti pesan galat. Ini pemberitahuan, bukan larangan. */
.gi-hist{display:flex;align-items:flex-start;gap:7px;margin:6px 0 10px;padding:8px 10px;
  border-radius:9px;background:var(--surface-2);color:var(--muted);font-size:12px;line-height:1.45}
.gi-hist svg{flex:none;margin-top:1px}
/* ---- perkiraan harga di layar bikin workspace ---- */
.pn{margin:10px 2px 12px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2)}
/* --muted, bukan --faint: kartunya duduk di atas --surface-2 yang lebih gelap dari putih,
   dan --faint di sana cuma 4,31 — di bawah ambang 4,5. Sama persis dengan kasus jam di
   gelembung stiker dulu: warna redup yang aman di atas putih belum tentu aman di atas
   latar kartu. */
.pn-h{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:var(--muted)}
.pn-b{margin-top:6px;font-size:13px;line-height:1.5;color:var(--text)}
.pn-b b{font-size:15px;font-weight:700}
/* Keterangan tambahan dibuat tenang tapi tetap terbaca — orang membacanya sekali,
   waktu memutuskan, dan setelah itu tidak pernah lagi. */
.pn-sub{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:var(--muted)}
/* ---- riwayat pembayaran (pemilik workspace) ---- */
.ph-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.ph-row:last-child{border-bottom:none}
.ph-m{flex:0 0 auto;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
/* Nominal mengambil sisa ruang dan rata kanan, jadi digitnya sejajar antar baris. */
.ph-a{flex:1 1 auto;text-align:right;font-size:13.5px;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ph-proof{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted);cursor:pointer}
.ph-proof:hover{background:var(--surface-2);color:var(--text)}
/* Alasan penolakan ditaruh sebagai baris tersendiri, bukan disingkat di dalam baris:
   ini satu-satunya keterangan yang memberi tahu orang APA yang harus dia perbaiki. */
.ph-note{display:flex;align-items:flex-start;gap:6px;padding:0 0 9px 0;margin-top:-4px;
  font-size:12px;line-height:1.45;color:var(--danger)}
.ph-note svg{flex:none;margin-top:2px}
@media (max-width:400px){.ph-m{font-size:12.5px}.ph-a{font-size:13px}}
/* ---- untung/rugi ---- */
/* Hijau dan merah dipakai untuk untung/rugi, TAPI tidak sendirian: angka rugi selalu
   didahului tanda minus. Sekitar 8% laki-laki sulit membedakan merah dan hijau, dan
   angka yang artinya cuma bisa dibaca dari warnanya berarti tidak terbaca oleh mereka. */
.pnl-up{color:#177245}
.pnl-down{color:#c0392b}
:root[data-theme="dark"] .pnl-up{color:#4ade80}
:root[data-theme="dark"] .pnl-down{color:#f87171}
.pnl-now-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 14px;padding:2px 0 12px;border-bottom:1px solid var(--line);margin-bottom:10px}
.pnl-now-grid>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.pnl-now-grid span{font-size:12px;color:var(--muted)}
.pnl-now-grid b{font-size:16px;font-weight:650;color:var(--text);overflow-wrap:anywhere}
.pnl-head,.pnl-row{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:13px}
.pnl-head{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--faint);
  border-bottom:1px solid var(--line);padding-bottom:6px}
.pnl-row{border-bottom:1px solid var(--line)}
.pnl-row:last-child{border-bottom:none}
.pnl-m{flex:1 1 0;min-width:0;color:var(--muted)}
.pnl-m i{font-style:normal;font-size:11px;color:var(--accent-text)}
/* Angka rata kanan supaya digitnya sejajar dan gampang dibandingkan sekilas. */
.pnl-in,.pnl-out,.pnl-net{flex:0 0 auto;min-width:82px;text-align:right;font-variant-numeric:tabular-nums}
.pnl-out{color:var(--muted)}
.pnl-out i,.pnl-m i.none{font-style:normal;color:var(--faint);font-size:11.5px}
.pnl-net{font-weight:650}
.pnl-now{background:var(--surface-2);border-radius:8px;padding-left:8px;padding-right:8px}
.pnl-tot{border-top:2px solid var(--line);border-bottom:none;font-weight:650;margin-top:2px}
.pnl-tot .pnl-m{color:var(--text)}
/* Pratinjau tagihan di layar pengaturan harga. */
.bl-preview{display:flex;gap:8px;margin:2px 0 10px}
.bl-preview>div{flex:1;display:flex;flex-direction:column;gap:2px;align-items:center;
  padding:8px 6px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.bl-preview span{font-size:11.5px;color:var(--muted)}
.bl-preview b{font-size:13.5px;font-weight:650;color:var(--text)}
@media (max-width:400px){.pnl-in,.pnl-out,.pnl-net{min-width:70px;font-size:12.5px}}
.bl-card-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px}
.bl-row{display:flex;justify-content:space-between;font-size:14px;padding:5px 0;color:var(--text)}
.bl-row span:first-child{color:var(--muted)}
.bl-sub{border-top:1px solid var(--line);margin-top:4px;padding-top:9px;font-weight:600}
.bl-total{border-top:2px solid var(--line);margin-top:4px;padding-top:9px;font-weight:750;font-size:15px}
.bl-total span:first-child{color:var(--text)}
.bl-note{font-size:12.5px;color:var(--muted);margin-top:8px;font-style:italic}
.bl-empty{font-size:13.5px;color:var(--muted);padding:6px 0}
.bl-mine .bl-mine-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.bl-mine-label{font-size:12px;color:var(--muted)}
.bl-mine-pct{font-size:30px;font-weight:750;color:var(--accent-text);line-height:1.1}
.bl-mine-sub{font-size:12px;color:var(--muted)}
.bl-mine-amt{font-size:20px;font-weight:750;color:var(--text)}
.bl-badge{display:inline-block;margin-top:6px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px}
.bl-badge.pending{color:#b45309;background:#f59e0b1a}
.bl-badge.approved{color:#177245;background:#17724522}
.bl-badge.rejected{color:#c0392b;background:#c0392b1a}
.bl-pay{margin-top:12px;width:100%;justify-content:center}
.bl-paid-note{margin-top:12px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.bl-paid-note.ok{color:#177245}
.bl-paid-note.bad{color:#c0392b}
.bl-proof{margin-top:10px;width:64px;height:64px}
.bl-cmp{display:flex;align-items:center;gap:10px;padding:6px 0}
.bl-cmp-ini{width:34px;height:34px;flex:none;border-radius:9px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.bl-cmp.mine .bl-cmp-ini{background:var(--accent);color:#fff}
.bl-cmp-bar-wrap{flex:1;height:9px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.bl-cmp-bar{display:block;height:100%;border-radius:5px;background:var(--line)}
.bl-cmp.mine .bl-cmp-bar{background:var(--accent)}
.bl-cmp-pct{flex:none;width:46px;text-align:right;font-size:12.5px;font-weight:600;color:var(--muted)}
.bl-cmp.mine .bl-cmp-pct{color:var(--accent-text)}
.bl-form{display:flex;flex-direction:column;gap:9px}
.bl-field{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--muted)}
.bl-field input{width:150px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:14px;outline:none;background:var(--surface);color:var(--text);text-align:right}
.bl-form > input{width:100%;text-align:left;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:14px;outline:none;background:var(--surface);color:var(--text)}
.bl-field input:focus,.bl-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.bl-items{display:flex;flex-direction:column;gap:8px}
.bl-item-row{display:flex;align-items:center;gap:8px}
.bl-item-label{flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:14px;outline:none;background:var(--surface);color:var(--text)}
.bl-item-amt{width:118px;flex:none;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:14px;outline:none;background:var(--surface);color:var(--text);text-align:right}
.bl-item-label:focus,.bl-item-amt:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.bl-item-del{flex:none;width:32px;height:32px;border-radius:8px;border:none;background:var(--surface-2);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s}
.bl-item-del:hover{background:#c0392b1a;color:#c0392b}
.bl-add-item{align-self:flex-start;border:1px dashed var(--line);background:none;color:var(--accent-text);font-size:13px;font-weight:600;padding:7px 12px;border-radius:9px;cursor:pointer;transition:border-color .15s,background .15s}
.bl-add-item:hover{border-color:var(--accent);background:var(--accent-weak)}
.bl-pct-row{display:flex;gap:10px;margin-top:2px}
.bl-pct-row .bl-field{flex:1;justify-content:space-between}
.bl-pct-row .bl-field input{width:78px}
.bl-first-note,.ex-note{display:flex;align-items:flex-start;gap:7px;margin-top:12px;font-size:12.5px;color:var(--accent-text);background:var(--accent-weak);border-radius:9px;padding:9px 11px;line-height:1.4}
.bl-first-note svg{flex:none;margin-top:1px}
.pay-banner{display:flex;align-items:center;gap:11px;width:100%;text-align:left;margin-bottom:14px;padding:12px 14px;border-radius:14px;border:1px solid #f59e0b55;background:linear-gradient(180deg,#fff7ed,#fffbeb);color:#92400e;cursor:pointer;transition:transform .12s,box-shadow .15s}
.pay-banner:hover{transform:translateY(-1px);box-shadow:0 6px 18px #f59e0b26}
.pay-banner:active{transform:translateY(0)}
.pay-banner-ic{flex:none;width:34px;height:34px;border-radius:10px;background:#f59e0b22;color:#b45309;display:flex;align-items:center;justify-content:center}
.pay-banner-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pay-banner-b b{font-size:14px;font-weight:700}
.pay-banner-b span{font-size:12px;color:#a16207}
.pay-banner>svg{flex:none;color:#d97706}
:root[data-theme="dark"] .pay-banner{background:linear-gradient(180deg,#2a2010,#211a0c);border-color:#f59e0b44;color:#fbbf24}
:root[data-theme="dark"] .pay-banner-b span{color:#d9a441}
:root[data-theme="dark"] .pay-banner-ic{background:#f59e0b22;color:#fbbf24}
.ic-legal{color:#0891b2}
/* ---------- data export + legal ----------
   Both of these used a translucent background (#0891b21f). Every other menu
   icon in the app uses a SOLID pastel, and on a dark surface a 12% tint reads
   as no background at all — so these two looked flat and colourless sitting
   next to proper pastel circles. Solid pastels now, same as the rest.
   They also both used the same cyan while appearing in the same list, which
   looked like a mistake: legal moves to indigo, export keeps the cyan. */
.ic-legal{color:var(--accent-text)}
.menu-ico.ic-legal{background:#e8e7fb}
.ic-export{color:#0891b2}
.menu-ico.ic-export{background:#ddf3f9}

/* ---------- danger zone ---------- */
/* Honeypot: off-screen, not display:none. Automated form-fillers skip fields that are
   hidden outright but happily fill ones that are merely out of view — which is the
   whole point. Never seen, never tabbed to, never read aloud. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.att-dl{display:inline-flex;align-items:center;gap:7px;margin:0 0 14px;text-decoration:none;color:var(--accent-text);background:var(--accent-weak);border:1px solid transparent}
.att-dl:hover{border-color:var(--accent)}
.ic-acctdel{color:var(--danger)}
.menu-ico.ic-acctdel{background:#fdecea}
:root[data-theme="dark"] .menu-ico.ic-acctdel{background:#c0392b26}
.lr-danger .lr-title{color:var(--danger)}

/* ---------- workspaces counting down to deletion ---------- */
.ic-pending{color:#b45309}
.menu-ico.ic-pending{background:#fdf0e2}
.pd-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);text-align:left}
.pd-row .lr-body{flex:1;min-width:0}
.pd-acts{display:flex;gap:7px;flex-shrink:0}
/* The last week reads red, not amber. Up to then it is a reminder; after that the
   data really is about to go, and the row should stop looking like routine housekeeping. */
.pd-urgent .ic-pending{color:var(--danger)}
.pd-urgent .menu-ico.ic-pending{background:#fdecea}
.pd-urgent .lr-sub{color:var(--danger);font-weight:600}
@media(max-width:560px){
  .pd-row{flex-wrap:wrap}
  .pd-acts{width:100%;padding-left:48px}
}
.ex-list{margin-top:2px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.ex-list .list-row:last-child{border-bottom:none}
.auth-consent{margin:14px 0 0;font-size:12px;line-height:1.5;color:var(--muted);text-align:center}
.auth-consent a,.auth-legal a{color:var(--accent-text);text-decoration:none;font-weight:600}
.auth-consent a:hover,.auth-legal a:hover{text-decoration:underline}
.auth-legal{margin:18px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}
/* Ajakan membuktikan alamat email. Sengaja memakai nada aksen, bukan merah:
   ini pekerjaan yang belum selesai, bukan kesalahan yang dilakukan orangnya. */
.vf-banner{display:flex;align-items:flex-start;gap:11px;width:100%;margin-bottom:14px;padding:12px 14px;
  border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  background:var(--accent-weak);color:var(--accent-text);flex-wrap:wrap}
.vf-banner>svg{flex:none;margin-top:2px}
.vf-b{flex:1 1 190px;min-width:0;display:flex;flex-direction:column;gap:3px}
.vf-b b{font-size:14px;font-weight:700}
.vf-b span{font-size:12.5px;line-height:1.45;opacity:.92}
.vf-resend{flex:none;white-space:nowrap;align-self:center}
.vf-resend[disabled]{opacity:.6;cursor:default}
.pay-banner.locked{background:linear-gradient(180deg,#fef2f2,#fff5f5);border-color:#c0392b55;color:#991b1b}
.pay-banner.locked .pay-banner-ic{background:#c0392b1f;color:#c0392b}
.pay-banner.locked .pay-banner-b span{color:#b45309}
.pay-banner.locked>svg{color:#c0392b}
.pay-banner.trial{background:linear-gradient(180deg,var(--accent-weak),#f5f3ff);border-color:var(--accent)55;color:#3730a3}
.pay-banner.trial .pay-banner-ic{background:var(--accent)1f;color:var(--accent)}
.pay-banner.trial .pay-banner-b span{color:#5b53c7}
.pay-banner.trial>svg{color:var(--accent)}
:root[data-theme="dark"] .pay-banner.locked{background:linear-gradient(180deg,#2b1414,#231010);border-color:#c0392b66;color:#fca5a5}
:root[data-theme="dark"] .pay-banner.locked .pay-banner-b span{color:#e8a08f}
:root[data-theme="dark"] .pay-banner.trial{background:linear-gradient(180deg,#1e1b3a,#191733);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:#ffd9cf}
:root[data-theme="dark"] .pay-banner.trial .pay-banner-b span{color:#a5b4fc}
/* Visible only to screen readers — announces state without showing text on screen */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Loading skeleton — shown the moment a screen is opened, before its data lands */
.sk-wrap{padding:14px 16px;display:flex;flex-direction:column;gap:16px}
.sk-row{display:flex;align-items:center;gap:12px}
.sk-ava{width:42px;height:42px;border-radius:12px;flex:none;background:var(--surface-2)}
.sk-lines{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.sk-l{height:11px;border-radius:6px;background:var(--surface-2);display:block}
.sk-l.w1{width:52%}
.sk-l.w2{width:78%}
.sk-ava,.sk-l{position:relative;overflow:hidden}
.sk-ava::after,.sk-l::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:skshine 1.25s infinite}
:root[data-theme="dark"] .sk-ava::after,:root[data-theme="dark"] .sk-l::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)}
@keyframes skshine{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.sk-ava::after,.sk-l::after{animation:none}}
/* Printable invoice */
.bl-inv-btn{display:inline-flex;align-items:center;gap:6px;margin-top:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:12.5px;font-weight:650;padding:7px 12px;border-radius:9px;cursor:pointer;transition:border-color .15s,background .15s}
.bl-inv-btn:hover{border-color:var(--accent);background:var(--accent-weak);color:var(--accent-text)}
.inv-wrap{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px 14px 96px;overflow:auto;overscroll-behavior:contain}
.inv-sheet{width:100%;max-width:640px;background:#fff;color:#1a1a1a;border-radius:12px;padding:34px 34px 28px;box-shadow:0 18px 50px #00000040;font-size:13.5px;line-height:1.5}
.inv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:18px;border-bottom:2px solid #1a1a1a}
.inv-issuer{font-size:18px;font-weight:750}
.inv-issuer-i{margin-top:4px;font-size:12px;color:#555;white-space:pre-wrap;line-height:1.45}
.inv-title{text-align:right;font-size:20px;font-weight:750;letter-spacing:.08em}
.inv-no{margin-top:3px;font-size:11.5px;font-weight:600;letter-spacing:0;color:#555}
.inv-meta{display:flex;flex-wrap:wrap;gap:22px;margin:18px 0 20px}
.inv-meta span{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#777}
.inv-meta b{font-size:13.5px;font-weight:650}
.inv-tbl{width:100%;border-collapse:collapse}
.inv-tbl th{text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#777;padding:0 0 8px;border-bottom:1px solid #ddd}
.inv-tbl td{padding:14px 0;vertical-align:top;border-bottom:1px solid #eee}
.inv-tbl .r{text-align:right;white-space:nowrap}
.inv-sub{display:block;margin-top:3px;font-size:11.5px;color:#666}
.inv-tbl tfoot td{border-bottom:none;border-top:2px solid #1a1a1a;font-size:16px;font-weight:750;padding-top:12px}
.inv-status{display:inline-block;margin-top:18px;padding:5px 14px;border-radius:6px;font-size:12px;font-weight:750;letter-spacing:.08em}
.inv-status.ok{color:#177245;background:#17724518;border:1px solid #17724555}
.inv-status.due{color:#c0392b;background:#c0392b12;border:1px solid #c0392b55}
.inv-payto{margin-top:14px;padding:11px 13px;border-radius:8px;background:#f6f6f8;font-size:12.5px;white-space:pre-wrap;line-height:1.5}
.inv-payto span{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#777;margin-bottom:3px}
.inv-foot{margin-top:22px;padding-top:14px;border-top:1px solid #eee;font-size:11px;color:#888;font-style:italic}
.inv-actions{position:fixed;left:0;right:0;bottom:0;display:flex;gap:10px;justify-content:center;padding:14px 14px calc(14px + var(--sab));background:var(--surface);border-top:1px solid var(--line)}
@media print{
  body *{visibility:hidden!important}
  .inv-sheet,.inv-sheet *{visibility:visible!important}
  .inv-wrap{position:static;padding:0;overflow:visible}
  .inv-sheet{position:absolute;left:0;top:0;max-width:none;box-shadow:none;border-radius:0;padding:0;margin:0}
  .inv-backdrop,.inv-actions{display:none!important}
  @page{margin:16mm}
}
.srv-bar.q-ok span{background:#177245}
.srv-bar.q-warn span{background:#f59e0b}
.srv-bar.q-bad span{background:#c0392b}
.q-note{display:flex;align-items:flex-start;gap:7px;margin-top:10px;font-size:12.5px;line-height:1.45}
.q-note.warn{color:#b45309}
.q-note.bad{color:#c0392b}
.q-note svg{flex:none;margin-top:1px}
:root[data-theme="dark"] .q-note.warn{color:#fbbf24}
:root[data-theme="dark"] .q-note.bad{color:#f87171}
/* Base theming for EVERY form control.
   Written with :where() so it carries zero specificity: any existing rule still wins,
   but a newly added field can never fall back to the browser default (white box on a
   dark background). This closes the whole class of bug rather than one field. */
:where(.app input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range])),
:where(.app textarea),
:where(.app select){
  /* background-color, bukan shorthand: aturan dropdown bersama di bawah memasang
     background-image untuk panahnya, dan shorthand di sini akan mengosongkannya. */
  background-color:var(--surface);color:var(--text);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;font:inherit;font-size:14px;outline:none;
}
:where(.app input::placeholder),:where(.app textarea::placeholder){color:var(--muted);opacity:1}
/* Long lists: skip painting rows that are off-screen. The browser reserves the space
   but does no layout/paint work for them, so a list of thousands scrolls as smoothly as
   a list of ten. contain-intrinsic-size keeps the scrollbar honest while they're skipped. */
.cl-entry,.fb-card,.list-row,.att-rec,.bl-pay-row,.act-row,.dev-row,.msg-row{
  content-visibility:auto;
}
.cl-entry{contain-intrinsic-size:auto 180px}
.fb-card{contain-intrinsic-size:auto 120px}
.list-row,.bl-pay-row,.dev-row{contain-intrinsic-size:auto 64px}
.att-rec{contain-intrinsic-size:auto 96px}
.act-row{contain-intrinsic-size:auto 56px}
/* Jump back to the newest item (screens where newest sits at the top). */
.col-body,.m-pane{position:relative}
.jump-top{position:fixed;right:20px;bottom:calc(84px + var(--sab));z-index:60;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--accent-text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 6px 18px #0000002e;opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .18s,transform .18s}
.jump-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
@media(min-width:900px){.jump-top{bottom:28px}}
.jump-top:hover{background:var(--accent-weak);border-color:var(--accent)}
/* Collapsed "shipped from your feedback" block */
.cl-shipped>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.cl-shipped>summary::-webkit-details-marker{display:none}
.cl-shipped>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .18s}
.cl-shipped[open]>summary::after{transform:rotate(-135deg)}
.cl-count{font-size:11px;font-weight:700;color:var(--accent-text);background:var(--accent-weak);
  padding:2px 8px;border-radius:20px}
/* In-app legal documents */
.lg-tabs{display:flex;gap:6px;margin:4px 0 18px;background:var(--surface-2);padding:4px;border-radius:11px}
.lg-tab{flex:1;border:none;background:none;color:var(--muted);font-size:13px;font-weight:650;padding:9px 6px;border-radius:8px;cursor:pointer;transition:background .15s,color .15s}
.lg-tab.on{background:var(--surface);color:var(--accent-text);box-shadow:0 1px 3px #0000001f}
.lg-body{font-size:14.5px;line-height:1.65;color:var(--text)}
.lg-body h2{font-size:17px;margin:26px 0 8px;padding-top:14px;border-top:1px solid var(--line)}
.lg-body h2:first-child{border-top:none;padding-top:0;margin-top:4px}
.lg-body h3{font-size:15px;margin:18px 0 6px}
.lg-body p{margin:9px 0}
.lg-body ul,.lg-body ol{padding-left:20px;margin:9px 0}
.lg-body li{margin:5px 0}
.lg-body code{background:var(--accent-weak);color:var(--accent-text);padding:1px 6px;border-radius:5px;font-size:.9em}
.lg-tbl{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px}
.lg-tbl th,.lg-tbl td{text-align:left;padding:8px 9px;border-bottom:1px solid var(--line);vertical-align:top}
.lg-tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.q-set{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.q-set .bl-field{margin-bottom:8px}
.q-set .bl-field input{width:110px}
.q-commit{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.5}
.q-commit b{color:var(--text)}
.q-commit.bad{color:#c0392b}
.q-commit.bad b{color:#c0392b}
:root[data-theme="dark"] .q-commit.bad,:root[data-theme="dark"] .q-commit.bad b{color:#f87171}
/* Where to transfer */
.bl-payto-box{margin-top:12px;padding:11px 13px;border-radius:11px;background:var(--accent-weak);border:1px solid var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.bl-payto-h{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--accent-text)}
.bl-payto-v{margin-top:5px;font-size:14px;font-weight:600;color:var(--text);white-space:pre-wrap;word-break:break-word;line-height:1.45}
.bl-payto-copy{display:inline-flex;align-items:center;gap:5px;margin-top:8px;border:none;background:none;padding:0;font-size:12px;font-weight:650;color:var(--accent-text);cursor:pointer}
.bl-payto-copy:hover{text-decoration:underline}
.bl-payto{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:14px;font-family:inherit;outline:none;background:var(--surface);color:var(--text);resize:vertical}
.bl-payto:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
/* Developer income summary */
.bl-money{display:flex;gap:8px;margin-bottom:10px}
.bl-money-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;padding:10px 11px;border-radius:11px;border:1px solid var(--line)}
.bl-money-l{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.bl-money-v{font-size:16px;font-weight:750;color:var(--text);line-height:1.25}
.bl-money-s{font-size:11px;color:var(--muted)}
.bl-money-c.ok{background:#17724514;border-color:#17724533}
.bl-money-c.ok .bl-money-v{color:#177245}
.bl-money-c.wait{background:#f59e0b14;border-color:#f59e0b33}
.bl-money-c.wait .bl-money-v{color:#b45309}
.bl-money-c.due{background:#c0392b14;border-color:#c0392b33}
.bl-money-c.due .bl-money-v{color:#c0392b}
:root[data-theme="dark"] .bl-money-c.ok .bl-money-v{color:#4ade80}
:root[data-theme="dark"] .bl-money-c.wait .bl-money-v{color:#fbbf24}
:root[data-theme="dark"] .bl-money-c.due .bl-money-v{color:#f87171}
.bl-badge.unpaid{color:#c0392b;background:#c0392b1a}
.bl-pay-ini{width:44px;height:44px;flex:none;border-radius:11px;background:var(--surface-2);color:var(--muted);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
@media(max-width:520px){.bl-money{flex-direction:column}}
/* VPS storage health */
.srv-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:14px}
.srv-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px}
.srv-bar{height:10px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.srv-bar span{display:block;height:100%;border-radius:6px;background:#177245;transition:width .4s}
.srv-card.warn .srv-bar span{background:#f59e0b}
.srv-card.bad .srv-bar span{background:#c0392b}
.srv-nums{font-size:13px;color:var(--muted);margin-top:8px}
.srv-nums b{color:var(--text)}
.srv-grid{display:flex;gap:8px;margin-top:12px}
.srv-grid>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;padding:9px 10px;border-radius:10px;background:var(--surface-2)}
.srv-grid span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;font-weight:700}
.srv-grid b{font-size:14px;color:var(--text)}
.srv-spark{display:block;width:100%;height:44px;margin-top:12px;color:var(--accent);opacity:.85}
.srv-advice{display:flex;align-items:flex-start;gap:7px;margin-top:12px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.srv-advice svg{flex:none;margin-top:1px}
.srv-card.warn .srv-advice{color:#b45309}
.srv-card.bad .srv-advice{color:#c0392b}
:root[data-theme="dark"] .srv-card.warn .srv-advice{color:#fbbf24}
:root[data-theme="dark"] .srv-card.bad .srv-advice{color:#f87171}
.bl-pay-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.bl-pay-b{flex:1;min-width:0;display:flex;flex-direction:column}
.bl-pay-amt{font-size:12.5px;color:var(--muted)}
.bl-rev-actions{display:flex;gap:6px;flex:none}
.mic-btn:hover{background:var(--surface-2);color:var(--accent)}
.rec-bar{display:flex;align-items:center;gap:12px;padding:8px 12px}
.rec-cancel{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--danger);background:none;border:none;cursor:pointer;flex:none}
.rec-cancel:hover{background:var(--surface-2)}
.rec-dot{width:11px;height:11px;border-radius:50%;background:var(--danger);flex:none;animation:recPulse 1s ease-in-out infinite}
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.25}}
.rec-time{font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;min-width:44px}
.rec-hint{flex:1;font-size:13px;color:var(--muted)}
.rec-send{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border:none;cursor:pointer;flex:none;box-shadow:0 1px 3px rgba(201,58,34,.4)}
.voice-msg{display:flex;align-items:center;gap:10px;min-width:190px;padding:3px 2px}
.voice-play{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border:none;cursor:pointer;flex:none}
.bubble.me .voice-play{background:#fff;color:var(--accent)}
.voice-wave{flex:1;height:4px;border-radius:3px;background:var(--line);position:relative;overflow:hidden}
.bubble.me .voice-wave{background:rgba(255,255,255,.4)}
.voice-prog{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);border-radius:3px}
.bubble.me .voice-prog{background:#fff}
.voice-time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none;min-width:30px}
.bubble.me .voice-time{color:rgba(255,255,255,.85)}
.conv-row{display:flex;align-items:center;position:relative;border-bottom:1px solid var(--line)}
.conv-row:hover{background:var(--surface-2)}
.conv-row.active{background:var(--accent-weak)}
.conv-open{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:11px 14px;background:none;border:none;text-align:left;cursor:pointer;color:inherit;font:inherit}
.conv-menu-btn{opacity:0;flex:none;width:32px;height:32px;margin-right:8px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:none;border:none;cursor:pointer;transition:opacity .12s}
.conv-row:hover .conv-menu-btn{opacity:.7}
.conv-menu-btn:hover{opacity:1;background:var(--surface)}
@media (hover:none){.conv-menu-btn{opacity:.5}}
.conv-ic{display:inline-flex;color:var(--muted);margin-right:4px}
.conv-ic svg{opacity:.7}
.unread-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.badge.muted{background:var(--muted)}
.lr-time{font-size:12px;color:var(--faint)}
.conv-row.unread .lr-title{font-weight:700}
.arch-header{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;border:none;border-bottom:1px solid var(--line);background:none;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer}
.arch-header:hover{background:var(--surface-2)}
.arch-header>span{flex:1;text-align:left}
.typing-row{padding:2px 4px 8px}
.typing-bubble{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:9px 13px}
.typing-name{font-size:12px;font-weight:600;color:var(--muted)}
.typing-dots{display:inline-flex;gap:4px}
.typing-dots i{width:7px;height:7px;border-radius:50%;background:var(--faint);display:inline-block;animation:typingBounce 1.2s infinite}
.typing-dots i:nth-child(2){animation-delay:.2s}
.typing-dots i:nth-child(3){animation-delay:.4s}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.chat-title{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.25;min-width:0}
.ct-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-status{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pres-online{color:#12b76a;font-weight:600}
.ava-online{position:relative;display:inline-flex;flex:none}
.online-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#12b76a;border:2px solid var(--surface)}
.msg-tick{display:inline-flex;vertical-align:middle;margin-left:3px;color:var(--faint)}
.bubble.me .msg-tick{color:rgba(255,255,255,.72)}
.bubble.me .msg-tick.read{color:#8fd7ff}
.msg-tick svg{margin-top:-1px}
.mi-modal{width:340px}
.mi-body{max-height:min(50vh,340px);overflow-y:auto;margin-top:6px}
.mi-sec{margin-top:10px}
.mi-label{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-bottom:6px}
.mi-label svg{color:var(--muted)}
.mi-label.mi-read svg{color:#0a7ea4}
.mi-row{display:flex;align-items:center;gap:10px;padding:6px 4px}
.mi-name{font-size:14px}
.mi-empty{padding:20px;text-align:center;color:var(--muted)}
.disap-banner{display:flex;align-items:center;gap:8px;padding:7px 14px;background:var(--accent-weak);color:var(--accent-text);font-size:12.5px;font-weight:500;border-bottom:1px solid var(--line)}
.disap-banner svg{flex:none}
.mm-title{padding:8px 14px 4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.mm-gap{display:inline-block;width:17px;flex:none}
.icon-btn.chat-info.on{color:var(--accent)}
.bubble.them{background:var(--surface-2);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:5px}
.bubble.me{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 84%,#fff),var(--accent));color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
.bubble .bt{display:block;font-size:10px;opacity:.6;margin-top:3px}
.bubble.grouped{margin-top:-6px}
.mrow{display:flex;align-items:flex-end;gap:8px;align-self:flex-start;max-width:82%}
.mrow .bubble{max-width:100%}
.mrow.grouped{margin-top:-6px}
.mrow .bubble.grouped{margin-top:0}
.mrow-ava,.mrow-sp{width:28px;flex:none}
.msg-link{color:#fff;text-decoration:underline;text-underline-offset:2px}
.bubble.them .msg-link{color:var(--accent-text)}
.bubble .att-img,.bubble .att-file{margin-top:6px}
.day-sep{text-align:center;margin:12px 0 4px}
.day-chip{display:inline-block;background:var(--surface-2);color:var(--muted);font:inherit;font-size:11px;font-weight:600;padding:3px 12px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:border-color .12s,color .12s}
.day-chip:hover{border-color:var(--line);color:var(--text)}
.unread-sep{display:flex;align-items:center;gap:10px;margin:10px 2px 4px;color:var(--accent-text);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.unread-sep::before,.unread-sep::after{content:"";flex:1;height:1px;background:var(--accent);opacity:.5}
.jump-latest{position:fixed;right:18px;bottom:calc(82px + var(--sab));z-index:20;width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--line);box-shadow:0 4px 16px rgba(0,0,0,.18);color:var(--accent-text);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .18s,transform .18s}
.jump-latest.show{opacity:1;transform:none;pointer-events:auto}
.jump-latest:hover{background:var(--surface-2)}
.composer{position:relative;display:flex;gap:8px;align-items:flex-end;width:100%}   /* jangkar untuk .co-count */
.composer textarea,.composer input{flex:1;min-width:0;border:1px solid var(--line);border-radius:20px;padding:9px 15px;font-size:14px;line-height:1.4;outline:none;font-family:inherit;background:var(--surface);color:var(--text)}
/* min-height pins the empty box to exactly one line (14px × 1.4 + 18px padding
   + 2px border = 40px). Without it the box is sized by rows="1" alone, so if the
   placeholder ever wraps the second line is drawn outside the box and clipped. */
.composer textarea{resize:none;min-height:40px;max-height:120px;overflow-y:auto}
.composer textarea:focus,.composer input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.attach-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;border-radius:50%;color:var(--muted);background:none;border:none;cursor:pointer}
.attach-btn:hover{color:var(--accent-text);background:var(--surface-2)}
/* chat header kebab menu (top-right) + composer attach sheet (bottom-left) */
.chat-menu{top:calc(var(--topbar-total) + 6px);right:10px;left:auto;min-width:210px;width:max-content}
.attach-sheet{min-width:200px;width:max-content}   /* posisinya diatur positionPopMenu() */
.send{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.send:hover{background:var(--accent-text)}
.send:disabled{opacity:.5}

/* ---------- detail generic ---------- */
.detail-pad{padding:22px;max-width:760px}
.detail-pad h1{font-size:22px;font-weight:700;margin-bottom:14px;line-height:1.25}
.meta-row{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;margin-bottom:10px}
.meta-row.overdue{color:var(--due-late);font-weight:500}
.meta-row.due-today{color:var(--due-today);font-weight:500}
.progress{height:7px;border-radius:5px;background:var(--line);overflow:hidden;margin:14px 0 20px}
.progress>i{display:block;height:100%;background:var(--accent)}
/* padding:0 16px lines the label up with .list-row, which is padded 13px 16px.
   Without it the label sat flush against the edge while every row beside it was
   indented — the misalignment is what read as "cramped", more than the gap did.
   Inside .detail-pad the container is already padded 22px, so it resets to 0
   rather than indenting twice. */
.section-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);margin:24px 0 12px;padding:0 16px}
.detail-pad .section-label{padding:0}
/* First label in a scroll pane has no row above it to breathe away from. */
.col-body > .section-label:first-child,.m-pane > .section-label:first-child{margin-top:16px}
.sub-item{display:flex;align-items:center;gap:6px}
.sub-toggle{flex:1;min-width:0;display:flex;align-items:center;gap:11px;padding:9px 0;font-size:14px;cursor:pointer;background:none;border:none;text-align:left;color:inherit}
.sub-del{opacity:0;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:5px;border-radius:6px;background:none;border:none;color:var(--muted);cursor:pointer;transition:opacity .15s ease,color .15s ease}
.sub-item:hover .sub-del{opacity:.6}
.sub-del:hover,.sub-del:focus-visible{opacity:1;color:var(--danger)}
@media (hover:none){.sub-del{opacity:.5}}
.check{width:20px;height:20px;border-radius:6px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.check.done{background:var(--accent);border-color:var(--accent)}
.sub-item.done .lbl{color:var(--faint);text-decoration:line-through}
.task-actions{display:flex;gap:8px;margin:16px 0 4px}
.task-done-btn{flex:1;justify-content:center;gap:6px}
.task-icon-btn{flex:none}
.prio-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle;flex:none}
.prio-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:3px 11px 3px 9px;border-radius:999px}
.prio-chip .prio-dot{margin-right:0}
.sort-lbl{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);flex:none}

/* ---------- calendar ---------- */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-dow{text-align:center;font-size:12px;color:var(--faint);padding:10px 0;font-weight:600}
.cal-cell{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:14px;cursor:pointer;border-radius:10px;margin:2px;transition:background .12s}
.cal-cell:hover{background:var(--surface-2)}
.cal-cell.today{background:var(--accent);color:#fff;font-weight:600}
.cal-cell.active{outline:2px solid var(--accent)}
.cal-cell.blank{cursor:default}
.cal-dots{display:flex;gap:3px;align-items:center;height:5px}
.cal-dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.cal-dot.task{background:#e8a13c}
.cal-cell.today .cal-dot{background:#fff}
.cal-cell.today .cal-dot.task{background:#fff;opacity:.6}
.cal-task{width:100%;display:flex;align-items:center;gap:11px;padding:12px 16px 12px 13px;border:none;border-bottom:1px solid var(--line);border-left:3px solid #e8a13c;background:none;cursor:pointer;text-align:left;font:inherit}
.cal-task:hover{background:var(--surface-2)}
.cal-task .ct-title{flex:1;font-size:14px;color:var(--text)}
.cal-task .ct-title.done{color:var(--faint);text-decoration:line-through}
.cal-legend{display:flex;align-items:center;gap:6px;justify-content:center;font-size:11px;color:var(--faint);padding:2px 0 12px}
.cal-legend .cl-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.cal-legend .cl-dot.tk{background:#e8a13c;margin-left:12px}
.ev-row{display:flex;gap:14px;padding:14px 16px 14px 13px;border-bottom:1px solid var(--line);border-left:3px solid var(--accent)}
.ev-actions{display:flex;gap:2px;flex:none;align-items:flex-start}
.ev-time{font-size:13px;font-weight:600;color:var(--accent-text);width:52px;flex-shrink:0}
.ev-main{flex:1;min-width:0}
.ev-title{font-size:14px;font-weight:600}
.ev-loc{font-size:12px;color:var(--muted);margin-top:1px}
.ev-att{display:flex;align-items:center;gap:8px;margin-top:9px}
.ev-avs{display:flex}
.ev-avs .avatar{margin-left:-7px;box-shadow:0 0 0 2px var(--surface)}
.ev-avs .avatar:first-child{margin-left:0}
.ev-att-txt{font-size:12px;color:var(--muted)}
.rsvp{display:flex;gap:8px;margin-top:10px}
.rsvp-btn{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:5px 12px;border-radius:8px;border:1px solid var(--line);color:var(--muted);background:var(--surface)}
.rsvp-btn.yes{background:var(--good);border-color:var(--good);color:#fff}
.rsvp-btn.no{background:var(--danger);border-color:var(--danger);color:#fff}

/* ---------- forms ---------- */
.form{padding:22px;max-width:460px}
.form h1{font-size:20px;font-weight:700;margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;outline:none;background-color:var(--surface)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.field textarea{resize:vertical;min-height:80px}
.field select{background-color:var(--surface)}   /* panahnya dari aturan bersama di atas */
.field input:-webkit-autofill,.field input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 40px var(--surface) inset;-webkit-text-fill-color:var(--text);caret-color:var(--text)}
/* Dua ruas berdampingan — TAPI hanya kalau kolomnya memang cukup lebar.
   Kolom di aplikasi ini selebar ponsel (360–460px), dan .form memakan 44px untuk padding.
   Jadi ruang isinya sekitar 316px pada kolom tersempit; dibagi dua tinggal 152px per ruas.
   Pemilih prioritas butuh sekitar 240px untuk memuat tiga pilihannya, jadi ia meluber —
   itulah "High" yang terpotong jadi "Hig".

   Yang membuatnya meluber, bukan menyusut, adalah aturan bawaan flexbox: anak flex punya
   min-width:auto, artinya ia MENOLAK mengecil di bawah lebar isinya. flex:1 terlihat seperti
   izin untuk menyusut, padahal bukan. Dua hal diperbaiki sekaligus di sini:
     • flex-basis 240px + flex-wrap  -> menumpuk sendiri kalau tidak muat berdampingan
     • min-width:0                   -> kalaupun berdampingan, ia menyusut, tidak meluber */
/* Keterangan kecil di bawah sebuah medan. Menjelaskan syarat yang tidak kelihatan —
   misalnya pengingat yang butuh tenggat — sebelum orang menemukannya lewat kekecewaan. */
.f-hint{margin-top:6px;font-size:11.5px;line-height:1.45;color:var(--faint)}
/* ---- cuti / izin ---- */
.lv-card{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:12px 13px;margin-bottom:9px}
.lv-top{display:flex;align-items:flex-start;gap:10px}
.lv-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lv-h{font-size:14px;font-weight:600;color:var(--text)}
.lv-when{font-size:12.5px;color:var(--muted)}
.lv-reason{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:3px}
.lv-by{font-size:11.5px;color:var(--faint);margin-top:4px;line-height:1.45}
.lv-badge{flex:none;align-self:flex-start;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
/* Menunggu = amber, disetujui = hijau, ditolak = merah aksen, ditarik = kelabu.
   Ditarik sengaja TIDAK merah: membatalkan pengajuan sendiri bukan penolakan, dan
   mewarnainya seperti kegagalan membuat orang enggan menariknya saat rencananya berubah. */
.lv-pending{background:color-mix(in srgb,var(--due-today) 16%,transparent);color:var(--due-today)}
.lv-approved{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}
.lv-declined{background:var(--accent-weak);color:var(--accent-text)}
.lv-cancelled{background:var(--surface-2);color:var(--faint)}
.lv-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:10px}
/* Penanda cuti di laporan absensi — hari yang berketerangan, bukan hari kosong. */
.att-leave{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:2px 9px;border-radius:20px;background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
/* Cuti di kalender: baris yang lebih tenang dari acara sungguhan. Ia keterangan, bukan
   janji temu — dan tidak punya tombol apa pun, jadi tidak boleh tampil seolah bisa ditekan. */
.ev-leave{border-left-color:var(--good);opacity:.92}
.ev-leave .ev-time{display:flex;align-items:center;justify-content:center;color:var(--good)}
.ev-leave .ev-title{font-weight:600}
/* Penanda acara berulang, di sebelah judulnya. */
.ev-recur{display:inline-flex;margin-left:6px;color:var(--faint);vertical-align:middle}
/* ---- kartu "apa yang sedang dikerjakan" di profil kontak ---- */
.wk-card{margin:0 0 14px;padding:12px 13px;border-radius:13px;background:var(--surface-2);border:1px solid var(--line)}
.wk-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.wk-pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap}
.wk-in{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}
.wk-leave{background:color-mix(in srgb,var(--due-today) 16%,transparent);color:var(--due-today)}
/* "Belum absen" memakai kelabu biasa, BUKAN merah. Ia keterangan, bukan tuduhan —
   orangnya bisa saja sedang di jalan, atau memang tidak memakai absensi. */
.wk-out{background:var(--surface);color:var(--muted);border:1px solid var(--line)}
.wk-count{font-size:12px;color:var(--muted);white-space:nowrap}
.wk-tasks{display:flex;flex-direction:column;gap:2px}
.wk-task{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 9px;border-radius:9px;
  background:none;border:none;cursor:pointer;font:inherit;color:var(--text)}
.wk-task:hover{background:var(--surface)}
.wk-task-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.wk-task-d{flex:none;font-size:11.5px;font-weight:600}
.wk-more{font-size:12px;color:var(--muted);padding:6px 9px 0}
.wk-none{font-size:13px;color:var(--muted);padding:2px 2px 4px}
/* Asal-usul tugas: dari percakapan mana ia lahir. Dibuat seperti baris yang bisa diketuk,
   bukan sekadar keterangan — karena memang membawa orang ke tempat lain. */
.task-origin{display:flex;align-items:center;gap:8px;width:100%;margin:2px 0 4px;padding:9px 11px;
  border-radius:10px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--muted);font-size:12.5px;font:inherit;font-size:12.5px;cursor:pointer;text-align:left}
.task-origin:hover{background:var(--surface);border-color:var(--accent)}
.task-origin>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-origin>svg{flex:none;color:var(--faint)}
/* "Siapa yang tidak ada hari ini" di beranda. Nadanya tenang — ini keterangan, bukan
   peringatan, jadi ia tidak boleh berebut perhatian dengan banner tagihan di dekatnya. */
.away-card{display:flex;align-items:center;gap:11px;width:100%;text-align:left;margin-bottom:14px;
  padding:11px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--text);cursor:pointer;font:inherit;transition:background .12s}
.away-card:hover{background:var(--surface)}
.away-ic{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:10px;background:color-mix(in srgb,var(--due-today) 15%,transparent);color:var(--due-today)}
.away-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.away-t{font-size:13px;font-weight:700}
.away-n{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.away-card>svg{flex:none;color:var(--faint)}
/* ---- catatan aktivitas ---- */
.ac-row{display:flex;align-items:flex-start;gap:11px;padding:10px 2px;border-bottom:1px solid var(--line)}
.ac-row:last-child{border-bottom:none}
.ac-ic{flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;
  background:var(--surface-2);color:var(--muted)}
.ac-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ac-t{font-size:13.5px;color:var(--text)}
.ac-s{font-size:12.5px;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}
/* Jam ditaruh di kanan dan tenang: yang dicari orang adalah APA yang berubah, jamnya
   cuma penunjuk saat ia sudah menemukan barisnya. */
.ac-time{flex:none;font-size:11.5px;color:var(--faint);padding-top:2px}
/* Centang yang berdiri sendiri di dalam .field, bukan bagian dari .chk-list.
   Dibentuk seperti medan isian lain — berbingkai, setinggi tombol pemilih tanggal — supaya
   ia terbaca sebagai bagian dari formulir, bukan tempelan yang lepas dari bahasanya.

   Ukuran kotak centangnya ditulis di sini juga. Aturan ukuran yang ada sebelumnya melekat
   pada `.chk-list .chk input`, jadi centang di luar daftar mewarisi ukuran bawaan peramban
   — kecil, kelabu, dan berbeda dari semua centang lain di aplikasi. */
/* Pemilihnya `.field label.chk-inline`, bukan `.chk-inline` saja. Ini BUKAN gaya-gayaan:
   di dalam .field sudah ada aturan `.field label` yang menjadikan label kecil, kelabu, dan
   display:block — dan spesifisitasnya (0,1,1) MENGALAHKAN satu kelas (0,1,0).
   Akibatnya display:flex-nya diabaikan diam-diam: kotak centangnya menempel ke tulisan dan
   seluruh barisnya terlihat seperti kesalahan. Ketahuan dengan membuka demo, bukan dengan
   membaca — dan itu pelajarannya. */
.field label.chk-inline{display:flex;align-items:center;gap:11px;width:100%;cursor:pointer;
  font-size:14px;font-weight:500;color:var(--text);margin-bottom:0;text-transform:none;letter-spacing:normal;
  padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);
  transition:border-color .12s,background .12s}
.field label.chk-inline:hover{background:var(--surface-2)}
.field label.chk-inline input{flex:none;width:17px;height:17px;accent-color:var(--accent);margin:0}
/* Saat tercentang, bingkainya ikut menyala — status yang terbaca sekilas tanpa
   perlu memeriksa kotak kecilnya. */
.field label.chk-inline:has(input:checked){border-color:var(--accent);background:var(--accent-weak)}
.row2{display:flex;flex-wrap:wrap;gap:12px}
.row2>*{flex:1 1 240px;min-width:0}
.chk-list{display:flex;flex-direction:column;gap:2px;max-height:190px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:6px}
.chk-list .chk{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:400;color:var(--text);margin-bottom:0}
.chk-list .chk:hover{background:var(--surface-2)}
.chk-list .chk input{width:16px;height:16px;accent-color:var(--accent);flex-shrink:0}
.chk-name{flex:1;min-width:0}
.form-error{background:#fef2f2;color:var(--danger);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:14px}

/* ---------- tools in taskbar ---------- */
.chip{padding:7px 13px;border-radius:999px;font-size:13px;font-weight:500;border:1px solid var(--line);color:var(--muted);background:var(--surface)}
.chip.on{background:var(--accent-weak);color:var(--accent-text);border-color:transparent}
.spacer{flex:1}
.cal-nav{display:flex;align-items:center;gap:6px}
.cal-nav b{font-size:14px;font-weight:600;min-width:120px;text-align:center}

/* ---------- account ---------- */
.profile-head{padding:24px 16px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.kv{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv span:first-child{color:var(--muted)}
.kv span:last-child{font-weight:500}
.cl-entry{padding:16px 0;border-bottom:1px solid var(--line)}
.cl-entry:last-child{border-bottom:none}
.cl-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.cl-date{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--accent-text);background:var(--accent-weak);padding:3px 9px;border-radius:6px}
.cl-title{font-size:15px;font-weight:600}
.cl-list{list-style:none;display:flex;flex-direction:column;gap:7px}
.cl-list li{position:relative;padding-left:18px;font-size:14px;color:var(--muted);line-height:1.5}
.cl-list li::before{content:"";position:absolute;left:3px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* ---------- empty / loading ---------- */
.empty,.loading{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--faint);text-align:center;padding:20px}
.empty>svg{padding:15px;background:var(--accent-weak);color:var(--accent-text);border-radius:50%;box-sizing:content-box}
.empty-t{font-weight:600;color:var(--muted)}
.empty-s{font-size:13px;color:var(--faint);margin-top:-6px;max-width:280px;line-height:1.5}
.spinner{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- auth ---------- */
/* ============================================================
   HALAMAN MASUK
   ============================================================
   Layar pertama yang dilihat orang, dan satu-satunya yang dilihat orang yang BELUM
   percaya pada aplikasi ini. Jadi ia mengerjakan dua hal sekaligus: memudahkan masuk,
   dan terlihat seperti buatan orang yang serius.

   Latarnya dicat dengan dua sapuan pastel yang sangat lembut, bukan warna datar. Ini
   satu-satunya layar yang boleh begitu — di dalam aplikasi, latar yang ramai akan
   berkelahi dengan isinya. */
/* height:100% BUKAN cuma min-height — ini yang menentukan.
   #app tingginya var(--app-h) (menyusut saat papan ketik naik) dan overflow:hidden.
   Dengan min-height saja, .auth MELAR melewati kotak itu dan bagian bawahnya terpotong
   tanpa bisa digulir — menggulir .auth tidak menolong karena yang meluap adalah .auth
   itu sendiri, bukan isinya. Dengan height pasti, .auth persis sebesar kotaknya dan
   isinya yang menggulir di dalamnya.

   Dua hal lain yang dulu membuat isinya tertutup papan ketik di HP:
     overflow:hidden       — isi yang lebih tinggi dari layar dipotong, tanpa jalan menggulir
     align-items:center    — saat isinya lebih tinggi dari wadahnya, flexbox memotong
                             KEDUA ujungnya, dan bagian yang terpotong tidak bisa diraih
   Di tab "Buat akun" formulirnya panjang (nama, email, WhatsApp, tanggal lahir, kata
   sandi, tombol, persetujuan). Begitu papan ketik naik, sisa layarnya tinggal separuh
   dan tombol Buat akun-nya hilang begitu saja.

   Sekarang: bisa digulir, dan penengahannya lewat margin:auto pada anaknya — yang
   memusatkan kalau muat, tapi tidak pernah memotong kalau tidak muat. */
.auth{position:relative;height:100%;min-height:100%;display:flex;align-items:flex-start;justify-content:center;
  padding:24px 20px calc(24px + var(--sab));background:var(--bg);
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.auth::before,.auth::after{content:'';position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(70px);opacity:.5}
.auth::before{width:420px;height:420px;top:-150px;left:-130px;background:#c7d2fe}
.auth::after{width:380px;height:380px;bottom:-140px;right:-120px;background:#fbcfe8}
:root[data-theme="dark"] .auth::before{background:#3730a3;opacity:.32}
:root[data-theme="dark"] .auth::after{background:#831843;opacity:.28}

/* ---- liquid glass ----
   Kartunya kaca, bukan kertas: sapuan pastel di belakangnya terbaca samar menembusnya,
   dan warnanya ikut bergeser saat kartunya melintas di atas keduanya.

   Tiga lapis yang membuatnya terasa kaca, bukan sekadar transparan:
     1. backdrop-filter blur + saturate  — yang di belakang menjadi buram DAN lebih pekat;
                                           saturate itu yang membedakan kaca dari kabut
     2. inset highlight di tepi atas     — pantulan cahaya pada bibir kaca
     3. bayangan lebih dalam             — kaca melayang, kertas menempel

   background-color TETAP ADA di bawah backdrop-filter, dan itu disengaja: kalau peramban
   tidak mendukung backdrop-filter (Firefox lama, beberapa peramban dalam aplikasi),
   kartunya jatuh kembali menjadi permukaan padat yang tetap terbaca — bukan kotak
   tembus pandang berisi tulisan yang bertumpuk dengan latarnya.

   @supports memisahkan keduanya supaya kejatuhan itu benar-benar terjadi, bukan
   diandaikan. */
.auth-card{position:relative;width:100%;background:var(--surface);
  border:1px solid var(--line);border-radius:22px;padding:30px 26px 26px;
  box-shadow:0 1px 2px rgba(24,24,27,.04),0 12px 32px rgba(24,24,27,.07),0 32px 64px rgba(24,24,27,.05);
  animation:authIn .34s cubic-bezier(.2,.9,.3,1.05)}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .auth-card{
    background:color-mix(in srgb, var(--surface) 62%, transparent);
    -webkit-backdrop-filter:blur(26px) saturate(180%);
            backdrop-filter:blur(26px) saturate(180%);
    border-color:color-mix(in srgb, #fff 55%, transparent);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.65),
      0 2px 6px rgba(24,24,27,.05),
      0 18px 44px rgba(24,24,27,.10),
      0 40px 80px rgba(24,24,27,.07);
  }
  /* Di tema gelap, kacanya digelapkan bukan diputihkan — kaca yang diterangi di ruangan
     gelap terlihat seperti kertas yang menyala, dan itu justru merusak kesannya. */
  :root[data-theme="dark"] .auth-card{
    background:color-mix(in srgb, var(--surface) 55%, transparent);
    border-color:color-mix(in srgb, #fff 12%, transparent);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 18px 44px rgba(0,0,0,.45),
      0 40px 80px rgba(0,0,0,.35);
  }
  /* Sapuan latarnya dipekatkan sedikit — kaca perlu sesuatu untuk dibiaskan. Tanpa ini
     efeknya nyaris tak terlihat, karena yang diburamkan cuma warna datar. */
  .auth::before,.auth::after{opacity:.62;filter:blur(64px)}
  /* Rel tab ikut jadi kaca supaya kartunya tidak terlihat seperti dua bahan berbeda. */
  .auth-tabs{background:color-mix(in srgb, var(--surface-2) 55%, transparent);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
/* Sebagian orang menyalakan "kurangi transparansi" di setelan sistemnya, dan biasanya
   karena buram membuat mereka sulit membaca. Untuk mereka kacanya dipadatkan. */
@media (prefers-reduced-transparency: reduce) {
  .auth-card{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@keyframes authIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.auth-card{animation:none}}

/* ---- Susunan dua sisi ----
   Sengaja mobile-first: bawaannya menumpuk satu kolom, dan pitch-nya DI BAWAH kartu
   lewat order. Pengguna lama membuka layar ini tiap pagi; memaksa mereka menggulir
   melewati penjelasan produk yang sudah mereka tahu itu pajak harian.
   Sisi berdampingan baru muncul saat layarnya benar-benar cukup lebar. */
.auth-wrap{position:relative;width:100%;max-width:392px;display:flex;flex-direction:column;gap:22px;margin:auto 0}   /* auto = di tengah kalau muat, 0 kalau tidak — tanpa memotong */
.auth-pitch{order:2}
.auth-card{order:1}
.ap-brand{display:none}
.ap-head{font-size:17px;font-weight:700;line-height:1.35;letter-spacing:-.01em;margin:0 0 6px;text-align:center}
.ap-sub{font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 14px;text-align:center}
.ap-list{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:11px}
.ap-row{display:flex;align-items:center;gap:11px;font-size:13px;line-height:1.45;color:var(--text)}
.ap-row .menu-ico{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:10px}

@media (min-width:940px){
  .auth-wrap{max-width:880px;flex-direction:row;align-items:center;gap:56px}
  .auth-pitch{order:1;flex:1;min-width:0}
  .auth-card{order:2;flex:none;width:392px}
  .ap-brand{display:flex;justify-content:flex-start;margin-bottom:18px;font-size:19px}
  .ac-brand{display:none}          /* mereknya sudah ada di sisi kiri */
  .ap-head{font-size:26px;text-align:left;margin-bottom:9px}
  .ap-sub{font-size:14px;text-align:left;margin-bottom:22px}
  .ap-list{border-top:none;padding-top:0;gap:13px}
  .ap-row{font-size:13.5px}
}

.auth-card .brand{justify-content:center;margin-bottom:4px;font-size:19px}
.auth-sub{text-align:center;color:var(--muted);font-size:13.5px;margin-bottom:22px}

.auth-tabs{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:12px;padding:4px;margin-bottom:18px}
.auth-tabs button{flex:1;padding:9px 8px;border-radius:9px;font-size:13.5px;font-weight:600;
  color:var(--muted);transition:background .16s ease,color .16s ease,box-shadow .16s ease}
.auth-tabs button:hover{color:var(--text)}
.auth-tabs button.on{background:var(--surface);color:var(--accent-text);
  box-shadow:0 1px 2px rgba(24,24,27,.07),0 1px 1px rgba(24,24,27,.04)}

.auth .btn-primary{width:100%;justify-content:center;padding:12px;margin-top:6px;font-weight:650;
  transition:transform .12s ease,box-shadow .16s ease,background .16s ease}
.auth .btn-primary:hover{box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 34%,transparent)}
.auth .btn-primary:active{transform:translateY(1px)}

.auth-hint{text-align:center;font-size:12.5px;color:var(--faint);margin-top:15px;line-height:1.5}
.auth-link{color:var(--accent-text);font-size:13px;font-weight:600}
.auth-link:hover{text-decoration:underline}

/* ---- Kata sandi: tombol lihat/sembunyikan ----
   WCAG 2.2 (3.3.8) menyebut ini langsung: bisa melihat apa yang diketik menurunkan
   kegagalan masuk bagi orang yang kesulitan mengetik tepat, dan bagi siapa pun yang
   mengetik kata sandi panjang di papan ketik ponsel. */
.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap input{flex:1;min-width:0;padding-right:44px}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;
  align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;
  border:none;background:none;color:var(--faint);cursor:pointer;transition:color .15s ease,background .15s ease}
.pw-eye:hover{color:var(--muted);background:var(--surface-2)}

/* Peringatan Caps Lock. Sebab paling sering "kata sandi salah" padahal orangnya ingat
   benar — dan satu-satunya yang tidak bisa dilihatnya karena hurufnya tertutup titik. */
.caps-hint{display:none;align-items:center;gap:6px;margin:7px 2px 0;font-size:12px;
  font-weight:600;color:#b45309}
.caps-hint.on{display:flex}
:root[data-theme="dark"] .caps-hint{color:#fbbf24}

/* Galat muncul dengan gerakan kecil supaya tertangkap mata — tanpa itu, pesan yang
   menggantikan pesan lain di tempat yang sama mudah tidak disadari sudah berganti. */
.auth .form-error,.auth .form-ok{animation:authMsg .22s ease}
@keyframes authMsg{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.auth .form-error,.auth .form-ok{animation:none}}
.install-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:11px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:14px;font-weight:600;color:var(--text);transition:background .12s,transform .08s}
.install-btn:hover{background:var(--surface-2)}
.install-btn:active{transform:scale(.98)}
.install-btn svg{color:var(--accent-text)}
.form-ok{background:#ecfdf5;color:var(--good);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:14px}
:root[data-theme="dark"] .form-ok{background:rgba(22,163,74,.16)}

/* desktop taskbar inner width cap for chat composer */
@media(min-width:900px){
  .taskbar{padding:0 18px var(--sab)}
}

/* ---------- button/span layout fixes (a11y: interactive = <button>) ---------- */
.menu-row .t,.menu-row .s,.lr-title,.lr-sub{display:block}
.list-row,.menu-row,.cal-cell,.sub-toggle,.sub-del{font:inherit}

/* ---------- keyboard focus ---------- */
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ---------- toasts ---------- */
.toasts{position:fixed;left:50%;bottom:calc(22px + var(--sab));transform:translateX(-50%);z-index:500;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:#18181b;color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;line-height:1.4;box-shadow:0 6px 20px rgba(0,0,0,.22);animation:toastIn .2s ease;max-width:90vw}
.toast.error{background:var(--danger)}
.toast.success{background:var(--good)}
.toast.hide{opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- top loading bar ---------- */
.loadbar{position:fixed;top:var(--sat);left:0;right:0;height:3px;z-index:200;overflow:hidden;pointer-events:none}
.loadbar.on::after{content:"";position:absolute;top:0;height:100%;width:35%;background:var(--accent);border-radius:2px;animation:loadmove 1s infinite ease-in-out}
@keyframes loadmove{0%{left:-35%}50%{left:45%}100%{left:100%}}

/* ---------- boot screen ---------- */
.boot{height:100%;display:flex;align-items:center;justify-content:center}

/* ---------- thin scrollbars ---------- */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px;border:3px solid transparent;background-clip:padding-box;min-height:40px}
::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:padding-box}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent;-webkit-tap-highlight-color:transparent}

/* Memberi tahu peramban tema mana yang sedang dipakai.
   INI penyebab dropdown tampil putih menyilaukan di tema gelap. Daftar pilihan yang
   muncul saat sebuah <select> ditekan digambar oleh SISTEM, bukan oleh CSS kita — jadi
   berapa pun banyaknya latar gelap yang kita cat, tanpa baris ini peramban tetap
   menganggap halamannya terang dan menggambar daftarnya putih dengan tulisan hitam.
   Sekalian membetulkan batang gulir, kursor teks, dan tampilan isian otomatis. */
:where(#app select:focus){border-color:var(--accent)}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* ============================================================
   DROPDOWN — satu tampilan untuk seluruh aplikasi
   ============================================================
   Dulu ada TIGA gaya berbeda untuk kontrol yang sama: kontrol bawaan peramban di
   filter absensi, panah SVG di .field select, dan segitiga gradien di pilihan tanggal
   lahir. Ketiganya berdampingan di satu aplikasi.

   Dipakai #app, bukan .app: overlay digambar sebagai saudara .app, bukan anak-nya, jadi
   selector lama tidak pernah menyentuh dropdown di dalam overlay sama sekali. Itu sebab
   pilihan tanggal lahir dulu harus punya gayanya sendiri.

   Dibungkus :where() supaya kekhususannya nol — setiap aturan yang lebih spesifik tetap
   menang, jadi ini menambah dasar tanpa merebut apa pun. */
:where(#app select){
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:32px;
}
:root[data-theme="dark"] :where(#app select){background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}

/* ---------- theme: dark palette (JS sets data-theme; System resolves at runtime) ---------- */
:root[data-theme="dark"]{--bg:#0e0e11;--surface:#17171c;--surface-2:#202027;--text:#e8e8ec;--muted:#adadb8;--faint:#8a8a95;--line:#2a2a31;--accent-weak:#3d1a14;--accent-text:#ffa896;--danger:#ef5f8b;--due-late:#fbbf24;--due-today:#d9903b;--prio-med:#7db1f5;--prio-low:#9aa0aa;--glass:rgba(28,28,34,.62);--glass-strong:rgba(30,30,36,.8);--glass-brd:rgba(255,255,255,.09);--glass-hi:rgba(255,255,255,.08)}
:root[data-theme="dark"] .btn-danger:hover{background:rgba(159,18,57,.16)}
:root[data-theme="dark"] .form-error{background:rgba(159,18,57,.16)}
:root[data-theme="dark"] .bubble.them{background:var(--surface-2);border-color:var(--line)}
/* background-color, BUKAN shorthand background: — shorthand mengosongkan
   background-image, dan panah dropdown-nya ikut terhapus di tema gelap. */
:root[data-theme="dark"] .composer input,:root[data-theme="dark"] .field input,:root[data-theme="dark"] .field textarea,:root[data-theme="dark"] .field select{background-color:var(--surface-2)}
:root[data-theme="dark"] .auth-tabs button.on{box-shadow:0 1px 3px rgba(0,0,0,.5)}
:root[data-theme="dark"] .toast{background:#2a2a31}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.seg button{padding:7px 14px;border-radius:8px;font-size:13px;font-weight:500;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.seg button{transition:background .12s,color .12s}
.seg-sort{padding:2px;max-width:100%}
.seg-sort button{padding:6px 11px;font-size:12px}
.seg-prio{display:flex;width:100%;padding:3px;min-width:0}
/* min-width:0 + overflow:hidden adalah jaring pengaman, bukan perbaikan utama. Perbaikan
   utamanya ada di .row2 yang sekarang menumpuk, sehingga pemilih ini selalu dapat lebar
   penuh. Ini untuk keadaan yang belum terpikir — label terjemahan yang lebih panjang,
   atau layar yang lebih sempit dari yang pernah kita uji. Menyusut itu jelek; meluber
   keluar kolom itu rusak. */
.seg-prio .prio-opt{flex:1 1 0;min-width:0;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 6px;font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap;border-radius:8px}
.seg-prio .prio-opt .prio-dot{margin-right:0;opacity:.5;transition:opacity .12s}
.seg-prio .prio-opt.on{background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 1.5px currentColor,0 1px 2px rgba(0,0,0,.06)}
/* Tombol prioritas yang belum dipilih tetap netral; warnanya baru muncul saat aktif. */
.seg-prio .prio-opt{background:none}
.seg-prio .prio-opt:not(.on){color:var(--muted)}
.seg-prio .prio-opt:not(.on) .prio-dot{background:var(--faint)}
.seg-prio .prio-opt.on .prio-dot{opacity:1}

/* ---- Profile photos (avatars with an image + initials fallback) ---- */
.avatar-img{position:relative;overflow:hidden;padding:0}
.avatar-img .avatar-fb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:inherit;font-weight:600}
.avatar-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;z-index:1;background:var(--surface)}
.avatar-edit{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.avatar-edit-pic .avatar{box-shadow:0 0 0 3px var(--line)}
.avatar-edit-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.avatar-edit-actions .btn{cursor:pointer}

/* ---- Feedback screenshot ---- */
.fb-shot{display:inline-flex;align-items:center;gap:6px;cursor:pointer;margin-right:auto}
.fb-form-actions .spacer{flex:1}
.fb-image-preview{position:relative;margin:2px 0 4px;width:fit-content}
.fb-image-preview img{max-width:180px;max-height:150px;border-radius:10px;border:1px solid var(--line);display:block}
.fb-image-x{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;background:var(--text);color:var(--surface);border:2px solid var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.fb-card-img{flex:0 0 auto;width:46px;height:46px;border-radius:8px;overflow:hidden;border:1px solid var(--line);padding:0;cursor:pointer;background:none;align-self:center}
.fb-card-img img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- Account sign-out row ---- */
.lr-signout{color:var(--danger,#c0392b)}
.lr-signout .menu-ico{color:inherit}

/* ---- Developer tools ---- */
.dev-statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 16px}
.dev-stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center}
.dev-stat-n{font-size:20px;font-weight:750;color:var(--text);line-height:1.1}
.dev-stat-l{font-size:11.5px;color:var(--muted);margin-top:3px}
.dev-totals{font-size:13px;color:var(--muted);margin-bottom:6px}
.dev-totals b{color:var(--text);font-size:15px}
.dev-sec-h{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);margin:18px 0 8px}
.dev-list{display:flex;flex-direction:column;gap:9px}
.dev-row{display:flex;align-items:center;gap:10px}
.dev-row-name{flex:0 0 34%;min-width:0;font-size:13px;font-weight:550;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev-bar{flex:1;height:8px;border-radius:6px;background:var(--line);overflow:hidden}
.dev-bar span{display:block;height:100%;background:var(--accent);border-radius:6px}
.dev-row-val{flex:0 0 auto;font-size:12.5px;font-weight:600;color:var(--text);text-align:right;min-width:64px}
.dev-row-sub{display:block;font-size:10.5px;font-weight:500;color:var(--faint)}

/* ---- Invite via WhatsApp ---- */
.ws-invite-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:6px 0 4px}
.ws-invite{white-space:nowrap}

/* ---- Media gallery ---- */
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px}
.media-cell{position:relative;aspect-ratio:1/1;padding:0;border:0;border-radius:8px;overflow:hidden;cursor:pointer;background:var(--line)}
.media-cell img{width:100%;height:100%;object-fit:cover;display:block}
.media-files{padding:6px 4px 4px}
.media-files .section-label{padding:8px 8px 6px}
.media-file{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:10px;text-decoration:none;color:var(--text)}
.media-file:hover{background:var(--hover,rgba(127,127,127,.08))}
.media-file .mf-b{display:flex;flex-direction:column;min-width:0}
.media-file .mf-name{font-size:14px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-file .mf-sub{font-size:11.5px;color:var(--muted)}

/* ---- Tap header / member → user info ---- */
.chat-head-main{display:flex;align-items:center;gap:10px;min-width:0;flex:1;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.chat-head-main:hover .ct-name{text-decoration:underline}
.co-member-main{display:flex;align-items:center;gap:10px;min-width:0;flex:1;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.co-member-main:hover{opacity:.85}
/* Profil orang. Satu tampilan, dua bingkai: overlay di chat, dan kolom di Contacts.
   Gayanya SENGAJA tidak lagi diikat ke .ui-modal — dulu begitu, dan itu sebabnya markah
   yang sama tampil tanpa gaya sama sekali begitu dipakai di luar modal. Yang berbeda
   antara kedua bingkai hanya jaraknya, di blok .detail-person di bawah. */
.ui-hero{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 16px 6px}
.ui-hero .ui-name{font-size:19px;font-weight:750;color:var(--text)}
.ui-hero .ui-role{font-size:13px;color:var(--muted)}
.ui-hero .ui-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;justify-content:center}
.ui-rows{padding:6px 16px 16px}

/* Bingkai kolom: 22px supaya sejajar dengan .detail-pad di layar detail lain. */
.detail-person{padding-bottom:8px}
.detail-person .ui-hero{padding:22px 22px 6px}
.detail-person .ui-rows{padding:6px 22px 0}
.detail-person .bz-card{margin:16px 22px 0}
.detail-person .dp-foot{padding:18px 22px 22px}
.detail-person .dp-foot .btn{width:100%;justify-content:center}

/* ---- Company bio / about ---- */
.co-rename-stack{display:flex;flex-direction:column;align-items:stretch;gap:0}
.co-rename-stack textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-size:14px;line-height:1.45;resize:vertical}
.co-rename-stack .btn{align-self:flex-start}
.ws-bio{margin:2px 0 6px;padding:12px 14px;background:var(--surface-2,var(--surface));border:1px solid var(--line);border-radius:10px;font-size:14px;line-height:1.5;color:var(--text);white-space:pre-wrap}
.brand .brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand svg{opacity:.5;flex:none;margin-left:1px}

/* ---- Attendance ---- */
.att-home{padding:18px 16px}
.att-clock{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;padding:26px 16px;border:0;border-radius:18px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#f5a623));color:#fff;font-size:18px;font-weight:750;cursor:pointer;box-shadow:0 10px 30px rgba(201,58,34,.28)}
.att-clock.out{background:linear-gradient(135deg,#e8811a,#c0392b);box-shadow:0 10px 30px rgba(192,57,43,.28)}
.att-clock:active{transform:scale(.99)}
.att-today{display:flex;gap:10px;margin:14px 0}
.att-cell{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-align:center}
.att-cell-l{display:block;font-size:12px;color:var(--muted)}
.att-cell-v{display:block;font-size:18px;font-weight:750;color:var(--text);margin-top:3px}
.att-office{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);padding:8px 2px}
.att-office svg{flex:none;opacity:.7}
.att-office-off{color:var(--faint)}
.att-menu{margin-top:8px}
.att-consent{font-size:11.5px;color:var(--faint);line-height:1.5;margin-top:14px}
.att-report .att-rec{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.att-thumb{width:46px;height:46px;flex:none;border-radius:9px;overflow:hidden;border:1px solid var(--line);padding:0;background:var(--line);cursor:pointer}
.att-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.att-thumb-none{display:flex;align-items:center;justify-content:center;color:var(--faint);cursor:default}
.att-rec-b{min-width:0;flex:1}
.att-rec-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:14px}
.att-rec-time{font-size:12px;color:var(--muted);margin-top:2px}
.att-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px}
.att-badge.in{background:#17724522;color:#177245}
.att-badge.out{background:#c0392b22;color:#c0392b}
/* camera capture */
.att-cam-back{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:1200}
.att-cam{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1201;width:min(440px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.att-cam-head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 16px;font-size:15px;font-weight:700;border-bottom:1px solid var(--line)}
.att-cam-wrap{position:relative;background:#000;aspect-ratio:3/4;max-height:60vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.att-cam-wrap video,.att-cam-shot{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.att-cam-err{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:#fff;font-size:14px;background:rgba(0,0,0,.5)}
.att-cam-actions{display:flex;gap:10px;padding:12px}
.att-cam-actions .btn{flex:1;justify-content:center}
.att-cam-actions .att-shoot{flex:2}
.att-note-in{width:calc(100% - 24px);margin:12px 12px 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;outline:none;background:var(--surface);color:var(--text)}
.att-note-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.att-pub{display:flex;align-items:center;gap:9px;margin:10px 12px 0;font-size:12.5px;color:var(--muted);cursor:pointer}
.att-pub input{width:16px;height:16px;flex:none;accent-color:var(--accent)}
/* report: visit note, shared/rejected tags, reject control */
.att-pub-tag{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--accent-text);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:2px 8px;border-radius:20px}
.att-priv-tag{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--muted);background:var(--surface-2);padding:2px 8px;border-radius:20px}
.att-priv-tag svg{flex:none}
.att-rej-tag{font-size:11px;font-weight:700;color:#c0392b;background:#c0392b1a;padding:2px 8px;border-radius:20px}
.att-report .att-rec{align-items:flex-start}
.att-report .att-rec.rejected{opacity:.55}
.att-report .att-rec.rejected .att-thumb img{filter:grayscale(1)}
.att-rec-note{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);margin-top:3px}
.att-rec-note svg{flex:none;opacity:.7}
.att-reject{align-self:center;flex:none;font-size:12px;font-weight:600;color:var(--danger);background:none;border:1px solid var(--line);border-radius:8px;padding:5px 10px;cursor:pointer}
.att-reject:hover{background:#c0392b12;border-color:#c0392b55}
.att-reject.undo{color:var(--accent-text)}
/* report: one collapsible summary row per person per day */
.att-group{border-bottom:1px solid var(--line)}
.att-day{display:flex;align-items:center;gap:12px;width:calc(100% + 16px);margin:0 -8px;padding:11px 8px;border:none;border-radius:10px;background:none;color:var(--text);text-align:left;cursor:pointer}
.att-day:hover{background:var(--surface-2)}
.att-day-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.att-day-top{display:flex;align-items:baseline;gap:8px;min-width:0}
.att-day-top b{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-day-date{flex:none;font-size:11.5px;color:var(--muted)}
.att-day-times{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.att-t{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.att-t-open{color:var(--muted);font-weight:600}
.att-t-arr{display:inline-flex;color:var(--faint)}
.att-t-arr svg{display:block}
.att-t-dur{font-size:11px;font-weight:700;color:#177245;background:#17724518;padding:2px 8px;border-radius:20px}
.att-t-none{font-size:12.5px;color:var(--faint)}
.att-day-n{flex:none;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;font-size:11px;font-weight:700;color:var(--accent-text);background:var(--accent-weak);border-radius:20px}
.att-day-chev{flex:none;display:inline-flex;color:var(--faint);transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.att-group.open .att-day-chev{transform:rotate(180deg)}
.att-day-recs{margin:0 0 10px 17px;padding-left:17px;border-left:2px solid var(--accent-weak);animation:attOpen .18s ease}
.att-day-recs .att-thumb{width:40px;height:40px}
.att-day-recs .att-rec:last-child{border-bottom:none}
@keyframes attOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---- date of birth: day / month / year ---- */
.bd-row{display:flex;gap:8px}
.bd-sel{flex:1;min-width:0;padding:11px 30px 11px 10px;border:1px solid var(--line);border-radius:10px;background-color:var(--surface);color:var(--text);font-size:14px;font-family:inherit;outline:none}
.bd-sel:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
/* Day and year are fixed and narrow so the month keeps enough room for "September". */
.bd-day{flex:0 0 74px}
.bd-year{flex:0 0 86px}
.bd-modal{text-align:center}
.bd-ico{width:46px;height:46px;margin:2px auto 10px;display:flex;align-items:center;justify-content:center;border-radius:14px;color:var(--accent-text);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.bd-why{font-size:12.5px;color:var(--muted);line-height:1.55;margin:0 0 14px}
.bd-modal .bd-row{margin-bottom:4px;text-align:left}

/* ---- Bazi: five elements, five colours ---- */
.el-0{color:#177245}                 /* 木 Kayu  — wood   */
.el-1{color:#c0392b}                 /* 火 Api   — fire   */
.el-2{color:#b45309}                 /* 土 Tanah — earth  */
.el-3{color:#64748b}                 /* 金 Logam — metal  */
.el-4{color:#2563eb}                 /* 水 Air   — water  */
.bz-card{margin:14px 16px 16px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.bz-empty{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)}
.bz-empty svg{flex:none;color:#a855f7}
.bz-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;margin-bottom:12px}
.bz-head>svg{flex:none;color:#a855f7}
.bz-animal{margin-left:auto;font-size:11px;font-weight:700;color:#a855f7;background:#a855f71a;padding:3px 10px;border-radius:20px}
.bz-cols{display:flex;gap:8px}
.bz-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:12px;background:var(--surface)}
.bz-lbl{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.bz-ch{font-size:26px;line-height:1.15;font-weight:600}
.bz-py{margin-top:5px;font-size:9.5px;line-height:1.45;color:var(--faint);text-align:center}
.bz-dm{margin-top:12px;font-size:12.5px;color:var(--muted)}
.bz-dm b{font-size:16px;vertical-align:-1px;margin:0 2px}
.bz-els{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.bz-el{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px}
.bz-el.el-0{background:#1772451c}
.bz-el.el-1{background:#c0392b1c}
.bz-el.el-2{background:#b453091c}
.bz-el.el-3{background:#64748b1c}
.bz-el.el-4{background:#2563eb1c}
.bz-el>b{font-weight:800}
.bz-el.none{opacity:.4}
/* ---- watak Day Master: kekuatan, kelemahan, sifat ---- */
.bz-nat{margin-top:14px;padding:13px 14px;border-radius:13px;background:var(--surface-2);border:1px solid var(--line)}
.bz-nat-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.bz-nat-h b{font-size:15px;font-weight:700;color:var(--text)}
.bz-nat-h span{font-size:11.5px;color:var(--faint);text-transform:lowercase}
.bz-nat-s{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.5;color:var(--text);margin-bottom:8px}
.bz-nat-ic{flex:none;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;margin-top:1px}
.bz-up{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}
.bz-dn{background:color-mix(in srgb,var(--due-today) 18%,transparent);color:var(--due-today)}
.bz-traits{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.bz-trait{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:20px;
  background:color-mix(in srgb,var(--good) 12%,transparent);color:var(--good);white-space:nowrap}
/* Sifat yang perlu diwaspadai memakai amber, BUKAN merah. Merah membacanya sebagai
   kesalahan; amber membacanya sebagai sesuatu yang perlu diperhatikan — dan itu memang
   maksudnya. Bentuknya sengaja sama supaya keduanya terbaca setara. */
.bz-trait-w{background:color-mix(in srgb,var(--due-today) 15%,transparent);color:var(--due-today)}
.bz-nat-f{margin-top:11px;padding-top:9px;border-top:1px solid var(--line);
  font-size:11px;line-height:1.5;color:var(--faint);font-style:italic}
.bz-note{display:flex;align-items:flex-start;gap:6px;margin-top:10px;font-size:11px;line-height:1.5;color:var(--faint)}
.bz-note svg{flex:none;margin-top:1px}
.bz-warn{color:#b45309}

/* ---- Bazi: the reading ---- */
.bz-an{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.bz-an-h{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.bz-an-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.bz-bar{height:7px;border-radius:20px;background:#64748b22;overflow:hidden;margin-top:2px}
.bz-bar-f{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--accent),var(--due-today))}
.bz-bar-l{display:flex;justify-content:space-between;font-size:10.5px;color:var(--faint);margin-top:5px}
.bz-an-t{font-size:12px;line-height:1.55;color:var(--muted);margin-top:9px}
.bz-gods{display:flex;gap:6px;margin-top:12px}
.bz-god{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:10px;background:var(--surface)}
.bz-god-p{font-size:9.5px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.03em}
.bz-god-c{font-size:15px;font-weight:600;color:var(--accent-text)}
.bz-god-n{font-size:9.5px;color:var(--muted);text-align:center;line-height:1.3}
.bz-disc{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}

/* ---- Human Resources ---- */
.menu-ico.ic-hr{background:#fbeaf0}
/* developer: module switches + developer list */
.menu-ico.ic-devmodules{background:#e8e7fb}
.menu-ico.ic-devpeople{background:#fce7f0}
.menu-ico.ic-polls{background:#f2ecfd}
.dev-warn{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:10px 12px;border-radius:11px;font-size:12.5px;font-weight:600;color:#b45309;background:#f59e0b1c}
.dev-warn svg{flex:none}
.dev-mail{display:block;font-size:11.5px;font-weight:400;color:var(--faint);margin-top:1px}
.menu-ico.ic-employees{background:#fbeaf0}
.menu-ico.ic-leave{background:#fdf0e2}
.menu-ico.ic-cashadv{background:#eaf3de}
.menu-ico.ic-overtime{background:#dcf5f0}
/* Sub-modules that are listed but not built yet: visibly inert, never clickable. */
.hr-soon{opacity:.55;cursor:default}
.hr-soon .menu-ico{filter:grayscale(.5)}
.ws-tag-mem{background:var(--surface-2);color:var(--faint)}
.hr-soon-tag{flex:none;font-size:10px;font-weight:700;color:var(--muted);background:var(--surface-2);padding:3px 9px;border-radius:20px}
.m-mini-soon{opacity:.35;pointer-events:none}
.hr-h1{margin:0;padding:16px 16px 0;font-size:20px}
.hr-back{display:inline-flex;align-items:center;gap:5px;margin-bottom:14px;padding:6px 11px 6px 8px;border:1px solid var(--line);border-radius:20px;background:none;color:var(--muted);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer}
.hr-back:hover{background:var(--surface-2);color:var(--text)}
.hr-top{padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.hr-count{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:10px}
.hr-count b{font-size:20px;font-weight:700;color:var(--text)}
.hr-missing{font-size:11px;font-weight:700;color:#b45309;background:#f59e0b1c;padding:3px 9px;border-radius:20px}
.hr-search{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2)}
.hr-search svg{flex:none;color:var(--faint)}
.hr-search input{flex:1;min-width:0;border:none;background:none;outline:none;font-size:14px;font-family:inherit;color:var(--text)}
.hr-row .lr-sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hr-tag{font-size:10px;font-weight:700;color:var(--muted);background:var(--surface-2);padding:2px 7px;border-radius:20px}
.hr-tag.owner{color:var(--accent-text);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.hr-shio{flex:none;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:44px}
.hr-shio b{font-size:19px;line-height:1.1;font-weight:600}
.hr-shio>span{font-size:9.5px;color:var(--faint)}
.hr-shio-none{justify-content:center;color:var(--faint);opacity:.5}
.hr-hero{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.hr-hero-b{min-width:0}
.hr-hero-b h1{margin:0;font-size:20px;line-height:1.25;overflow:hidden;text-overflow:ellipsis}
.hr-hero-role{font-size:13px;color:var(--muted);margin-top:2px}
.hr-acts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.hr-detail .bz-card{margin:16px 0 0}
/* attendance managers list + toggle */
.att-mgr-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.att-mgr-name{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--text)}
.att-mgr-tag{font-size:11px;font-weight:700;color:var(--accent-text);background:var(--accent-weak);padding:1px 7px;border-radius:20px}
.att-mgr-owner{font-size:12px;color:var(--faint);font-weight:600}
.switch{width:42px;height:24px;flex:none;border-radius:20px;border:0;background:var(--line);position:relative;cursor:pointer;transition:background .18s}
.switch.on{background:var(--accent)}
.switch-dot{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.switch.on .switch-dot{transform:translateX(18px)}
/* insights: hour histogram + top spots */
.att-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:14px}
.att-card-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:700;color:var(--text);margin-bottom:12px}
.att-peak{font-size:11.5px;font-weight:600;color:var(--accent-text);background:var(--accent-weak);padding:2px 8px;border-radius:20px;white-space:nowrap}
.att-bars{display:flex;align-items:flex-end;gap:3px;height:96px}
.att-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.att-bar{width:100%;border-radius:3px 3px 0 0;background:var(--line);min-height:2px}
.att-bar-col.peak .att-bar{background:linear-gradient(180deg,var(--accent),var(--due-today))}
.att-bar-x{font-size:9px;color:var(--faint);height:10px;line-height:1}
.att-locs{display:flex;flex-direction:column}
.att-loc{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.att-loc:first-child{border-top:0}
.att-loc-rank{width:22px;height:22px;flex:none;border-radius:50%;background:var(--accent-weak);color:var(--accent-text);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.att-loc-b{flex:1;min-width:0;display:flex;flex-direction:column}
.att-loc-co{font-size:13.5px;font-weight:600;color:var(--text)}
.att-loc-n{font-size:12px;color:var(--muted)}
.att-loc-empty{font-size:13px;color:var(--muted);padding:6px 0}
/* unusual time / place flags + date range */
.att-odd{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:#b45309;background:#f59e0b22;padding:2px 8px;border-radius:20px}
.att-odd svg{flex:none}
.att-report .att-rec.flagged{background:linear-gradient(90deg,#f59e0b12,transparent);border-radius:10px;padding-left:6px;padding-right:6px}
.att-range{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 16px}
.att-date-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text);font-size:13px;font-weight:600;cursor:pointer}
.att-date-btn svg{color:var(--muted);flex:none}
.att-range-sep{color:var(--muted)}
.att-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.att-person-wrap{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:9px;padding:0 10px;background:var(--surface);flex:1;min-width:150px}
.att-person-wrap svg{color:var(--muted);flex:none}
.att-person{flex:1;min-width:0;border:none;background-color:transparent;color:var(--text);font-size:13.5px;font-weight:600;padding:8px 22px 8px 4px;outline:none;cursor:pointer;font-family:inherit;background-position:right 2px center}

/* ---- Feedback: full, selectable detail text ---- */
.fb-tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.fb-tabs::-webkit-scrollbar{display:none}
.fb-tab{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.fb-tab:hover{background:var(--surface-2)}
.fb-tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.fb-tab-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:11px;font-weight:700}
.fb-tab.on .fb-tab-n{background:rgba(255,255,255,.28);color:#fff}
.fb-full{user-select:text;-webkit-user-select:text;padding:2px 2px 12px;border-bottom:1px solid var(--line);margin-bottom:10px}
.fb-full-title{font-size:15px;font-weight:700;color:var(--text);line-height:1.4;margin-bottom:6px;user-select:text;-webkit-user-select:text}
.fb-full-body{font-size:14px;line-height:1.55;color:var(--muted);white-space:pre-wrap;word-break:break-word;user-select:text;-webkit-user-select:text}
.fb-comment-t{user-select:text;-webkit-user-select:text}

/* ---- Unified pop-up / overlay system ---- */
/* One consistent scrim + fade for every modal backdrop. */
.mm-backdrop,.cf-backdrop,.sr-backdrop{background:rgba(17,20,28,.45);animation:cfFade .14s ease}
.co-backdrop{background:rgba(17,20,28,.14)} /* lighter scrim for dropdown-style menus */
/* One consistent panel look: radius, border, shadow, entrance animation. */
.mm-sheet,.cf-modal,.sr-panel,.gi-modal,.co-menu{border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.30)}
.gi-modal,.co-menu{animation:cfPop .16s cubic-bezier(.2,.9,.3,1.15)}
/* Consistent rows inside menus. */
.co-menu .co-link,.co-menu .co-code{border-radius:10px}
/* ---- Liquid glass: frosted translucency on floating panels (progressive enhancement) ---- */
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .co-menu,.nt-menu,.mm-sheet,.cf-modal,.gi-modal,.sr-panel,.ui-modal,.fwd-modal{
    background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-brd);box-shadow:0 20px 60px rgba(0,0,0,.28),inset 0 1px 0 var(--glass-hi)}
  .topbar,.chat-top{background:var(--glass-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
  .jump-latest{background:var(--glass-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-brd)}
  .toast{background:rgba(20,20,24,.74);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
}
/* Context menu (long-press / right-click) opens anchored at the finger, not as a far-away sheet. */
.mm-sheet.mm-pop{left:0;top:0;right:auto;bottom:auto;transform:none;width:max-content;min-width:184px;max-width:min(248px,76vw);transform-origin:top left;animation:mmPop .13s cubic-bezier(.2,.85,.3,1.05)}
@keyframes mmPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
/* Stop the native long-press flicker (tap highlight, iOS callout, text-selection handles) fighting our menu. */
.chat-body .bubble,.conv-row{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.chat-body .bubble,.chat-body .bubble *,.conv-row,.conv-row *{-webkit-user-select:none;user-select:none}

/* ---- Galat klien (layar Developer) ---- */
.ce-tabs{display:flex;gap:8px;margin:14px 0 10px}
.ce-tab{padding:6px 14px;border-radius:20px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.ce-tab:hover{background:var(--surface-2)}
.ce-tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.ce-item{border:1px solid var(--line);border-radius:14px;background:var(--surface);margin-bottom:8px;overflow:hidden}
.ce-item.done{opacity:.62}
.ce-head{display:flex;align-items:center;gap:10px;width:100%;padding:11px 13px;background:none;border:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.ce-head:hover{background:var(--surface-2)}
.ce-ico{flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:#f43f5e1c;color:#f43f5e}
.ce-item.done .ce-ico{background:#10b9811c;color:#10b981}
.ce-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ce-msg{font-size:13.5px;font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ce-sub{display:flex;flex-wrap:wrap;gap:8px;font-size:11.5px;color:var(--muted)}
.ce-where{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ce-ver{font-weight:700;color:#8b5cf6;background:#8b5cf61c;padding:1px 7px;border-radius:20px}
.ce-hits{flex:none;font-size:12px;font-weight:700;color:var(--muted);background:var(--surface-2);padding:3px 9px;border-radius:20px}
.ce-detail{padding:0 13px 13px;border-top:1px solid var(--line)}
/* Jejak tumpukan bisa sangat panjang dan tidak boleh melebarkan kolom — dibungkus dan
   digulir sendiri, bukan memaksa seluruh halaman melar ke samping. */
.ce-stack{margin:11px 0;padding:10px 12px;max-height:220px;overflow:auto;border-radius:10px;background:var(--surface-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--muted)}
.ce-meta{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted);margin-bottom:11px;word-break:break-word}
.ce-badge{flex:none;min-width:22px;text-align:center;font-size:11.5px;font-weight:700;color:#fff;background:#f43f5e;padding:2px 7px;border-radius:20px;margin-right:4px}

/* Prioritas & catatan aktivitas — warnanya dari palet, bukan heksa yang ditempel di JS.
   color-mix membuat latar tipisnya, menggantikan trik menyambung "1a" ke heksa. */
.prio-urgent{color:var(--danger);background:color-mix(in srgb,var(--danger) 13%,transparent)}
.prio-high{color:var(--due-today);background:color-mix(in srgb,var(--due-today) 13%,transparent)}
.prio-medium{color:var(--prio-med);background:color-mix(in srgb,var(--prio-med) 13%,transparent)}
.prio-low{color:var(--prio-low);background:color-mix(in srgb,var(--prio-low) 13%,transparent)}
.prio-urgent .prio-dot,span.prio-dot.prio-urgent{background:var(--danger)}
.prio-high   .prio-dot,span.prio-dot.prio-high{background:var(--due-today)}
.prio-medium .prio-dot,span.prio-dot.prio-medium{background:var(--prio-med)}
.prio-low    .prio-dot,span.prio-dot.prio-low{background:var(--prio-low)}
.act-del{color:var(--danger);background:color-mix(in srgb,var(--danger) 13%,transparent)}
.act-ok{color:var(--good);background:color-mix(in srgb,var(--good) 13%,transparent)}
.act-chg{color:var(--prio-med);background:color-mix(in srgb,var(--prio-med) 13%,transparent)}

/* Rel: ruang kosongnya kembali satu tingkat; ikon di dalamnya punya tujuan sendiri. */
.m-rail>*{cursor:default}
.m-rail button{cursor:pointer}

.cf-input{width:100%;margin:12px 0 2px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background-color:var(--surface);color:var(--text);font:inherit;font-size:14px;outline:none}
.cf-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}

/* Pilihan di dalam kotak konfirmasi (mis. peran seseorang di workspace).
   Memakai kotak yang sama, bukan kotak baru: latar, tombol Esc, dan penataannya sudah
   ada dan tidak perlu ditulis dua kali. */
.cf-choices{display:flex;flex-direction:column;gap:8px;margin:14px 0 2px}
.cf-choice{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background-color:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .14s ease,background-color .14s ease,transform .14s ease}
.cf-choice:hover{border-color:var(--accent)}
.cf-choice:active{transform:scale(.985)}
.cf-choice.on{border-color:var(--accent);background-color:var(--accent-weak)}
.cf-choice:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cf-choice-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--accent-weak)}
.cf-choice-ico.ic-contacts{background:#e6f6f7}.cf-choice-ico.ic-companies{background:#ececfb}.cf-choice-ico.ic-account{background:#f0ecfb}
.cf-choice-b{display:flex;flex-direction:column;min-width:0;flex:1}
.cf-choice-t{font-size:14px;font-weight:600}
/* --muted, bukan --faint: di atas .cf-choice.on latarnya --accent-weak, dan --faint
   tidak sampai 4,5:1 di sana. */
.cf-choice-s{font-size:12px;color:var(--muted);line-height:1.35;margin-top:1px}
/* --accent-text, bukan --accent: di tema gelap --accent di atas --accent-weak cuma
   3,03:1 — lolos ambang grafis tapi tipis untuk satu-satunya tanda "terpilih".
   --accent-text memang dibuat untuk dibaca di atas --accent-weak: 5,50 dan 8,33. */
.cf-choice>svg{color:var(--accent-text);flex-shrink:0}

/* Permintaan izin lihat pesan terhapus, di panel notifikasi. */
.nt-peek{align-items:flex-start;gap:10px;padding:11px 12px}
.nt-reason{font-style:italic;color:var(--muted);margin-top:2px}
.nt-peek-acts{display:flex;gap:8px;margin-top:9px}
.nt-peek-acts .btn{padding:5px 14px;font-size:12.5px}

/* ---- Mode pemeliharaan ---- */
/* Kotak saklar sengaja TIDAK terlihat seperti baris modul biasa. Mematikan satu modul
   itu pekerjaan terencana; menyalakan ini artinya sedang terjadi sesuatu. */
.mnt-box{border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin:14px 0 18px;background:var(--surface)}
.mnt-box.on{border-color:var(--due-late);background:color-mix(in srgb,var(--due-late) 8%,transparent)}
.mnt-row{display:flex;align-items:center;gap:10px}
.mnt-row>svg{flex:none;color:var(--due-late)}
.mnt-lbl{flex:1;font-size:14px;font-weight:600}
.mnt-lbl b{color:var(--due-late)}
.mnt-box .fb-sub{margin:9px 0 0}
.mnt-note-cur{font-style:italic}
.mnt-box .cf-input{margin:11px 0 0}
/* Layar yang dilihat pengguna saat pemeliharaan menyala. */
.mnt-card{text-align:center}
.mnt-ico{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:14px auto 12px;border-radius:18px;background:color-mix(in srgb,var(--due-today) 14%,transparent);color:var(--due-today)}
.mnt-title{font-size:18px;font-weight:700;margin-bottom:6px}

/* ==========================================================================
   TIDAK ADA YANG BOLEH LEBIH LEBAR DARI KOLOMNYA
   ==========================================================================
   Dua bug yang ditemukan 20 Juli — pilihan prioritas terpotong jadi "Hig", dan tombol
   Screenshot/Cancel/Submit melayang di luar kartunya — ternyata satu sebab yang sama,
   bukan dua kejadian terpisah:

     Anak dari flex row punya min-width:auto secara bawaan. Artinya ia MENOLAK menyusut
     di bawah lebar isinya. Kalau isinya lebih lebar dari ruang yang ada, ia tidak
     mengecil dan tidak turun baris — ia MELUBER keluar, diam-diam, tanpa scrollbar.

   Aplikasi ini kolomnya selebar ponsel (360–460px) di desktop MAUPUN di HP, jadi kesalahan
   ini muncul di layar besar juga. Ia hanya kelihatan kalau isinya kebetulan cukup panjang —
   itu sebabnya ia lolos sekian lama.

   Penyapuan menemukan 127 baris flex tanpa flex-wrap. Sebagian besar aman: satu ikon
   ditambah satu teks lentur tidak bisa meluber. Yang diperbaiki di bawah adalah dua pola
   yang BISA:

     1. Deretan tombol berteks   -> boleh turun baris
     2. Deretan kolom sejajar    -> boleh menyusut

   Ditulis di sini sebagai satu blok, bukan disebar ke 20 aturan, supaya alasannya tinggal
   di satu tempat dan penyapuan berikutnya cukup membaca bagian ini.
   -------------------------------------------------------------------------- */

/* 1. Deretan tombol — turun baris daripada meluber. */
.cf-actions,.msg-edit-actions,.dp-foot,.task-actions,.rsvp,.att-cam-actions,
.nt-peek-acts,.inv-actions,.fb-status-set{flex-wrap:wrap}

/* 2. Deretan sejajar — menyusut daripada meluber. Yang ini TIDAK diberi flex-wrap:
      tiga kolom Bazi atau tiga ruas tanggal lahir yang turun baris justru terbaca salah,
      lebih baik mengecil bersama-sama. */
.bd-row,.bz-cols,.srv-grid,.bl-money,.att-today,.bl-pct-row,
.auth-tabs,.lg-tabs,.ce-tabs,.bl-mode-seg{min-width:0}
.bd-row>*,.bz-cols>*,.srv-grid>*,.bl-money>*,.att-today>*,.bl-pct-row>*,
.auth-tabs>*,.lg-tabs>*,.ce-tabs>*,.bl-mode-seg>*{min-width:0}