:root{color-scheme:dark;--bg:#101529;--bg2:#171f38;--panel:#1c2542;--panel2:#222f52;--line:#354260;--text:#f2f5ff;--muted:#a5b2cd;--accent:#7779fa;--aqua:#48dbcf;--danger:#f96b83}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{color:inherit}.hidden,[hidden]{display:none!important}.app{min-height:100dvh;background:radial-gradient(ellipse at 18% 0%,#1c2850 0,transparent 47%),var(--bg)}.header{height:68px;padding:10px clamp(16px,3vw,34px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;position:relative;z-index:3;background:rgba(16,21,41,.88)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}.brand-symbol{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:14px;background:linear-gradient(145deg,#7284ff,#514ed9);font-size:23px;font-weight:900;box-shadow:0 10px 30px #0004}.brand-symbol span{font-size:12px;vertical-align:top}.brand strong,.brand small{display:block}.brand strong{font-size:16px;line-height:1.4}.brand small{font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-right{display:flex;align-items:center;gap:7px;min-width:0}.username{color:var(--muted);font-size:12px;max-width:185px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:7px}.icon-button{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);display:inline-grid;place-items:center;flex-shrink:0;transition:background .15s,border-color .15s}.icon-button:hover,.icon-button:focus-visible{background:var(--panel2);border-color:var(--accent);outline:none}.icon-button svg,.upload-tile svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.screen{min-height:calc(100dvh - 68px)}.auth-layout{display:grid;place-items:center;padding:30px 14px}.card{border:1px solid var(--line);border-radius:22px;background:linear-gradient(155deg,#232e50,#1a233d 65%);box-shadow:0 24px 75px #02040c55}.auth-card{width:min(430px,100%);padding:clamp(22px,5vw,38px);display:flex;flex-direction:column;gap:10px}.auth-card h1{font-size:clamp(25px,4vw,30px);margin:3px 0}.muted{color:var(--muted)}.auth-card p{margin:0 0 10px}.auth-card label,.edit-dialog label{font-weight:650;font-size:13px;margin-top:8px}.auth-card input,.edit-dialog input{display:block;width:100%;min-width:0;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#0e1730;color:#fff;outline:none}.auth-card input:focus,.edit-dialog input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #7779fa22}.primary-btn,.secondary-btn{border-radius:12px;padding:12px 17px;font-weight:700;border:1px solid transparent}.primary-btn{background:linear-gradient(115deg,#686fff,#8e76fc);color:white}.secondary-btn{color:var(--text);border-color:var(--line);background:var(--panel2)}.primary-btn:hover{filter:brightness(1.07)}.auth-card>.primary-btn,.stack-form>.primary-btn{width:100%;margin-top:13px}.stack-form{display:flex;flex-direction:column;gap:9px}.accent-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:#5f62df33;color:#aeb5ff;font-size:26px;font-weight:800;margin-bottom:10px}.center{text-align:center}.center .accent-icon{margin-inline:auto}.link-btn,.text-button,.subtle-link{border:0;background:none;color:#b0b8ff;padding:3px;text-decoration:underline}.subtle-link{font-size:12px;text-align:center;margin:2px auto 0;text-decoration:none;color:var(--muted)}.password-row{display:flex;position:relative}.password-row .text-button{position:absolute;right:10px;top:9px}.password-row input{padding-right:60px}.tip{font-size:12px}.small{font-size:12px}.home-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:26px;padding:26px 18px 7vh}.home-welcome{max-width:550px}.home-welcome h1{font-size:clamp(30px,6vw,44px);margin:10px 0}.home-welcome p{color:var(--muted);font-size:14px;margin:0}.kicker{letter-spacing:.16em;color:#a3a5ff;font-size:11px;font-weight:850}.file-panel{min-width:min(340px,100%);padding:25px 22px 19px;background:#1b2441;border:1px dashed #6873ac;border-radius:22px;display:grid;justify-items:center}.file-panel p{margin:10px 0 0}.upload-tile{width:130px;height:130px;border:1px solid #8e8ffb;border-radius:28px;background:linear-gradient(145deg,#706dfa,#534bbc);color:white;display:grid;place-items:center;box-shadow:0 16px 40px #514bbc60}.upload-tile:hover{transform:translateY(-2px)}.upload-tile svg{width:59px;height:59px;stroke-width:1.4}.admin-screen{padding:27px clamp(12px,4vw,44px)}.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:22px}.section-head h1{margin:0 0 5px;font-size:clamp(24px,4vw,34px)}.section-head p{margin:0}.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#1b2440}table{width:100%;border-collapse:collapse;min-width:540px}th,td{padding:14px 15px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}tr:last-child td{border:0}th{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}td:nth-child(2){overflow-wrap:anywhere}.right{text-align:right}.actions{display:flex;justify-content:flex-end;gap:5px}.actions .icon-button{width:34px;height:34px}.actions .icon-button svg{width:17px;height:17px}.actions .icon-button.good{color:#64e2ac}.actions .icon-button.bad{color:#ff879b}.pill{display:inline-block;padding:3px 10px;border:1px solid;border-radius:30px;font-size:11px;font-weight:700}.pill.pending{color:#ffcd74;border-color:#ffcd7450}.pill.active{color:#7de2b0;border-color:#7de2b050}.pill.disabled{color:#ff8f9f;border-color:#ff8f9f50}.reader-screen{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;min-height:0;background:#151b2b}.reader-toolbar{background:#121931;min-height:54px;padding:7px max(7px,env(safe-area-inset-right)) 7px max(8px,env(safe-area-inset-left));border-bottom:1px solid #384560;display:flex;align-items:center;justify-content:space-between;gap:7px;flex-shrink:0}.reader-doc{font-size:12px;font-weight:750;min-width:0;max-width:22vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reader-tools{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0}.reader-toolbar .icon-button{width:34px;height:36px;border-color:transparent;background:transparent;border-radius:7px}.reader-toolbar .icon-button:hover{background:#344262}.reader-toolbar .icon-button svg{width:18px;height:18px}.close-button{color:#ffa9b3!important;background:#77304a66!important}.page-input-wrap{display:flex;align-items:center;gap:4px;color:#aeb7d2;font-size:11px}.page-input-wrap input{width:53px;padding:5px 2px;border:1px solid #455575;border-radius:6px;background:#1d2844;color:#fff;text-align:center;font-size:12px}.zoom-label{width:37px;text-align:center;color:#c1c9e1;font-size:11px}.pdf-frame-wrap{flex:1;min-height:0;position:relative;background:#52555e}.pdf-frame-wrap iframe{width:100%;height:100%;display:block;border:0;background:#52555e}.reader-hint{background:#111726;color:#aeb9d0;padding:5px 10px;font-size:10px;text-align:center;flex-shrink:0;padding-bottom:max(5px,env(safe-area-inset-bottom))}.progress-overlay{position:fixed;inset:0;background:#02050ba9;z-index:50;display:grid;place-items:center;padding:18px}.progress-card{width:min(340px,100%);padding:30px;border-radius:19px;border:1px solid #48557a;background:#1d2745;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px}.progress-card strong{font-size:19px}.progress-card p{margin:0;color:var(--muted);font-size:12px}.loading-bar{width:100%;height:8px;margin:10px 0;border-radius:20px;overflow:hidden;background:#364566;position:relative}.loading-bar span{position:absolute;inset:0 auto 0 0;width:35%;background:linear-gradient(90deg,#777dff,#65d4ce);border-radius:inherit;animation:progressIndeterminate 1.25s infinite ease-in-out}.spinner{width:32px;height:32px;border:3px solid #6072aa;border-top-color:#b2b6ff;border-radius:50%;animation:spin .9s linear infinite;margin:auto}@keyframes spin{to{transform:rotate(360deg)}}@keyframes progressIndeterminate{0%{left:-36%}100%{left:102%}}.small-btn{padding:7px 14px;font-size:12px}.toast{position:fixed;z-index:80;bottom:20px;left:50%;transform:translate(-50%,10px);opacity:0;pointer-events:none;max-width:calc(100vw - 28px);width:max-content;padding:11px 16px;border-radius:12px;background:#3b4a71;color:#fff;font-size:13px;box-shadow:0 14px 40px #0007;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}.toast.error{background:#81405b}.edit-dialog{color:var(--text);width:min(420px,calc(100% - 22px));border-radius:20px;border:1px solid var(--line);background:#1c2645;padding:22px}.edit-dialog::backdrop{background:#03050fb8}.edit-dialog form{display:flex;flex-direction:column;gap:9px}.edit-dialog h2{margin:0 0 9px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}@media(max-width:650px){.header{height:58px;padding:6px 10px}.brand-symbol{width:37px;height:37px;border-radius:12px;font-size:20px}.brand{gap:7px}.brand small{display:none}.brand strong{font-size:13px}.username{max-width:90px;margin-right:0}.screen{min-height:calc(100dvh - 58px)}.home-welcome h1{font-size:30px}.reader-toolbar{min-height:48px}.reader-doc{display:none}.reader-tools{width:100%;justify-content:space-between;gap:0}.reader-toolbar .icon-button{width:31px;height:34px}.reader-toolbar .icon-button svg{width:17px;height:17px}.page-input-wrap{gap:2px;font-size:10px}.page-input-wrap input{width:41px}.zoom-label{font-size:10px;width:28px}.reader-hint{font-size:9px}}@media(max-width:355px){.reader-toolbar .icon-button{width:26px}.reader-toolbar .icon-button svg{width:15px}.page-input-wrap input{width:36px}.zoom-label{width:25px}.reader-hint{display:none}}@media(max-height:400px) and (orientation:landscape){.reader-hint{display:none}.reader-toolbar{min-height:42px;padding-block:2px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition:none!important}}
/* comik v3: pembaca PDF.js dengan halaman kanvas, bukan iframe PDF bawaan. */
.reader-tools,.reader-nav,.reader-options{display:flex;align-items:center;justify-content:flex-end;gap:3px;min-width:0}
.reader-options{gap:2px}
.reader-toolbar{box-shadow:0 4px 20px #0002;z-index:3}
.reader-toolbar .icon-button:disabled{opacity:.32;cursor:not-allowed}
.reader-toolbar .icon-button:focus-visible{outline:2px solid #b7c9ff;outline-offset:1px}
.page-count{color:#afbdd8;font-size:11px;white-space:nowrap}
.pdf-stage{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;background:radial-gradient(circle at 50% 25%,#4c5369 0%,#2c344b 70%,#222838 100%);position:relative;display:flex;align-items:stretch;justify-content:stretch;touch-action:pan-y pan-x}
.paper-surface{flex:0 0 auto;position:relative;align-self:center;margin:auto;min-height:5px;min-width:5px;perspective:1400px;transform-style:preserve-3d;box-shadow:0 16px 54px #070b18a3, 0 0 0 1px #f3f1e8aa;background:transparent}
.pdf-page-canvas{display:block;background:#fff;max-width:none;border-radius:1px}
.turn-sheet{position:absolute;z-index:2;inset:0 auto auto 0;pointer-events:none;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform;filter:drop-shadow(0 9px 8px #0005)}
.turn-sheet canvas{display:block}
.turn-sheet.forward{transform-origin:0 50%;animation:turnForward .42s ease-in forwards}
.turn-sheet.backward{transform-origin:100% 50%;animation:turnBackward .42s ease-in forwards}
@keyframes turnForward{0%{transform:rotateY(0);opacity:1}55%{opacity:1}68%{opacity:0}100%{transform:rotateY(-155deg);opacity:0}}
@keyframes turnBackward{0%{transform:rotateY(0);opacity:1}55%{opacity:1}68%{opacity:0}100%{transform:rotateY(155deg);opacity:0}}
.reader-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(330px,calc(100% - 36px));border-radius:14px;background:#131c32ea;border:1px solid #7484b166;color:#f3f6ff;text-align:center;padding:13px 18px;font-size:13px;line-height:1.5;box-shadow:0 12px 35px #05081180;pointer-events:none;z-index:5}
.reader-status.error{background:#401b32ee;border-color:#cc7185}
.reader-retry{position:absolute;top:calc(50% + 60px);left:50%;transform:translateX(-50%);z-index:6;white-space:nowrap}
.reader-hint{font-size:11px;padding:6px 8px}
@media(max-width:700px){
 .reader-toolbar{min-height:56px;gap:0;padding:4px 6px 5px}
 .reader-doc{display:none}
 .reader-tools{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 8px}
 .reader-nav{justify-content:center;flex-shrink:0}
 .reader-options{justify-content:center;flex-shrink:0}
 .reader-toolbar .icon-button{width:32px;height:34px;flex-shrink:0}
 .page-input-wrap input{width:44px}
 .zoom-label{width:32px}
 .reader-hint{font-size:10px;padding:5px 10px}
 .pdf-stage{min-height:0}
}
@media(max-width:390px){
 .reader-tools{gap:1px}
 .reader-toolbar .icon-button{width:30px;height:32px}
 .reader-options{gap:1px}
 .reader-nav{gap:1px}
 .reader-hint{font-size:9px}
}
@media(max-height:470px) and (orientation:landscape){
 .reader-hint{display:none}
 .reader-toolbar{padding-block:2px}
}
@media(prefers-reduced-motion:reduce){.turn-sheet.forward,.turn-sheet.backward{animation:none;display:none}}

/* COMIK v4 — responsive touch reader (PDF stays local to the user's device). */
.reader-screen,.reader-screen:fullscreen,.reader-screen:-webkit-full-screen{
  position:fixed;inset:0;width:100%;height:100dvh;max-height:100dvh;
  min-height:0;overflow:hidden;background:#151b2b;
}
.reader-screen:fullscreen,.reader-screen:-webkit-full-screen{height:100%;max-height:100%;}
.reader-screen.reader-immersive .reader-hint{display:none}
.reader-screen.reader-immersive .pdf-stage{flex:1}
.reader-toolbar{flex-shrink:0;position:relative;z-index:5;padding-top:max(5px,env(safe-area-inset-top));}
.pdf-stage{
  overflow:hidden;touch-action:none;overscroll-behavior:contain;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  position:relative;isolation:isolate;min-height:0;
}
.paper-surface{
  transform-origin:50% 50%;will-change:transform;
  -webkit-transform-style:preserve-3d;transform-style:preserve-3d;
  box-shadow:0 12px 40px #05091288,0 0 0 1px #f4f1e988;
}
.pdf-page-canvas{display:block;border-radius:0;pointer-events:none}
.turn-sheet{
  position:absolute;inset:0 auto auto 0;z-index:2;
  pointer-events:none;backface-visibility:hidden;
  transform-style:preserve-3d;-webkit-backface-visibility:hidden;
  will-change:transform,opacity;
  filter:none;
}
.turn-sheet::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#06091721 0%,transparent 22%,#f4efe923 52%,#0609172a 100%);
  mix-blend-mode:multiply;
}
.turn-sheet::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,#0008 0%,transparent 18%,transparent 82%,#0007 100%);
  opacity:0;animation:comikFoldLight .34s ease-in-out both;
}
.turn-sheet.forward{transform-origin:0 50%;animation:comikTurnForward .34s cubic-bezier(.2,.65,.28,1) both}
.turn-sheet.backward{transform-origin:100% 50%;animation:comikTurnBackward .34s cubic-bezier(.2,.65,.28,1) both}
@keyframes comikTurnForward{
  0%{transform:perspective(1300px) rotateY(0deg) skewY(0deg);opacity:1}
  46%{transform:perspective(1300px) rotateY(-75deg) skewY(-.5deg);opacity:.98}
  73%{transform:perspective(1300px) rotateY(-116deg) skewY(0deg);opacity:.7}
  100%{transform:perspective(1300px) rotateY(-168deg);opacity:0}
}
@keyframes comikTurnBackward{
  0%{transform:perspective(1300px) rotateY(0deg) skewY(0deg);opacity:1}
  46%{transform:perspective(1300px) rotateY(75deg) skewY(.5deg);opacity:.98}
  73%{transform:perspective(1300px) rotateY(116deg) skewY(0deg);opacity:.7}
  100%{transform:perspective(1300px) rotateY(168deg);opacity:0}
}
@keyframes comikFoldLight{0%,100%{opacity:0}50%{opacity:.75}}
@media(max-width:700px){
 .reader-toolbar{min-height:48px;padding-inline:max(3px,env(safe-area-inset-left)) max(3px,env(safe-area-inset-right));}
 .reader-tools{gap:2px 5px}
 .reader-hint{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 .turn-sheet.forward,.turn-sheet.backward{animation:none!important;display:none!important}
}

/* Keep the previous page visible while a non-cached page is being drawn. */
.reader-status:not(.error){top:auto;bottom:12px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 28px);padding:7px 15px;font-size:11px;opacity:.92}


/* COMIK v5: edge-to-edge phone reading without distorting page proportions. */
.pdf-stage{padding:0!important;overflow:hidden;position:relative;}
.paper-surface{
  position:absolute!important;top:50%;left:50%;
  margin:0!important;align-self:auto!important;flex:initial!important;
  transform-origin:50% 50%;
  /* JS keeps -50%/-50% in the transform for accurate centering + pan. */
}
.reader-toolbar .fit-active{background:#34496d;border-color:#7088cc;color:#e6efff}
@media(max-width:700px){
  .reader-hint{display:none}
  .reader-screen .pdf-stage{flex:1 1 0%;min-height:0;}
}

/* COMIK v6: nonlinear paper curl — the overlay bends with the reader's finger. */
.turn-curl-canvas{
 position:absolute;inset:0 auto auto 0;z-index:4;display:block;
 pointer-events:none;max-width:none;max-height:none;
 will-change:contents;contain:paint;
 backface-visibility:hidden;
}
.paper-surface.is-flipping{isolation:isolate;}
@media(prefers-reduced-motion:reduce){.turn-curl-canvas{display:none!important;}}

/* COMIK v8.1: ikon mata untuk semua kolom password. */
.password-control{position:relative;width:100%;min-width:0}
.password-control>input{width:100%;padding-right:58px!important}
.password-visibility{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:42px;height:42px;padding:0;
  border:0;border-radius:10px;background:transparent;color:#b8c5ee;
  cursor:pointer;touch-action:manipulation;
}
.password-visibility svg{
  width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.password-visibility:hover{background:#6572b52d;color:#fff}
.password-visibility:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.password-visibility .visibility-slash{display:none}
.password-visibility[aria-pressed="true"] .visibility-slash{display:block}
.password-control input::-ms-reveal,.password-control input::-ms-clear{display:none}

/* COMIK v8.2: Akses menu ganti password khusus Master Admin. */
.admin-password-toolbar{display:flex;justify-content:flex-end;align-items:center;margin:-4px 0 18px}
.admin-password-toolbar .secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;max-width:100%;text-align:center}
.admin-password-toolbar svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:500px){.admin-password-toolbar .secondary-btn{width:100%;font-size:13px}}


/* COMIK v9: tema panel komik + figur hero transparan.
   Background hanya di lapisan aplikasi; PDF.js selalu memakai latar solid dan tetap terbaca. */
.app {
  background-color:#0c142b;
  background-image:
    linear-gradient(135deg,rgba(7,12,28,.58) 0%,rgba(9,16,34,.57) 48%,rgba(7,13,30,.76) 100%),
    url('../img/hero-overlay.webp'),
    url('../img/neon-panel.webp');
  background-size:cover, min(980px,96vw) auto, cover;
  background-position:center,center 43%,center center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.header{background:rgba(9,15,34,.92);border-bottom-color:#667caf65;backdrop-filter:blur(9px)}
.brand-logo{display:block;width:44px;height:44px;flex:none;object-fit:contain;border-radius:13px;box-shadow:0 5px 17px #0006}
/* Login/aktivasi tetap memiliki bidang gelap yang kontras di atas ilustrasi. */
.auth-layout{position:relative}
.auth-card{background:linear-gradient(150deg,rgba(21,32,58,.97),rgba(13,22,43,.98));border-color:#7a87be80;box-shadow:0 25px 80px #0009;backdrop-filter:blur(12px)}
.login-brand{display:flex;justify-content:center;align-items:center;margin:1px 0 17px}
.login-brand img{display:block;width:104px;height:104px;object-fit:contain;border-radius:23px;filter:drop-shadow(0 8px 18px #030815aa)}
#loginScreen .auth-card{gap:10px}
#loginScreen .stack-form{gap:9px}
#loginScreen .auth-card>p{margin:7px 0 5px}
/* Beranda sengaja hanya menampilkan tombol unggah, tanpa blok judul/panduan. */
.home-screen{padding:clamp(22px,5vw,55px);gap:0}
.home-screen .file-panel{background:rgba(16,28,57,.91);border-color:#88aff6b0;box-shadow:0 20px 60px #0009;backdrop-filter:blur(12px);width:min(350px,100%);min-width:0;padding:30px 22px 22px}
.home-screen .upload-tile{box-shadow:0 13px 44px #4d5aff66;transition:transform .18s ease,filter .18s ease}
.home-screen .upload-tile:focus-visible{outline:3px solid #92ddff;outline-offset:4px}
.home-screen .file-panel p{color:#e5edff;font-weight:600}
.admin-screen .section-head,.admin-password-toolbar,.admin-screen .table-wrap{background-color:rgba(15,25,49,.92);border-radius:14px}
.admin-screen .section-head{padding:17px;border:1px solid #627ca255}
.admin-screen .admin-password-toolbar{background:transparent}
.admin-screen .table-wrap{background:rgba(15,25,49,.95)}
/* Pengguna membaca halaman PDF di atas latar buram solid; hero tidak tembus ke kanvas. */
.reader-screen,.reader-screen:fullscreen,.reader-screen:-webkit-full-screen{background:#11172a}
.reader-screen .pdf-stage{background:radial-gradient(circle at 50% 23%,#3b4358,#151d31 75%,#101526 100%)}
/* Popup konfirmasi aktivasi dengan tombol WA yang jelas. */
.contact-admin-dialog{width:min(440px,calc(100% - 28px));padding:clamp(21px,4vw,30px)}
.contact-admin-content{display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center}
.contact-admin-symbol{display:grid;place-items:center;width:52px;height:52px;background:#ffd47c24;border:1px solid #ffda8e84;border-radius:15px;font-size:30px;font-weight:800;color:#ffdc91}
.contact-admin-content h2{margin:0;font-size:23px}
.contact-admin-content p{margin:0}
.contact-admin-phone{font-weight:800;color:#e9edff;letter-spacing:.04em}
.contact-admin-dialog .dialog-actions{width:100%;display:flex;align-items:stretch;justify-content:center;gap:10px;margin-top:8px}
.contact-admin-dialog .dialog-actions>*{flex:1 1 0;white-space:normal}
.contact-admin-link{display:flex;align-items:center;justify-content:center;text-decoration:none;line-height:1.4}
.contact-admin-link:hover{filter:brightness(1.09)}
.contact-admin-link:focus-visible{outline:3px solid #c0f1ff;outline-offset:2px}
@media(max-width:650px){
  .brand-logo{width:37px;height:37px;border-radius:11px}
  .app{background-size:cover,min(850px,135vw) auto,cover;background-position:center,center 45%,center center;background-attachment:scroll}
  .home-screen{padding:22px 16px 8vh}
  .contact-admin-dialog .dialog-actions{flex-direction:column-reverse}
  .contact-admin-dialog .dialog-actions>*{min-height:45px}
}

/* COMIK v10: fullscreen viewport (CSS fallback on mobile/iOS), tombol masuk layar penuh. */
html,body,#app{width:100%;min-height:100%;min-height:100dvh}
#app:fullscreen{width:100%;height:100%;overflow:auto}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto;min-width:0}
#appFullscreenButton{display:inline-grid}
#appFullscreenButton[aria-pressed="true"]{border-color:#85b9ff;background:#32466c}
@media(max-width:650px){.header-actions{gap:5px}.header-right{gap:4px}#appFullscreenButton{width:34px;height:34px}}

/* COMIK v11 — popup Pustaka dengan suasana rak buku kayu, ramah HP/tablet. */
.library-launch{color:#bcefe2!important;border-color:#76d8b35a!important;background:#1f493f88!important;flex:none}
.library-launch svg,.library-heading-icon svg{stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.library-launch:hover{background:#267a60a8!important;transform:translateY(-1px)}
.library-dialog{border:1px solid #866746;max-width:1100px;width:min(1100px,calc(100% - 22px));height:min(89dvh,850px);max-height:calc(100dvh - 24px);padding:0;color:#f6eee0;background:#1d1719;border-radius:23px;box-shadow:0 30px 110px #000b,0 0 0 5px #211815;overflow:hidden}
.library-dialog::backdrop{background:#03070fce;backdrop-filter:blur(9px)}
.library-shell{display:flex;flex-direction:column;height:100%;min-height:0;background:linear-gradient(160deg,#292127,#241a1a 65%,#1e1718)}
.library-topbar{padding:17px clamp(15px,3vw,30px);display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #b88b5960;background:linear-gradient(120deg,#402b27,#261e22 70%);flex-shrink:0}
.library-heading{display:flex;align-items:center;gap:13px;min-width:0}
.library-heading h2{font-size:clamp(20px,3.5vw,30px);font-weight:850;line-height:1.13;margin:0;color:#ffedcb;letter-spacing:.012em}
.library-heading p{font-size:12px;color:#d4b8a0;margin:5px 0 0;line-height:1.35}
.library-heading-icon{width:46px;height:46px;flex:none;border:1px solid #ccaa6e77;border-radius:13px;background:linear-gradient(140deg,#876241,#49342e);color:#fff0cf;display:grid;place-items:center;box-shadow:inset 0 1px #ffe0aa40}
.library-heading-icon svg{width:25px;height:25px}
.library-top-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex:none}
.library-x{width:40px;height:40px;border:1px solid #a0877555;border-radius:12px;color:#ffe8d3;background:#ffffff12;font-size:27px;line-height:1;display:grid;place-items:center}
.library-x:hover{background:#984e47}
.library-add-btn{font-size:13px;font-weight:800;border:1px solid #73e3b0;background:linear-gradient(130deg,#249976,#166c59);color:#fff;padding:10px 14px;border-radius:10px;white-space:nowrap}
.library-add-btn:hover{filter:brightness(1.12)}
.library-scroll{overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;padding:20px clamp(12px,2.5vw,27px) 34px;background:radial-gradient(ellipse at 50% -30%,#8c614044,transparent 65%),linear-gradient(90deg,#120f15,#2e2524 12%,#322525 89%,#110d14);scrollbar-color:#845f45 #271e20}
.library-rack{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:22px 14px;align-items:stretch;min-height:180px}
.library-book{min-width:0;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;position:relative;isolation:isolate;padding:12px 6px 18px;background:linear-gradient(90deg,#35272725,transparent 20%,#faf0ca09 49%,transparent 82%,#160f1177);border-radius:10px 10px 3px 3px}
.library-book:before{content:"";position:absolute;z-index:-1;left:-6px;right:-6px;bottom:5px;height:19px;background:linear-gradient(#b78a51 0%,#69472d 30%,#3b261d 75%,#1a1110 100%);box-shadow:0 11px 14px #080508b0,0 -2px 0 #e3b87855;border-radius:2px}
.library-book:after{content:"";position:absolute;z-index:-2;bottom:-13px;left:-6px;right:-6px;height:16px;border-radius:0 0 4px 4px;background:linear-gradient(#251714,#140e11);box-shadow:0 9px 14px #0009}
.library-book-link{display:flex;align-items:center;flex-direction:column;gap:9px;width:100%;text-decoration:none;min-width:0;position:relative;z-index:1;outline-offset:5px}
.library-book-cover{position:relative;width:100%;max-width:155px;height:205px;display:flex;align-items:flex-end;justify-content:center;transition:transform .22s ease,filter .22s ease;filter:drop-shadow(7px 8px 7px #080609b0)}
.library-book-cover:before{content:"";position:absolute;z-index:2;inset:0 auto 0 0;width:8px;background:linear-gradient(90deg,#0009,#fff3,#0003);pointer-events:none}
.library-book-cover img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px 6px 3px 3px;background:#6c5660;border:1px solid #eed0a455;box-shadow:inset 2px 0 6px #0008}
.library-book-link:hover .library-book-cover,.library-book-link:focus-visible .library-book-cover{transform:translateY(-9px) rotate(-2deg) scale(1.03);filter:drop-shadow(9px 13px 10px #000e)}
.library-book-arrow{position:absolute;z-index:3;right:7px;top:7px;width:27px;height:27px;border-radius:50%;background:#0a352bdc;color:#dbfff1;font-size:17px;display:grid;place-items:center;border:1px solid #baf2d477}
.library-book-name{font-size:13px;line-height:1.35;text-align:center;color:#ffeed7;font-weight:800;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px;max-width:100%;text-shadow:0 2px 3px #090707}
.library-book-admin{z-index:2;display:flex;justify-content:center;gap:7px;min-height:27px;margin-top:8px}
.library-book-admin button{width:31px;height:28px;color:#fff4e0;background:#5b473f;border:1px solid #d8aa8569;border-radius:7px;font-size:18px;line-height:1}
.library-book-admin button:hover{background:#977044}
.library-book-admin button.delete:hover{background:#9a3f45}
.library-footer{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:11px 20px;border-top:1px solid #936e4566;color:#dbc6a8;background:#261c1b;flex-shrink:0;font-size:12px}
.library-empty{margin:clamp(30px,8vh,90px) auto;text-align:center;display:grid;justify-items:center;gap:9px;color:#efdcc3}
.library-empty span{font-size:52px}.library-empty strong{font-size:19px}.library-empty p{font-size:13px;max-width:320px;color:#c6af99;margin:0}
.library-add-form{margin:0;padding:15px 21px 18px;max-height:47%;overflow-y:auto;flex-shrink:0;background:linear-gradient(120deg,#263b39,#172d2b);border-bottom:1px solid #6dd2b973;display:grid;gap:9px}
.library-add-form label{font-size:13px;font-weight:800;color:#ecf8f0}
.library-add-form input[type=file],.library-edit-dialog input[type=file]{width:100%;max-width:100%;border:1px dashed #78b8a4;border-radius:10px;padding:9px;background:#153630;color:#e3fff3}
.library-caption{font-size:12px;color:#b2d7ca;margin:0}
.library-drafts{display:grid;gap:9px;max-height:280px;overflow-y:auto}
.library-draft{display:flex;align-items:center;gap:11px;background:#112b28;border:1px solid #689c8870;border-radius:11px;padding:9px}
.library-draft img{width:46px;height:65px;object-fit:cover;border-radius:4px;flex:none}
.library-draft-fields{display:grid;gap:6px;flex:1;min-width:0}
.library-draft-fields input,.library-edit-dialog input:not([type=file]){width:100%;min-width:0;border:1px solid #a5b7b8a0;color:#f7f7fa;background:#132a31;border-radius:7px;padding:9px 10px;font-size:13px}
.library-draft-fields input:focus-visible,.library-edit-dialog input:focus-visible{outline:2px solid #56e6af}
.library-remove-draft{background:#702d34;border:0;border-radius:7px;color:white;align-self:start;font-size:22px;line-height:1;min-width:28px;height:29px}
.library-form-actions{display:flex;justify-content:flex-end;gap:9px}
.library-form-actions .primary-btn,.library-form-actions .secondary-btn{font-size:13px;padding:9px 15px}
.library-edit-dialog{width:min(500px,calc(100% - 20px));background:#243032;color:#f5f7f5;border-color:#51816c}
.library-edit-dialog::backdrop{background:#000a}
@media(max-width:650px){
  .library-dialog{width:calc(100% - 10px);height:calc(100dvh - 20px);max-height:calc(100dvh - 20px);border-radius:16px}
  .library-topbar{padding:12px 11px}
  .library-heading{gap:7px}.library-heading-icon{width:36px;height:36px;border-radius:10px}.library-heading-icon svg{width:20px;height:20px}
  .library-heading h2{font-size:19px}.library-heading p{font-size:10px}
  .library-add-btn{padding:8px 9px;font-size:11px}.library-x{width:33px;height:34px;font-size:22px}
  .library-rack{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}
  .library-book-cover{max-width:136px;height:175px}.library-book-name{font-size:12px}
  .library-scroll{padding:16px 13px 30px}.library-footer{padding:9px 12px;font-size:10px}
  .library-add-form{max-height:53%;padding:12px}
}
@media(max-width:380px){.library-rack{grid-template-columns:repeat(2,minmax(0,1fr))}.library-book-cover{max-width:118px;height:158px}.library-book{padding-inline:2px}.library-heading p{display:none}.library-add-btn{font-size:10px}.library-footer span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.library-book-cover{transition:none}}

/* Identitas Digital tetap terbaca di header HP. */
@media(max-width:650px){.brand small{display:block;font-size:10px;line-height:1.1;color:#a9c9cb}.brand span{min-width:0}.brand{flex-shrink:1}}

/* COMIK v13 — panel manajemen aplikasi untuk Master Admin. */
.app-management-screen{width:min(1150px,100%);margin-inline:auto}
.app-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.app-settings-card{min-width:0;padding:23px;border-radius:18px;border:1px solid #63779d67;background:rgba(16,26,51,.94);box-shadow:0 12px 32px #0003}
.app-settings-card h2{margin:4px 0 9px;font-size:21px}
.app-settings-card label[for="menuUserSelect"]{display:block;margin:18px 0 7px;font-weight:650;font-size:13px}
.app-settings-eyebrow{color:#9edddf;font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.app-settings-help{font-size:13px;min-height:40px;margin-bottom:15px}
.app-feature-row{display:flex;align-items:center;gap:14px;padding:14px;margin:10px 0;border:1px solid #63749b59;border-radius:12px;background:#2636548c;cursor:pointer}
.app-feature-row:has(input:disabled){opacity:.65;cursor:not-allowed}
.app-feature-row input[type="checkbox"]{width:20px;height:20px;flex:0 0 20px;accent-color:#7779fa;cursor:pointer}
.app-feature-row strong{display:block;font-size:14px;line-height:1.35}
.app-feature-row small{display:block;color:#b1c1dc;font-size:12px;line-height:1.4;margin-top:3px}
.app-settings-card form{display:flex;flex-direction:column}
.app-save-button{margin-top:18px;align-self:stretch;min-height:44px}
.app-save-button:disabled{opacity:.5;cursor:not-allowed}
.app-user-select{width:100%;border:1px solid #5d719b;border-radius:10px;background:#1d2a48;color:#fff;padding:11px 12px;min-height:43px;font:inherit}
.app-mode-group{padding:13px;border:1px solid #63749b59;border-radius:11px;margin:15px 0 5px}
.app-mode-group legend{font-size:12px;font-weight:700;color:#c0ccea;padding:0 5px}
.app-mode-group label{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:13px;cursor:pointer}
.app-mode-group input{accent-color:#7779fa;width:17px;height:17px}
.app-menu-preview{margin:8px 0 0;color:#b4e9df;font-size:12px;min-height:38px}
.app-settings-footnote{margin:18px 4px}
.home-menu-notice{max-width:400px;margin:0 auto;text-align:center;padding:23px;border-radius:14px;border:1px solid #60789b7a;background:#1a2949d9;color:#dce7ff;font-weight:550}
@media(max-width:800px){.app-settings-grid{grid-template-columns:minmax(0,1fr)}.app-settings-help{min-height:0}}
@media(max-width:500px){.app-management-screen{padding:14px 12px}.app-settings-card{padding:16px}.app-feature-row{gap:10px;padding:12px}}

/* Flipo V14 — Login email / Master Admin + popup persetujuan */
.login-heading{font-size:24px!important;margin:0 0 3px!important;text-align:center}
.login-explanation{font-size:12px;text-align:center;line-height:1.5}
.master-login-shortcut{padding-top:7px;margin:0!important;border-top:1px solid var(--line)}
.pending-activation-dialog{width:min(560px,calc(100% - 22px));max-height:84dvh;overflow-y:auto;padding:22px}
.pending-activation-head{display:flex;align-items:center;gap:15px;margin-bottom:17px}
.pending-activation-head .accent-icon{flex:0 0 48px}
.pending-activation-head h2{margin:0 0 4px;font-size:20px}
.pending-activation-head p{margin:0}
.pending-activation-list{display:grid;gap:10px;max-height:45dvh;overflow-y:auto}
.pending-activation-item{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:11px;border:1px solid var(--line);border-radius:12px;background:#121d38}
.pending-activation-detail{min-width:0;display:grid;gap:3px}
.pending-activation-detail strong{font-size:14px;overflow-wrap:anywhere}
.pending-activation-detail small{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.pending-activation-item .primary-btn{padding:9px 12px;flex:none;font-size:12px}
.pending-activation-content>.dialog-actions{margin-top:18px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px}
@media(max-width:450px){.pending-activation-dialog{padding:16px}.pending-activation-head h2{font-size:17px}.pending-activation-item{flex-wrap:wrap}.pending-activation-item .primary-btn{width:100%}}