/* =========================================================
   NINZY CORE — extras4.css  (batch 10, alat Premium 132–146)
   Memakai variabel tema yang sama (--ink-2, --line-soft, --seal, --paper, …)
   ========================================================= */

/* ---- reader: pertajam gambar & warna latar kustom ---- */
body.cx4-sharp1 .reader__pages img{filter:url(#cx4Sh1) brightness(calc(var(--reader-brightness,1) * var(--cx3-vb,1))) contrast(calc(var(--cx3-contrast,1) * var(--cx3-vc,1))) saturate(calc(var(--cx3-sat,1) * var(--cx3-vs,1))) grayscale(var(--cx3-gray,0)) !important;}
body.cx4-sharp2 .reader__pages img{filter:url(#cx4Sh2) brightness(calc(var(--reader-brightness,1) * var(--cx3-vb,1))) contrast(calc(var(--cx3-contrast,1) * var(--cx3-vc,1))) saturate(calc(var(--cx3-sat,1) * var(--cx3-vs,1))) grayscale(var(--cx3-gray,0)) !important;}
body.cx4-sharp1.cx-invert .reader__page img{filter:invert(1) hue-rotate(180deg) url(#cx4Sh1) brightness(calc(var(--reader-brightness,1) * var(--cx3-vb,1))) contrast(calc(var(--cx3-contrast,1) * var(--cx3-vc,1))) saturate(calc(var(--cx3-sat,1) * var(--cx3-vs,1))) grayscale(var(--cx3-gray,0)) !important;}
body.cx4-sharp2.cx-invert .reader__page img{filter:invert(1) hue-rotate(180deg) url(#cx4Sh2) brightness(calc(var(--reader-brightness,1) * var(--cx3-vb,1))) contrast(calc(var(--cx3-contrast,1) * var(--cx3-vc,1))) saturate(calc(var(--cx3-sat,1) * var(--cx3-vs,1))) grayscale(var(--cx3-gray,0)) !important;}
body.cx4-bg .reader, body.cx4-bg .reader__pages{background:var(--cx4-bg) !important;}

/* ---- penggaris baca ---- */
.cx4-ruler{position:fixed; inset:0; z-index:40; pointer-events:none; --y:40%; --h:18%;}
.cx4-ruler__t, .cx4-ruler__b{position:absolute; left:0; right:0; background:rgba(0,0,0,.62); transition:none;}
.cx4-ruler__t{top:0; height:var(--y);}
.cx4-ruler__b{top:calc(var(--y) + var(--h)); bottom:0;}
.cx4-ruler__grip{
  position:absolute; right:6px; top:calc(var(--y) + var(--h) / 2 - 22px); width:36px; height:44px; pointer-events:auto; touch-action:none;
  border:1px solid var(--line-soft); border-radius:12px; background:var(--ink-2); color:var(--paper); font-size:18px; opacity:.9; cursor:grab;
}

/* ---- chip pomodoro ---- */
.cx4-pomo{
  position:fixed; z-index:60; top:calc(env(safe-area-inset-top,0px) + 54px); right:10px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line-soft); background:var(--ink-2); color:var(--paper); font:600 13px var(--font-body,Inter,sans-serif); font-variant-numeric:tabular-nums;
  box-shadow:0 6px 18px rgba(0,0,0,.4); cursor:pointer;
}
.cx4-pomo[data-phase="break"]{background:#0f3d33; border-color:#2dd4a8;}

/* ---- baris kontrol (menu reader + modal) ---- */
.cx4-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 2px; font-size:13.5px;}
.cx4-row .filter-select{width:auto; max-width:56%;}
.cx4-row input[type=number]{width:96px; text-align:right;}
.cx4-row__ctl{display:flex; align-items:center; gap:8px;}
.cx4-row input[type=color]{width:38px; height:30px; padding:0; border:1px solid var(--line-soft); border-radius:8px; background:none;}
.cx4-grp__all{width:100%; margin-top:6px; text-align:center;}
.cx4-inline{display:flex; gap:8px; align-items:center; margin:8px 0;}
.cx4-inline .filter-select{flex:1;}
.cx4-modal{max-height:86vh; overflow:auto;}
.cx4-h{font-size:13px; margin:14px 0 6px; color:var(--paper-dim); font-weight:700;}
.cx4-qcard{padding:8px;}
.cx4-qcard .btn{width:100%;}

/* ---- antrean ---- */
.cx4-queue{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px;}
.cx4-queue li{display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line-soft); border-radius:12px; background:var(--ink-2);}
.cx4-queue li a{flex:1; min-width:0; color:var(--paper); text-decoration:none; display:flex; flex-direction:column;}
.cx4-queue li a b{font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cx4-queue li small{color:var(--paper-dim); font-size:11.5px;}
.cx4-queue__ctl{display:flex; gap:4px;}
.cx4-queue__ctl button{width:30px; height:30px; border-radius:8px; border:1px solid var(--line-soft); background:transparent; color:var(--paper); cursor:pointer;}

/* ---- statistik ---- */
.cx4-bars{display:flex; align-items:flex-end; gap:2px; height:70px; margin:6px 0 4px;}
.cx4-bars i{flex:1; border-radius:3px 3px 0 0; background:rgba(255,255,255,.1); min-height:2px;}
.cx4-bars i.on{background:var(--grad,var(--seal));}
.cx4-hbar{display:grid; grid-template-columns:minmax(70px,34%) 1fr 28px; gap:8px; align-items:center; font-size:12.5px; margin:5px 0;}
.cx4-hbar span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cx4-hbar div{height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden;}
.cx4-hbar i{display:block; height:100%; border-radius:999px; background:var(--grad,var(--seal));}
.cx4-hbar b{text-align:right; font-variant-numeric:tabular-nums;}

/* ---- cari catatan ---- */
.cx4-notes{display:flex; flex-direction:column; gap:6px;}
.cx4-note{display:block; padding:9px 11px; border:1px solid var(--line-soft); border-radius:12px; background:var(--ink-2); color:var(--paper); text-decoration:none;}
.cx4-note b{display:block; font-size:12.5px; margin-bottom:3px;}
.cx4-note span{font-size:12.5px; color:var(--paper-dim); line-height:1.45; word-break:break-word;}
.cx4-note mark{background:rgba(167,139,250,.35); color:var(--paper); border-radius:3px; padding:0 2px;}

/* ---- roda ---- */
.cx4-wheel{position:relative; width:300px; max-width:100%; margin:6px auto;}
.cx4-wheel canvas{width:100%; height:auto; border-radius:50%; box-shadow:0 0 0 3px var(--line-soft),0 10px 30px rgba(0,0,0,.45);}
.cx4-wheel__pin{position:absolute; left:50%; top:-6px; width:0; height:0; margin-left:-9px; border-left:9px solid transparent; border-right:9px solid transparent; border-top:18px solid var(--paper); filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));}

/* ---- halaman Alat ---- */
.cx4-lead{margin:0 0 10px;}
.cx4-cta{display:block; text-align:center; margin-bottom:14px;}
.cx4-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; padding-bottom:20px;}
.cx4-tool{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; padding:12px 12px 14px;
  border:1px solid var(--line-soft); border-radius:16px; background:var(--ink-2); color:var(--paper); cursor:pointer; font:inherit;
}
.cx4-tool:active{transform:scale(.98);}
.cx4-tool__ico{font-size:24px; line-height:1;}
.cx4-tool b{font-size:13.5px;}
.cx4-tool small{font-size:11.5px; line-height:1.4; color:var(--paper-dim);}
.cx4-tool em{margin-top:2px; font-style:normal; font-size:10.5px; color:var(--brass); border:1px solid var(--line-soft); border-radius:999px; padding:1px 8px;}
.cx4-tool.is-lock{opacity:.82;}

/* ---- kunci PIN ---- */
html.cx4-locked body > *:not(#cx4Lock){visibility:hidden !important;}
.cx4-lock{position:fixed; inset:0; z-index:2147483000; display:grid; place-items:center; background:var(--ink,#090722); padding:20px;}
.cx4-lock__box{width:100%; max-width:320px; text-align:center; color:var(--paper);}
.cx4-lock__ico{font-size:34px;}
.cx4-lock h2{margin:6px 0 14px; font-size:18px;}
.cx4-lock__dots{display:flex; justify-content:center; gap:10px; margin-bottom:8px;}
.cx4-lock__dots i{width:12px; height:12px; border-radius:50%; border:1.5px solid var(--paper-dim); transition:background .1s;}
.cx4-lock__dots i.on{background:var(--seal-hi,#9455ff); border-color:var(--seal-hi,#9455ff);}
.cx4-lock__msg{min-height:20px; margin:0 0 12px; font-size:13px; color:var(--paper-dim);}
.cx4-keys{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.cx4-keys button{height:56px; border-radius:16px; border:1px solid var(--line-soft); background:var(--ink-2); color:var(--paper); font:600 20px var(--font-body,Inter,sans-serif); cursor:pointer;}
.cx4-keys button:active{background:var(--seal);}
.cx4-lock .cx-linkbtn{margin-top:16px;}
.cx4-lock.shake .cx4-lock__box{animation:cx4Shake .35s;}
@keyframes cx4Shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@media (prefers-reduced-motion:reduce){.cx4-lock.shake .cx4-lock__box{animation:none;}}