/* STC XXI Technical Report - stylesheet gabungan (urutan cascade sama dengan versi sebelumnya).
   Berisi: style.css, style-polish, style-dash, style-dash2, style-reference, style-redesign,
   style-sidebar, style-ux, style-compact, style-final, style-harmoni, style-mode-final, style-final-fix. */

/* ===== bagian: style.css ===== */
/* STC XXI Technical Report - sistem desain "Ruang Proyeksi" (frontend saja) */
:root{
 color-scheme:light;
 --moss-950:#04170f;--moss-900:#082418;--moss-800:#0d3626;--moss-700:#14503a;--moss-600:#1b6a4d;--moss-500:#2a8a65;
 --gold:#b8913f;--gold-hi:#e1c476;--gold-lo:#7c6024;--gold-50:#fbf5e4;--gold-100:#efdfae;
 --bg:#eef1ee;--card:#fff;--card2:#f6f8f6;--bd:#dce3de;--bd2:#c5d0c9;
 --ink:#0b1c14;--txt:#1b2d24;--mut:#5b6d63;--ph:#93a39a;--lbl:#2c4137;
 --g50:#edf3ef;--g100:#dde9e2;--g200:#bfd5c8;--row2:#f6f9f7;--dis:#f0f3f1;
 --gt:#0d3626;--gt2:#1b6a4d;
 --brass:var(--gold);--brass-l:var(--gold-100);--brass-d:var(--gold-lo);--brass-50:var(--gold-50);
 --red:#b3261e;--red-bg:#fdeceb;--ok:#17703f;--ok-bg:#e1f2e7;--warn:#8a5a00;--warn-bg:#fdf0cf;--info:#1a5aa5;--info-bg:#e3edfa;
 --r-s:8px;--r-m:14px;--r-l:22px;
 --sh1:0 1px 2px #08241812;--sh2:0 24px 60px #08241833;
 --font:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
 --safe-b:env(safe-area-inset-bottom,0px);--tabh:calc(64px + var(--safe-b));
}
:root[data-theme=dark]{
 color-scheme:dark;
 --bg:#060c09;--card:#0d1612;--card2:#111d17;--bd:#1b2b22;--bd2:#2a3f33;
 --ink:#eef4f0;--txt:#cfdcd4;--mut:#8a9f94;--ph:#5f7569;--lbl:#b2c5ba;
 --g50:#101c16;--g100:#16261d;--g200:#2a4a39;--row2:#0f1a14;--dis:#121f18;
 --gt:#b5e0c9;--gt2:#6fd0a0;
 --gold-50:#221d0d;--gold-100:#5e4b1b;--gold-lo:#e1c476;
 --red:#ff8a80;--red-bg:#361512;--ok:#6fd0a0;--ok-bg:#10291c;--warn:#f0c15c;--warn-bg:#2f2406;--info:#8ab8f0;--info-bg:#10243c;
 --sh1:0 1px 2px #000a;--sh2:0 24px 60px #000c;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:14.5px/1.55 var(--font);color:var(--txt);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:root[data-theme=dark] body{background:radial-gradient(1200px 520px at 80% -10%,#0f2a1d 0,transparent 60%),var(--bg);background-attachment:fixed}
.hidden{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
td,.n,.cd b,.cdl,#clock,.dsr strong{font-variant-numeric:tabular-nums}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(10px)}}
@keyframes sheet{from{transform:translateY(40px);opacity:.6}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sh{to{background-position:-200% 0}}
@keyframes flick{0%{opacity:.85}8%{opacity:.6}10%{opacity:1}34%{opacity:.8}36%{opacity:1}64%{opacity:.7}66%{opacity:.95}100%{opacity:.85}}
@keyframes sceneIn{from{opacity:0}}
@keyframes lensOn{from{opacity:0;transform:translate(-50%,-50%) scale(.4)}}
@keyframes beamOn{from{opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes sweep{from{opacity:0;transform:translateX(-30px)}}
@keyframes tpop{from{opacity:0;transform:translate(-50%,10px)}}
@keyframes lok{to{opacity:0;transform:translateY(-8px) scale(.98)}}
@keyframes appin{from{opacity:0}}
.rl{transform-box:fill-box;transform-origin:center;animation:spin 3s linear infinite}

/* ---------- tombol ---------- */
button{font:inherit;cursor:pointer;border:0;border-radius:11px;padding:10px 18px;min-height:42px;transition:background .16s,border-color .16s,box-shadow .16s,color .16s,transform .16s}
button:active{transform:scale(.98)}
.btn{background:linear-gradient(180deg,var(--moss-600),var(--moss-700));color:#fff;font-weight:700;box-shadow:0 1px 0 #ffffff26 inset,0 6px 16px -6px #0d362699}
.btn:hover{background:linear-gradient(180deg,#22805c,var(--moss-600));box-shadow:0 1px 0 #ffffff30 inset,0 10px 22px -8px #0d3626b0}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sec{background:var(--card);color:var(--gt);border:1px solid var(--bd2);font-weight:600;box-shadow:none}
.btn.sec:hover{background:var(--g50);border-color:var(--gt2)}
.btn.sec:disabled{opacity:.45}
td button,.macts button{min-height:36px;padding:6px 14px;font-size:13px}
button.lnk{background:none;border:0;min-height:0;padding:4px 2px;color:var(--gt2);font-weight:700;font-size:13px;border-radius:6px}
button.lnk:hover{color:var(--gold-lo);text-decoration:underline}
:root[data-theme=dark] .btn{background:linear-gradient(180deg,#1f7a58,#175f45)}
:root[data-theme=dark] .btn:hover{background:linear-gradient(180deg,#27916a,#1f7a58)}
:root[data-theme=dark] .btn.sec{background:var(--card);box-shadow:none;color:var(--gt)}
:root[data-theme=dark] .btn.sec:hover{background:var(--g100);border-color:var(--gt2)}
:root[data-theme=dark] .sact .btn.sec{background:#ffffff0d}
:root[data-theme=dark] .sact .btn.sec:hover{background:#ffffff1c}
.btn.prog{background:linear-gradient(90deg,#2fa476 var(--p,0%),var(--moss-700) var(--p,0%));transition:background .25s}
.btn.prog:disabled{opacity:.9}

/* ---------- form ---------- */
input,select,textarea{font:inherit;width:100%;padding:10px 13px;border:1px solid var(--bd2);border-radius:11px;min-height:44px;background:var(--card);color:var(--txt);transition:border-color .16s,box-shadow .16s}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{color:var(--ph)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px #b8913f33}
input:disabled{background:var(--dis)}
input[type=file]{padding:9px;background:var(--g50);border:1.5px dashed var(--g200);color:var(--mut)}
input[type=file]::file-selector-button{font:inherit;font-weight:700;border:0;background:var(--moss-700);color:#fff;border-radius:8px;padding:8px 14px;margin-right:12px;cursor:pointer}
input[type=checkbox]{accent-color:var(--moss-600)}
label{display:block;font-weight:600;margin:14px 0 6px;color:var(--lbl);font-size:13px}
h2{margin:0 0 12px;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:0}
#view>h2:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:-1px;padding:0;border:0;white-space:nowrap}
small{color:var(--mut)}

/* ---------- login ---------- */
#login{position:relative;min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1.1fr 1fr}
.lhero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 28% 18%,#14583f 0,#0a2d20 40%,#040f0a 100%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center}
.lhero::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,#ffffff05 0 2px,transparent 2px 24px);z-index:0}
.lhero>*{position:relative;z-index:2}
.lhero>.lscene{z-index:auto}
.lhero .llogo{width:min(220px,52%);margin:0 0 6px}
.lscene{position:relative;width:min(600px,94%);margin:8px 0 14px;background:radial-gradient(closest-side at 56% 52%,#2f8f69 0,#17684b 48%,transparent 100%)}
.lhero .lphoto{display:block;width:100%;height:auto;margin:0;mix-blend-mode:multiply;filter:brightness(1.4) contrast(1.06);animation:sceneIn 1.3s .1s both}
.lbeam{position:absolute;z-index:2;left:78%;top:45%;width:78%;height:105%;transform:translateY(-50%);clip-path:polygon(0 48%,100% 8%,100% 92%,0 52%);background:linear-gradient(90deg,rgba(255,236,190,.42),rgba(255,236,190,.04) 85%,transparent);pointer-events:none;animation:beamOn 1s 1s both,flick 3.4s 2s infinite steps(1)}
.lglow{position:absolute;z-index:2;left:78%;top:45%;width:96px;height:96px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,246,220,.95),rgba(255,236,190,.34) 42%,transparent 70%);pointer-events:none;animation:lensOn 1.5s .7s both}
.lscene.x{min-height:120px}.lscene.x .lbeam,.lscene.x .lglow{display:none}
.lhero h1{margin:2px 0 0;font-family:var(--serif);font-size:38px;font-weight:500;letter-spacing:.01em;line-height:1.1}
.lhero .sub{margin:12px 0 0;color:var(--gold-hi);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.lhero .tag{margin-top:22px;color:#a9c7ba;font-size:14px;max-width:340px}
.lpane{display:flex;align-items:center;justify-content:center;padding:32px;background:var(--card)}
:root[data-theme=dark] .lpane{background:var(--bg)}
.lbox{width:100%;max-width:390px;animation:pop .6s .9s both}
.lbox .hello{color:var(--gold-lo);font-size:13.5px;font-weight:700;margin-bottom:6px}
.lbox h2{font-family:var(--serif);font-size:34px;font-weight:500;margin-bottom:8px;line-height:1.1;letter-spacing:0}
.lbox p{color:var(--mut);margin:0 0 12px}
.pw{display:flex;gap:8px}.pw button{white-space:nowrap}
#lerr{color:var(--red);min-height:22px;margin:10px 0 0;font-size:13.5px}
.lfoot{margin-top:26px;color:var(--ph);font-size:12px;text-align:center}
#login.ok .lbox{animation:lok .55s ease both}
#login.ok #lbtn{background:var(--ok)!important;color:#fff}
.thm{min-height:38px;min-width:38px;width:38px;padding:0;border-radius:11px;background:var(--card);color:var(--gt);border:1px solid var(--bd2);font-size:17px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.thm:hover{border-color:var(--gold)}
.lthm{position:absolute;top:14px;right:14px;z-index:5}

/* ---------- rangka aplikasi ---------- */
#app{display:flex;min-height:100vh}
#app.enter{animation:appin .5s ease both}
#side{width:260px;flex:none;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;color:#fff;background:linear-gradient(180deg,#0a2a1e 0,#05140e 50%,#020806 100%);box-shadow:inset -1px 0 0 #b8913f40}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:24px 22px 18px;border-bottom:1px solid #ffffff12}
.brand img{width:92px;display:block}
.brand b{display:block;color:#fff;font-size:14px;font-weight:700;line-height:1.2}
.brand small{display:block;color:#8fb3a2;font-size:11.5px;line-height:1.3;margin-top:2px}
#nav{flex:1;padding:6px 12px 12px;overflow:auto;scrollbar-width:thin;scrollbar-color:#ffffff22 transparent}
.ng{margin:20px 12px 6px;font-size:12px;font-weight:700;color:var(--gold-hi);opacity:.8}
#nav a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:11px;color:#bdd4c8;cursor:pointer;min-height:42px;margin-bottom:2px;position:relative;font-size:14px;font-weight:500;transition:background .16s,color .16s,padding .16s}
#nav a i{display:flex;opacity:.85}
#nav a:hover{background:#ffffff10;color:#fff;padding-left:15px}
#nav a.on{background:linear-gradient(90deg,#b8913f33,#ffffff0d);color:#fff;font-weight:700}
#nav a.on i{color:var(--gold-hi);opacity:1}
#nav a.on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--gold)}
#nav a.soon{opacity:.7}
#nav a .sb{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--moss-950);background:var(--gold-100);border-radius:99px;padding:2px 8px}
svg.ic{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sfoot{padding:12px;border-top:1px solid #ffffff14}
.sme{display:flex;align-items:center;gap:10px;padding:4px 6px 12px}
.sme b{display:block;color:#fff;font-size:13.5px;line-height:1.25;word-break:break-word}
.av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#e1c476,#9a7b3f);color:#1b1405;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.badge{display:inline-block;margin-top:3px;background:#ffffff18;color:var(--gold-hi);border-radius:99px;padding:1px 9px;font-size:11px;font-weight:700}
.sact{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sact .btn.sec{background:#ffffff0d;color:#e6f1ea;border:1px solid #ffffff22;min-height:38px;padding:6px 10px;font-size:13px}
.sact .btn.sec:hover{background:#ffffff1c;border-color:#ffffff44}
#main{flex:1;min-width:0;display:flex;flex-direction:column}
header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;height:60px;padding:0 28px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--bd)}
.hlogo{display:none}
.hs{flex:1;min-width:0}
.hs b{display:block;font-size:13.5px;font-weight:700;color:var(--mut);line-height:1.25}
.hs small{display:none}
.clk{display:flex;align-items:center;gap:12px}
#clock{font-size:12.5px;color:var(--mut);font-weight:600}
#conn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ok);background:var(--ok-bg);border-radius:99px;padding:4px 11px}
#conn::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
#conn.bad{color:var(--red);background:var(--red-bg)}
#view{padding:22px 28px 28px;max-width:1280px;width:100%}
#view>*:not(.bar){animation:fade .3s both}
#cp{margin-top:auto;padding:18px 16px 22px;text-align:center;font-size:12px;color:var(--mut)}
#shade{display:none}#tabs{display:none}

/* ---------- tombol tutup/buka menu samping (desktop) ---------- */
.sbtn{flex:none}
@media(min-width:821px){
 #side{transition:margin-left .28s cubic-bezier(.2,.8,.2,1),visibility 0s}
 body.sb-off #side{margin-left:-260px;visibility:hidden;transition:margin-left .28s cubic-bezier(.2,.8,.2,1),visibility 0s .28s}
 body.sb-off #view{max-width:1500px}
 body.sb-off #phero{max-width:1444px}
}
/* ---------- banner halaman ---------- */
#phero{position:relative;overflow:hidden;margin:22px 28px 0;max-width:1224px;border-radius:var(--r-l);min-height:150px;color:#fff;display:flex;align-items:flex-end;isolation:isolate;animation:rise .45s both}
#phero.ph-a{background:radial-gradient(120% 160% at 100% 0,#1a6a4c 0,#0d3626 45%,#04140d 100%)}
#phero.ph-b{background:radial-gradient(120% 160% at 0 100%,#4a3a14 0,#0d3626 40%,#04140d 100%)}
#phero.ph-g{background:radial-gradient(120% 160% at 100% 100%,#6a5420 0,#123d2c 42%,#04140d 100%)}
#phero.ph-w{background:radial-gradient(120% 160% at 100% 0,#6a4a12 0,#14352a 45%,#04140d 100%)}
#phero::after{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(135deg,#ffffff05 0 2px,transparent 2px 24px);pointer-events:none}
.ph-img{position:absolute;z-index:-1;right:0;top:0;bottom:0;width:52%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.ph-img img{display:block;width:100%;height:100%;object-fit:cover;filter:drop-shadow(0 18px 24px #000a);animation:sceneIn 1s both}
.ph-t{display:flex;align-items:flex-end;gap:16px;padding:26px 30px}
.ph-t i{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;background:#ffffff14;border:1px solid #b8913f80;color:var(--gold-hi);flex:none;margin-bottom:4px}
.ph-t h1{margin:0;font-family:var(--serif);font-size:36px;font-weight:500;line-height:1.1;letter-spacing:.005em}
.ph-t p{margin:6px 0 0;color:#b9d2c6;font-size:14px;max-width:520px}

/* ---------- dashboard ---------- */
.dh{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.dh-main{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-l);min-height:350px;color:#fff;display:flex;align-items:flex-end;padding:36px;background:radial-gradient(90% 120% at 85% 10%,#1d7452 0,#0d3626 42%,#030d08 100%);animation:rise .5s both}
.dh-main::after{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(135deg,#ffffff05 0 2px,transparent 2px 24px)}
.dh-img{position:absolute;z-index:-1;right:2%;top:50%;width:54%;transform:translateY(-54%);animation:rise .9s .1s both}
.dh-img img{display:block;width:100%;height:auto;filter:drop-shadow(0 34px 38px #000c) drop-shadow(0 0 60px #2a8a6540)}
.lens-glow{position:absolute;left:76.4%;top:62.1%;width:64%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(210,232,255,.6) 0,rgba(125,178,255,.3) 13%,rgba(60,120,220,.11) 34%,transparent 62%);mix-blend-mode:screen;pointer-events:none;animation:lensPulse 4.5s ease-in-out infinite}
.lens-flare{position:absolute;left:76.4%;top:62.1%;width:58%;height:2px;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,rgba(195,222,255,.7) 50%,transparent);filter:blur(1px);mix-blend-mode:screen;pointer-events:none}
@keyframes lensPulse{0%,100%{opacity:.78;transform:translate(-50%,-50%) scale(.96)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}
.dh-main::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#03100a 0,#03100acc 34%,transparent 62%)}
.dh-t{max-width:56%;animation:rise .6s .2s both}
.dh-t small{display:block;color:var(--gold-hi);font-weight:600;font-size:13px;margin-bottom:10px}
.dh-t h1{margin:0;font-family:var(--serif);font-weight:500;font-size:48px;line-height:1.04;letter-spacing:0}
.dh-t p{margin:14px 0 0;color:#b9d2c6;font-size:15px}
.dq{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-l);padding:18px 14px 14px;display:flex;flex-direction:column;gap:2px;animation:rise .5s .08s both}
.dq h2{font-family:var(--serif);font-size:20px;font-weight:500;margin:2px 8px 10px}
.qrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;color:var(--txt);padding:10px 10px;border-radius:13px;min-height:0}
.qrow i{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:var(--g50);color:var(--gt);flex:none;transition:background .16s,color .16s}
.qrow span{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.qrow b{font-size:14px;color:var(--ink)}
.qrow small{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qrow em{font-style:normal;font-size:20px;color:var(--ph);font-weight:300;transition:transform .16s,color .16s}
.qrow:hover{background:var(--g50)}
.qrow:hover i{background:var(--moss-700);color:var(--gold-hi)}
.qrow:hover em{color:var(--gold);transform:rotate(90deg)}
.ds{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:16px;margin-bottom:26px}
.ds>*{animation:rise .5s .16s both}
.ds-big{position:relative;overflow:hidden;border-radius:var(--r-l);padding:22px 24px;background:var(--card);border:1px solid var(--bd);display:flex;flex-direction:column;justify-content:space-between;min-height:176px}
.ds-big::before{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;border:1px solid var(--gold-100);box-shadow:0 0 0 14px transparent,0 0 0 15px var(--gold-100);opacity:.7}
.ds .l{font-size:13px;font-weight:700;color:var(--mut)}
.ds .n{font-family:var(--serif);font-size:84px;line-height:1;font-weight:500;color:var(--ink)}
.ds-list{border-radius:var(--r-l);padding:20px 22px;background:var(--card);border:1px solid var(--bd)}
.ds-list h2{font-size:13px;color:var(--mut);margin:0 0 6px}
.dsr{display:grid;grid-template-columns:96px 1fr 44px;align-items:center;gap:14px;width:100%;text-align:left;background:transparent;color:var(--txt);padding:12px 0;min-height:0;border-radius:0;border-bottom:1px solid var(--bd);font-weight:600}
.dsr:last-child{border-bottom:0}
.dsr i{display:block;height:8px;border-radius:99px;background:var(--g100);overflow:hidden}
.dsr i b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--moss-600),var(--gold));transform-origin:left;animation:grow .9s .3s both cubic-bezier(.2,.8,.2,1)}
@keyframes grow{from{transform:scaleX(0)}}
.dsr strong{font-family:var(--serif);font-size:24px;font-weight:500;text-align:right;color:var(--ink)}
.dsr:hover span{color:var(--gt2)}
.ds-st{position:relative;overflow:hidden;text-align:left;border-radius:var(--r-l);padding:22px 24px;min-height:176px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;font-weight:400}
.ds-st.good{background:linear-gradient(150deg,var(--moss-600),var(--moss-900))}
.ds-st.warn{background:linear-gradient(150deg,#9a6a10,#3d2a05)}
.ds-st .l{color:#ffffffcc}.ds-st .n{color:#fff}.ds-st small{color:#ffffffb8;font-size:13px}
.ds-st:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.dm{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;margin:0 0 26px}
.dm>div{min-width:0}
.sh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.sh h2{margin:0;font-family:var(--serif);font-size:22px;font-weight:500}
.dact{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-l);overflow:hidden}
.ai{display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--bd);transition:background .16s}
.ai:last-child{border-bottom:0}.ai:hover{background:var(--row2)}
.ai .kat{flex:none;min-width:122px;text-align:center}
.ai-m{flex:1;min-width:0;display:flex;flex-direction:column}
.ai-m b{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-m small{font-size:12.5px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-m);padding:18px}
.empty{background:var(--card);border:1.5px dashed var(--bd2);border-radius:var(--r-m);padding:34px 22px;text-align:center;color:var(--mut)}
.empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.sk{border-radius:12px;background:linear-gradient(90deg,var(--g100) 25%,var(--row2) 50%,var(--g100) 75%);background-size:200% 100%;animation:sh 1.3s linear infinite}
.info{background:var(--gold-50);border:1px solid var(--gold-100);color:var(--gold-lo);border-radius:12px;padding:10px 14px;margin:0 0 12px;font-size:13.5px}
.ann{border-left:4px solid var(--info);border-radius:4px var(--r-m) var(--r-m) 4px}
.ann-Penting{border-left-color:var(--warn)}.ann-Mendesak{border-left-color:var(--red)}
.pri{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 10px;border-radius:99px;background:var(--info-bg);color:var(--info)}
.pri.Penting{background:var(--warn-bg);color:var(--warn)}.pri.Mendesak{background:var(--red-bg);color:var(--red)}

.dchart{margin:0 0 26px}
.dc-b{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-l);padding:18px 22px 6px;overflow:hidden}
.dc-k{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.dc-k b{font-family:var(--serif);font-size:32px;font-weight:500;color:var(--ink)}
.dc-b svg{display:block;width:100%;height:150px;margin:0 0 6px}
.dc-b .ln{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.3s .2s ease-out forwards}
@media(prefers-reduced-motion:reduce){.dc-b .ln{stroke-dasharray:none;stroke-dashoffset:0}}
body>.fab,.fab{position:fixed!important;left:auto!important;top:auto!important;margin:0!important;right:max(14px,env(safe-area-inset-right,0px))!important;bottom:calc(var(--tabh) + 14px)!important;z-index:34!important;width:auto;flex:none;border-radius:99px;padding:10px 20px;min-height:48px;font-size:14.5px;box-shadow:0 10px 26px #0d3626a0,0 0 0 3px var(--bg);transform:translateZ(0);-webkit-transform:translateZ(0)}
.fab:active{transform:translateZ(0) scale(.97)}
/* ---------- peringatan logout otomatis ---------- */
#idle{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:18px;background:#030d08b0;backdrop-filter:blur(4px);animation:fade .2s both}
.idle-b{width:min(440px,100%);background:var(--card);border:1px solid var(--bd);border-top:3px solid var(--gold);border-radius:var(--r-l);padding:24px;box-shadow:var(--sh2);animation:pop .25s both}
.idle-b>b{display:block;font-family:var(--serif);font-size:24px;font-weight:500;color:var(--ink)}
.idle-b p{margin:8px 0 18px;color:var(--txt)}
.idle-b strong{font-family:var(--serif);font-size:24px;font-weight:500;color:var(--gold-lo)}
.idle-a{display:flex;gap:10px;flex-wrap:wrap}.idle-a .btn{flex:1 1 140px}
@media(max-width:820px){#idle{align-items:flex-end;padding:0}.idle-b{width:100%;border-radius:24px 24px 0 0;padding:22px 18px calc(22px + var(--safe-b))}}
/* ---------- tiket ATS ---------- */
.tk{--stub:212px;position:relative;display:flex;background:var(--card);border:1px solid var(--bd);border-radius:var(--r-m);margin-bottom:14px;transition:transform .2s,box-shadow .2s}
.tk:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.tk .tl{flex:1;min-width:0;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.tk .tl b{font-family:var(--serif);font-size:19px;font-weight:500;color:var(--ink);line-height:1.25}
.tk .tl .pri{align-self:flex-start}
.tk .tm{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.tk .tm small{display:block;font-size:11.5px}
.tk .tm span{font-size:13px;font-weight:600;color:var(--txt)}
.tk .tr{width:var(--stub);flex:none;padding:14px;display:flex;flex-direction:column;justify-content:center;background:var(--gold-50);border-left:2px dashed var(--gold-100);border-radius:0 var(--r-m) var(--r-m) 0}
.tk::before,.tk::after{content:"";position:absolute;right:calc(var(--stub) - 9px);width:18px;height:18px;border-radius:50%;background:var(--bg);border:1px solid var(--bd)}
.tk::before{top:-10px;border-top-color:transparent}.tk::after{bottom:-10px;border-bottom-color:transparent}
.cdl{color:var(--ink);font-size:13px;text-align:center}
.cdl>small{display:block;margin-bottom:7px;font-size:11.5px;font-weight:700;color:var(--gold-lo)}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.cd span{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-width:0;min-height:50px;background:var(--card);border:1px solid var(--gold-100);border-radius:9px;padding:6px 2px;font-size:10.5px;color:var(--mut);line-height:1.2}
.cd b{display:block;width:100%;text-align:center;font-family:var(--serif);font-size:19px;line-height:1.15;color:var(--ink);font-style:normal}
.grid{display:grid;gap:16px;margin:0 0 24px}
.card.film{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:start;padding:16px;transition:transform .2s,box-shadow .2s}
.card.film:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.film img,.film .noimg{width:104px;height:152px;object-fit:cover;border-radius:12px;background:var(--g100);border:1px solid var(--bd)}
.film>div{min-width:0}
.film>div>b{font-family:var(--serif);font-size:18px;font-weight:500;color:var(--ink);line-height:1.25}
.film .cdl{margin-top:10px;text-align:left}.film .cdl>small{text-align:left}
.film .cd span{min-height:44px}.film .cd b{font-size:17px}
.film .macts{margin-top:12px}

/* ---------- daftar & tabel ---------- */
.bar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding:14px;background:var(--card);border:1px solid var(--bd);border-radius:var(--r-l)}
.bar input,.bar select{width:auto;min-width:0}
#rq,#uq{flex:2 1 200px}
.bar .fl{display:flex;flex-direction:column;gap:4px;margin:0;flex:1 1 128px;font-size:11.5px;font-weight:700;color:var(--mut)}
.bar .fl input,.bar .fl select{width:100%}
#rs{flex:1 1 140px}
.bar .btn{flex:none}
#rx{margin-left:auto}
.scroll{overflow-x:auto;background:var(--card);border:1px solid var(--bd);border-radius:var(--r-l)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:14px 18px;border-bottom:1px solid var(--bd);text-align:left;vertical-align:top}
th{background:var(--card2);color:var(--mut);white-space:nowrap;font-size:12.5px;font-weight:700;border-bottom:2px solid var(--gold-100)}
tr:last-child td{border-bottom:0}
tr:hover td{background:var(--row2)}
td[data-l="No. laporan"]{font-weight:700;color:var(--gt);white-space:nowrap}
.kat{display:inline-block;background:var(--g50);color:var(--gt);border:1px solid var(--g100);border-radius:7px;padding:2px 10px;font-size:12px;font-weight:700;white-space:nowrap}
.st{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 11px;border-radius:99px;background:var(--g100);color:#454f57;white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
:root[data-theme=dark] .st{color:#c9d4cd}
.st-Open{background:var(--info-bg);color:var(--info)}.st-In-Progress{background:var(--warn-bg);color:var(--warn)}.st-Completed{background:var(--ok-bg);color:var(--ok)}.st-Need-Follow-up{background:var(--red-bg);color:var(--red)}
.st-Perlu-Perhatian{background:var(--warn-bg);color:var(--warn)}.st-Rusak{background:var(--red-bg);color:var(--red)}.st-Normal{background:var(--ok-bg);color:var(--ok)}
.st.ts-ok{background:var(--ok-bg);color:var(--ok)}.st.ts-warm{background:var(--red-bg);color:var(--red)}.st.ts-cold{background:#fff1b8;color:#7a5b00}
:root[data-theme=dark] .st.ts-cold{background:#3a3008;color:#f5d76e}
.st.ts-na{background:#e5e7eb;color:#374151}
:root[data-theme=dark] .st.ts-na{background:#2b3138;color:#cfd6dd}
.pg{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:16px;color:var(--mut);font-size:13px}

/* ---------- modal ---------- */
#modal{position:fixed;inset:0;background:#030d08c4;backdrop-filter:blur(6px);z-index:50;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:24px 14px}
#modal:not(.hidden){animation:fade .2s both}
.mbox{position:relative;background:var(--card);border-radius:var(--r-l);padding:28px;width:100%;max-width:700px;margin:auto;box-shadow:var(--sh2);animation:pop .25s both;border:1px solid var(--bd);border-top:3px solid var(--gold)}
.mbox h3{margin:0 0 14px;font-family:var(--serif);font-size:25px;font-weight:500;color:var(--ink);padding:0 44px 12px 0;border-bottom:1px solid var(--bd);display:flex;flex-direction:column;gap:2px;line-height:1.2}
.mid{font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--mut)}
.mx{position:absolute;top:16px;right:16px;width:36px;height:36px;min-height:0;padding:0;border-radius:50%;background:var(--g50);color:var(--txt);font-size:22px;line-height:1}
.mx:hover{background:var(--g100)}
.mbox .scroll{border-radius:12px;margin-top:12px}
.mbox>table{border:1px solid var(--bd);border-radius:12px;overflow:hidden;border-collapse:separate;border-spacing:0}
.mbox>table th{width:36%;font-size:13px;color:var(--mut);font-weight:600;white-space:normal;background:var(--card2);border-bottom:1px solid var(--bd)}
.macts,.fact{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
#gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px;margin-top:18px;align-items:start}
.gg{min-width:0;background:var(--card2);border:1px solid var(--bd);border-radius:16px;padding:14px}
.gg-full{grid-column:1/-1}
#gal .gg>b{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px;font-size:13.5px;color:var(--ink)}
#gal .gg>b span{font-size:11.5px;font-weight:700;color:var(--gold-lo);background:var(--gold-50);border:1px solid var(--gold-100);border-radius:99px;padding:1px 9px}
.gg .ph:not(.acg){display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin:0}
.gg .ph:not(.acg) img{width:100%;height:auto;aspect-ratio:1}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.row2>div.full{grid-column:1/-1}
.seg{display:flex;gap:4px;padding:4px;background:var(--g50);border:1px solid var(--bd2);border-radius:13px}
.seg button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:6px 10px;background:transparent;color:var(--mut);font-weight:600;border-radius:10px}
.seg button i{display:flex}
.seg button.on{background:var(--card);color:var(--gt);box-shadow:var(--sh1)}
#tm{display:flex;flex-wrap:wrap;gap:8px}
#tm label{display:inline-flex;align-items:center;gap:8px;margin:0!important;padding:8px 14px;border:1px solid var(--bd2);border-radius:99px;font-weight:500!important;font-size:13.5px;background:var(--card);cursor:pointer}
#tm label:has(input:checked){background:var(--g50);border-color:var(--gold);color:var(--gt)}
#tm input{width:auto!important;min-height:0!important}
.irow{display:grid;grid-template-columns:2fr 1fr 74px 74px 1.1fr auto;gap:6px;margin-bottom:8px;align-items:center}
.irow input{padding:8px 10px;min-height:40px}
.irow b{font-size:12.5px;white-space:nowrap}
.ph{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.ph div{position:relative}
.ph img{width:108px;height:108px;object-fit:cover;border-radius:12px;border:1px solid var(--bd);cursor:zoom-in;background:var(--bg);font-size:11px;color:var(--red)}
.ph .x{position:absolute;top:4px;right:4px;padding:0 7px;min-height:26px;background:#000b;color:#fff;border-radius:6px}
.merr{color:var(--red);min-height:20px;margin-top:8px;font-size:13.5px}
.vh{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pick{display:flex;gap:10px;flex-wrap:wrap;margin:2px 0 6px}
.pick .pk{display:inline-flex;align-items:center;justify-content:center;margin:0;min-height:44px;cursor:pointer;flex:1 1 160px;max-width:260px;text-align:center}
.iu{display:flex;flex-direction:column;gap:4px;min-width:0}
.iu select,.iu input{padding:8px 10px;min-height:40px}
.mbox,.mbox form{min-width:0}.mbox input,.mbox select,.mbox textarea{max-width:100%}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--moss-900);color:#fff;padding:13px 20px;border-radius:13px;z-index:99;display:none;max-width:90%;border-left:4px solid #4cc38a;box-shadow:var(--sh2);font-size:14px}
#toast.show{display:block;animation:tpop .3s both}
#toast.err{border-left-color:#f0605d}
.zipbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 0;padding:10px 12px;border:1px solid var(--bd);border-radius:13px;background:var(--g50)}
.zipbar span{flex:1 1 140px;font-size:13px;color:var(--mut);font-weight:600}
.zipbar .btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-height:38px;padding:6px 14px;font-size:13px}

/* ---------- meteran & grafik ---------- */
.msec{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--gt);margin:18px 0 2px;padding-bottom:6px;border-bottom:1px solid var(--gold-100)}
.msec i{display:flex}.msec .ic{width:18px;height:18px}
.mlive{background:var(--row2);border:1px solid var(--bd);border-radius:14px;padding:12px;margin:14px 0 4px;font-size:13.5px}
.mlive .scroll{border-radius:10px}
.mt{width:100%;border-collapse:collapse;font-size:13.5px}
.mt th,.mt td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--bd);white-space:nowrap}
.mt th{color:var(--mut);font-size:12px;font-weight:700;background:none}
.mt td.neg,.neg{color:var(--red);font-weight:700}
.mh{font-weight:700;color:var(--ink);margin:16px 0 8px}.mh small{font-weight:500;color:var(--mut)}
.mnote{display:block;color:var(--mut);margin:6px 0 0;line-height:1.45}
.macc{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:8px 0}
.macc>div{background:var(--row2);border:1px solid var(--bd);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.macc small{color:var(--mut);font-weight:600}.macc b{font-family:var(--serif);font-size:22px;font-weight:500;color:var(--ink)}.macc span{font-size:12px;color:var(--mut)}
.mp{margin-bottom:16px}.mp h3{margin:0 0 10px}
.mbar{margin:0 0 12px;padding:0;border:0;background:none}
.mlts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.mlt{border:1px solid var(--gold-100);background:var(--gold-50);color:#4f3f14;border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;font-size:13px}
.mlt small{color:var(--gold-lo)}
:root[data-theme=dark] .mlt{color:#ecdca8}
.mch{overflow-x:auto;margin:4px 0}.mch svg{display:block;height:auto}
.cax{stroke:var(--bd2);stroke-width:1}.cgr{stroke:var(--bd);stroke-width:1}.ctx{fill:var(--mut);font-size:11px;font-family:inherit}
.mlg{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--mut)}
.mlg i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.mdet summary{cursor:pointer;color:var(--gt);font-weight:600;margin:8px 0}
.mcc{display:flex;gap:8px 14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:6px 0}
.mct{display:flex;gap:6px;flex-wrap:wrap}.mct .btn{min-height:34px;min-width:36px;padding:0 10px;font-size:14px;line-height:1;white-space:nowrap}
.mlb{background:none;border:1px solid var(--bd2);border-radius:999px;padding:4px 11px;color:var(--txt);cursor:pointer;font:inherit;font-size:12.5px;display:inline-flex;align-items:center;min-height:30px}
.mmode{display:inline-flex;gap:4px;padding:4px;margin:2px 0 8px;border:1px solid var(--bd2);border-radius:999px;background:var(--card)}
.mmb{background:none;border:0;border-radius:999px;padding:7px 18px;min-height:36px;color:var(--mut);cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;transition:background .16s,color .16s}
.mmb.on{background:var(--g100);color:var(--gt)}
.mmb:focus-visible{outline:2px solid var(--gt);outline-offset:2px}
.mlb.off{opacity:.45;text-decoration:line-through}.mlb i{margin-right:6px}
#mchart{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;overflow:hidden;border:1px solid var(--bd);border-radius:16px;background:var(--card);padding:6px 4px 0}
#mchart:active{cursor:grabbing}#mchart svg{width:100%;height:auto;max-height:240px}
#mchart svg.anim path[pathLength]{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s .1s ease-out forwards}
.ctl{stroke:var(--mut);stroke-width:1;stroke-dasharray:3 3}.ctb{fill:var(--card);stroke:var(--bd2)}
.ctt{fill:var(--ink);font-size:11px;font-weight:700;font-family:inherit}.cts{fill:var(--txt);font-size:11px;font-family:inherit}

/* ---------- notifikasi ---------- */
.bell{position:relative}
.bcnt{position:absolute;top:-7px;right:-7px;box-sizing:border-box;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:#b3261e;color:#fff;font-size:11px;font-weight:700;line-height:16px;text-align:center;border:2px solid var(--bg)}
#npanel{position:fixed;top:68px;right:28px;width:380px;max-width:calc(100vw - 16px);max-height:min(560px,calc(100dvh - 90px));display:flex;flex-direction:column;background:var(--card);border:1px solid var(--bd);border-radius:var(--r-m);box-shadow:var(--sh2);z-index:45;overflow:hidden;animation:pop .2s both}
.nh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--bd)}
.nh b{font-family:var(--serif);color:var(--ink);font-size:18px;font-weight:500}
.nh button.lnk:disabled{opacity:.45;cursor:default}
.nl{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ni{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--bd);cursor:pointer}
.ni:last-child{border-bottom:0}
.ni:hover,.ni:focus-visible{background:var(--row2)}
.ni.un{background:var(--g50)}
.nd{flex:none;width:9px;height:9px;border-radius:50%;margin-top:6px;background:transparent}
.ni.un .nd{background:var(--gold)}
.nb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nb b{color:var(--ink);font-size:13.5px}
.nb span{color:var(--txt);font-size:13px;overflow-wrap:anywhere}
.nb small{color:var(--mut);font-size:12px}
.ni .nr{flex:none;min-height:32px;padding:4px 10px;font-size:12px}
.nl .empty{margin:12px;padding:26px 16px}

/* ---------- AC, profil, foto ---------- */
.pfoto{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 4px}.pfoto>div{flex:1 1 200px;min-width:0}.pfoto .av{width:56px;height:56px;font-size:22px}
.acs{margin:10px 0 8px}.acs .st{margin-right:4px}
.ph.acg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:8px 0}
.ph.acg figure{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.ph.acg img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;display:block;background:var(--bg);border:1px solid var(--bd);border-radius:12px;cursor:zoom-in}
.ph.acg figcaption{font-size:12px;font-weight:700;text-align:center;line-height:1.3;overflow-wrap:anywhere}
.crp{margin:10px 0 4px;text-align:center}
.crp canvas{width:100%;max-width:260px;aspect-ratio:1;border-radius:14px;touch-action:none;cursor:grab;background:#111;display:block;margin:0 auto}
.crp input[type=range]{width:100%;max-width:260px;margin:10px auto 2px;display:block}
.crp small{display:block;color:var(--mut)}
.acsum{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;max-width:520px}
.acsum small{flex:1 0 100%;line-height:1.35;color:var(--mut);overflow-wrap:anywhere}

/* ---------- responsif ---------- */
@media(max-width:1100px){
 .dh{grid-template-columns:1fr}
 .dh-main{min-height:300px}
 .dq{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 10px}.dq h2{grid-column:1/-1}
 .ds{grid-template-columns:1fr 1fr}.ds-list{grid-column:1/-1;order:3}
 .dm{grid-template-columns:1fr}
 .ph.acg{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1000px) and (min-width:821px){#view{padding:20px}.clk #clock{display:none}#phero{margin:20px 20px 0}}
@media(min-width:900px){
 .mbox{max-width:920px}
 .row2{grid-template-columns:repeat(3,1fr);gap:0 18px}
 .irow{grid-template-columns:minmax(0,2.2fr) minmax(0,1.2fr) 80px minmax(0,1fr) minmax(0,1.3fr) minmax(90px,auto) auto;gap:8px}
}
@media(min-width:600px) and (max-width:899px){.irow{grid-template-columns:minmax(0,2fr) minmax(0,1fr) 70px minmax(0,1fr)}.irow .ip{grid-column:span 2}}
@media(max-width:700px){.ph.acg{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
@media(max-width:600px){
 .irow{grid-template-columns:1fr 1fr;gap:8px}
 .irow .in,.irow .ic{grid-column:1/-1}
 .irow .iq{grid-column:1}.irow .iu{grid-column:2}
 .irow .ip{grid-column:1;grid-row:auto}.irow .it{grid-column:2;text-align:right;align-self:center}
 .irow .rm{grid-column:1/-1;min-height:36px}
 .pick .pk{max-width:none}
}
@media(max-width:300px){.ph.acg{grid-template-columns:1fr}}
@media(max-width:820px){
 body{font-size:15px}
 input,select,textarea{font-size:16px}
 #login{grid-template-columns:1fr}
 .lhero{padding:24px 16px}.lhero .llogo{width:120px;margin:0}.lhero h1{font-size:26px}.lhero .tag{display:none}
 .lscene{width:min(320px,90%);margin:4px 0 8px}.lglow{width:60px;height:60px}
 .lpane{padding:24px 18px 40px;align-items:flex-start}
 #app{display:block}
 #main{padding-bottom:calc(var(--tabh) + 14px);min-height:100vh;min-height:100dvh}
 #side{position:fixed;inset:0 auto 0 0;z-index:40;width:min(300px,86vw);transform:translateX(-100%);transition:transform .22s;height:100%}
 #side.open{transform:none;box-shadow:var(--sh2)}
 #shade.open{display:block;position:fixed;inset:0;background:#030d0899;z-index:35}
 header{height:56px;padding:0 14px;gap:10px}
 .hlogo{display:block;height:22px;width:auto;flex:none}
 .sbtn{display:none}
 .hs b{font-size:16px;color:var(--ink)}
 .clk #clock{display:none}
 #conn{font-size:0;padding:0;width:12px;height:12px;gap:0;background:none}
 #conn::before{width:10px;height:10px}
 #view{padding:14px 14px 20px}
 #phero{margin:14px 14px 0;min-height:112px;border-radius:18px}
 .ph-img{width:70%;opacity:.6}
 .ph-t{padding:18px 18px}.ph-t i{width:38px;height:38px;border-radius:12px}.ph-t h1{font-size:26px}.ph-t p{font-size:13px;margin-top:3px}
 .dh-main{min-height:250px;padding:22px 18px;border-radius:20px}
 .dh-img{width:86%;right:-18%;top:34%;opacity:.45} .dh-t{max-width:none}.dh-t h1{font-size:34px}.dh-t p{font-size:14px}
 .dq{grid-template-columns:1fr}
 .ds{grid-template-columns:1fr 1fr;gap:12px}
 .ds-big,.ds-st{min-height:136px;padding:18px}
 .ds .n{font-size:58px}
 .ds-list{padding:16px 18px}
 .dsr{grid-template-columns:78px 1fr 36px;gap:10px}
 .ai{flex-wrap:wrap;gap:8px 12px;padding:14px 16px}.ai .kat{min-width:0}.ai-m{flex:1 1 100%;order:3}.ai-m b{white-space:normal}.ai .btn{margin-left:auto}
 .sh h2{font-size:20px}
 .row2{grid-template-columns:1fr}
 .bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:end;padding:12px;border-radius:18px}
 .bar>*{min-width:0}.bar input,.bar select{width:100%}
 .mbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 #rq,#uq{grid-column:1/-1}.bar .fl{flex:none}#rs{grid-column:1/-1}#rg{grid-column:1/2}#rx{grid-column:2/3;margin-left:0}#rpdf{grid-column:1/-1}#ua{grid-column:1/-1}
 #rl{padding-bottom:calc(var(--tabh) + 84px)}#view,#rl{position:relative;z-index:0}
 .scroll.cards{overflow:visible;background:none;border:0}
 .rt,.rt tbody{display:block;width:100%}
 .rt tr:first-child{display:none}
 .rt tr{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--bd);border-radius:var(--r-m);padding:12px 14px;margin-bottom:10px}
 .rt tr:hover td{background:none}
 .rt td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;border:0;padding:4px 0;text-align:right;min-width:0}
 .rt td::before{content:attr(data-l);color:var(--mut);font-size:12.5px;font-weight:500;text-align:left;flex:none}
 .rt td.sm{order:-1;display:block;text-align:left;padding:0 0 8px;margin-bottom:6px;border-bottom:1px solid var(--bd);font-size:14.5px}
 .rt td.sm::before{display:none}
 .rt td.act{justify-content:flex-end;padding-top:10px;gap:8px}
 .rt td.act::before{display:none}
 .rt td.act button{flex:1;min-height:40px}
 .tk{flex-direction:column;--stub:100%}
 .tk .tr{width:auto;border-left:0;border-top:2px dashed var(--gold-100);border-radius:0 0 var(--r-m) var(--r-m);min-height:84px}
 .tk::before,.tk::after{top:auto;bottom:75px;border-color:var(--bd)}
 .tk::before{left:-10px;right:auto;border-left-color:transparent}.tk::after{right:-10px;border-right-color:transparent}
 .film img,.film .noimg{width:78px;height:112px}
 #modal{align-items:flex-end;padding:0;overflow:hidden}
 .mbox{max-width:none;margin:0;border-radius:24px 24px 0 0;max-height:94vh;overflow:auto;padding:22px 16px 0;animation:sheet .26s both;-webkit-overflow-scrolling:touch}
 .mbox h3{font-size:22px}
 .mbox .macts,.mbox .fact{position:sticky;bottom:0;margin:16px -16px 0;padding:12px 16px calc(12px + var(--safe-b));background:var(--card);border-top:1px solid var(--bd);z-index:2}
 .mbox .fact .btn,.mbox .macts .btn{flex:1 1 0}
 .film .macts{display:grid;grid-template-columns:1fr 1fr}
 .irow{grid-template-columns:1fr 1fr 1fr;padding:10px;border:1px solid var(--bd);border-radius:14px;background:var(--row2)}
 .irow .in,.irow .ic{grid-column:1/-1}.irow .it{grid-column:1/3}.irow .rm{grid-column:3/4}
 .ph img{width:92px;height:92px}
 #toast{bottom:calc(var(--tabh) + 14px)}
 #npanel{top:62px;left:8px;right:8px;width:auto}
 #cp{padding:6px 16px 14px}
 #tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;height:var(--tabh);overflow:hidden;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--bd);padding:6px 6px calc(6px + var(--safe-b))}
 #tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;min-width:0;padding:0 2px;margin:0;font-size:11.5px;font-weight:600;color:var(--mut);border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}
 #tabs a i{display:flex;padding:4px 18px;border-radius:99px;transition:background .16s}
 #tabs a.on{color:var(--gt)}
 #tabs a.on i{background:var(--g100)}
 .mmode{display:flex}.mmb{flex:1 1 0;padding:7px 8px}
 .mct{width:100%}.mct .btn{flex:1 1 0;padding:0 6px}.mct [data-a=rs]{flex:2.2 1 0}
 .zipbar .btn{flex:1 1 100%}
}
@media(max-width:380px){.dh-t h1{font-size:30px}.ds .n{font-size:50px}}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 #mchart svg.anim path[pathLength]{stroke-dasharray:none!important;stroke-dashoffset:0!important}
}

/* STC XXI focused refinements */
.dh-main{min-width:0}.dh-t{position:relative;z-index:3}.dh-img{pointer-events:none}.lens-glow,.lens-flare{left:76.4%;top:62.1%}
.ds-big .l{position:relative;z-index:2;display:block;max-width:100%;overflow-wrap:anywhere}.ds-big{isolation:isolate}.ds-big::before{pointer-events:none}
.tk-poster{width:76px;height:112px;object-fit:cover;border-radius:9px;flex:none;box-shadow:0 5px 16px #0002}.tk{align-items:stretch}.tk .tl{min-width:0;flex:1}.tk .tr{flex:none}
.filmbar{display:grid;grid-template-columns:minmax(240px,2fr) minmax(150px,1fr) minmax(220px,1.5fr) auto auto;align-items:end;gap:10px}.filmbar>*{min-width:0}.film-status{display:inline-flex;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:800;white-space:nowrap}.fs-belum-tayang{background:#e8ece9;color:#17251d}.fs-sedang-tayang{background:#d9f3e3;color:#12663b}.fs-sudah-tayang{background:#fde3e1;color:#a2211b}.film-capacity{margin-top:16px;padding:14px 16px;border:1px solid var(--bd);border-radius:14px;background:var(--card)}.film-capacity p{margin:4px 0 0;color:var(--mut)}.film-table td{vertical-align:middle}.muted{color:var(--mut);margin:4px 0 0;font-size:13px}
@media(min-width:1200px){#view{max-width:none;padding:24px 30px 32px}.dh{grid-template-columns:minmax(0,1.45fr) minmax(300px,.8fr)}.dm{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.ds{grid-template-columns:minmax(180px,.8fr) minmax(260px,1.1fr) minmax(180px,.8fr)}}
@media(max-width:760px){.filmbar{grid-template-columns:1fr 1fr}.filmbar #filmq,.filmbar #froutlet{grid-column:1/-1}.filmbar button{width:100%;padding:9px 10px}.tk-poster{width:68px;height:100px}.ds-big .l{font-size:12px;line-height:1.35;overflow-wrap:anywhere;white-space:normal}.ds-big{overflow:hidden}.film-capacity{font-size:13px}}

.role-tag{display:inline-flex;align-items:center;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:800;white-space:nowrap}.role-admin{background:#e8dfc5;color:#604512}.role-user{background:#d9f3e3;color:#12663b}.role-reporter{background:#e3edfa;color:#194b8a}

/* STC XXI polish pass: login composition, projector beam alignment, motion and bulk film entry */
.lbeam{left:76%;top:47%;width:82%;height:72%;transform:translateY(-50%);clip-path:polygon(0 43%,100% 18%,100% 82%,0 57%);background:linear-gradient(90deg,rgba(255,241,199,.32) 0%,rgba(255,236,190,.13) 48%,rgba(255,236,190,.015) 100%);filter:blur(1.5px);transform-origin:left center}
.lglow{left:76%;top:47%;width:76px;height:76px;background:radial-gradient(circle,rgba(255,250,225,.95),rgba(255,236,190,.25) 45%,transparent 72%)}
#login{background:var(--card)}
.lhero{padding:clamp(24px,4vw,56px);isolation:isolate}
.lhero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(20,113,78,.25),transparent 58%);pointer-events:none;z-index:1}
.lhero .llogo{width:min(190px,42%);max-height:100px;object-fit:contain}
.lscene{width:min(560px,90%);margin:12px 0 20px}
.lhero .lphoto{filter:brightness(1.25) contrast(1.08) saturate(.92)}
.lhero h1{font-size:clamp(30px,3vw,42px);letter-spacing:-.02em}
.lhero .tag{max-width:310px;line-height:1.65}
.lpane{position:relative;padding:clamp(24px,5vw,72px);background:linear-gradient(145deg,var(--card),var(--bg))}
.lbox{max-width:430px;animation:loginRise .65s cubic-bezier(.2,.75,.25,1) both}
.lbox h2{font-size:clamp(30px,3vw,38px);letter-spacing:-.025em}
.lbox input{min-height:48px}
#lbtn{min-height:48px;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
#lbtn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 12px 26px #0c4c3430}
.btn,button,.card,.rt tr{transition:background-color .18s ease,border-color .18s ease,box-shadow .2s ease,transform .2s ease}
.btn:not(:disabled):hover{transform:translateY(-1px)}
.card:hover{box-shadow:0 8px 24px #092f1b0d}
#modal .modal-box,.modal-box{animation:modalRise .24s cubic-bezier(.2,.75,.25,1) both}
.film-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
#film-bulk-lines{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.65;min-height:190px}
#film-bulk-save:disabled{opacity:.65;cursor:wait;transform:none}
@keyframes loginRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes modalRise{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:760px){
 #login{grid-template-columns:1fr;min-height:100dvh}
 .lhero{min-height:36vh;padding:20px 18px 14px}
 .lhero .llogo{width:100px;max-height:55px;margin-bottom:0}
 .lscene{width:min(300px,70%);margin:2px 0 5px}
 .lhero h1{font-size:27px}
 .lhero .sub{font-size:10px;margin-top:6px}
 .lhero .tag{font-size:12px;margin-top:8px;max-width:290px}
 .lbeam{width:80%;height:75%;left:76%;top:47%}
 .lpane{padding:28px 22px 34px;align-items:flex-start}
 .lbox{max-width:460px;margin:0 auto}
 .lbox h2{font-size:30px}
 .lfoot{margin-top:18px}
 .film-actions{justify-content:flex-start}
 .film-actions .btn{flex:1}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* V3: laporan film otomatis dikelompokkan menurut status */
.film-groups{display:grid;gap:16px}.film-group{min-width:0;border:1px solid var(--bd);border-radius:16px;overflow:hidden;background:var(--card)}.film-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--bd);background:var(--soft,rgba(120,130,120,.06))}.film-group-head>b{font-size:12px;color:var(--mut)}.film-group .scroll{border:0;border-radius:0}.film-group .film-table{margin:0}.fg-sedang .film-group-head{border-left:4px solid #16834b}.fg-sudah .film-group-head{border-left:4px solid #c33a35}.fg-belum .film-group-head{border-left:4px solid #737b76}

/* Import film preview */
.film-import-summary{margin:14px 0;padding:12px 14px;border:1px solid var(--line,#d9e2dc);border-radius:12px;background:var(--surface2,#f6f8f6)}.film-import-summary p{margin:5px 0}.checkline{display:flex;align-items:center;gap:9px;margin:14px 0;font-weight:600}.checkline input{width:auto}.film-import-summary+.scroll{max-height:300px;overflow:auto}

/* V6: tabel pemakaian meteran selalu terlihat dan dapat digulir pada layar kecil */
.meter-data-table{margin-top:8px;border:1px solid var(--bd);border-radius:12px;max-width:100%;overflow:auto}
.meter-data-table table{min-width:620px;width:100%}
.meter-data-table th,.meter-data-table td{white-space:nowrap}
#meter-refresh-time{display:inline-block;font-size:11px;font-weight:500;margin-left:8px}

/* ===== Tabel Laporan Film: garis hitam tegas, teks gelap, rata tengah (tidak mengubah tema lain) ===== */
.film-table{border-collapse:collapse;border-spacing:0;width:100%;background:#fff;color:#000}
.film-table th,.film-table td{border:1.5px solid #000;color:#000;text-align:center;vertical-align:middle;padding:9px 10px;background:#fff;font-size:13.5px;line-height:1.35}
.film-table th{background:#e4e4e4;font-weight:800;letter-spacing:.2px;white-space:nowrap}
.film-table td b{font-weight:800}
.film-table tbody tr:hover td{background:#f3f3f3}
.film-table .film-status{background:none;border-radius:0;padding:0;font-size:13px;font-weight:800;justify-content:center}
.film-table .fs-sedang-tayang{color:#0b6b2e}.film-table .fs-sudah-tayang{color:#b00000}.film-table .fs-belum-tayang{color:#000}
.film-table td.act{white-space:nowrap}
.film-group .scroll{background:#fff}
@media (max-width:820px){
 .film-table tr{background:#fff;border:1.5px solid #000;color:#000}
 .film-table td{border:0;color:#000;text-align:center;justify-content:space-between;background:none}
 .film-table td::before{color:#000;font-weight:700}
 .film-table td.sm{text-align:center;border-bottom:1.5px solid #000}
}

/* ===== Pemeriksaan data meteran ===== */
.mdiag{margin-top:12px}.mdiag p{margin:6px 0 0;font-size:13.5px}.mdiag .mwarn{color:#b45309}.mdiag .mok{color:#0b6b2e;font-weight:600}

/* ===== Perbaikan visual: cahaya proyektor (login) & hero dashboard ===== */

/* --- Login: posisi lensa Barco dihitung dari foto (80,6% x 43,4%) --- */
.lscene{--lx:80.6%;--ly:43.4%}
.lbeam{position:absolute;z-index:2;left:var(--lx);top:var(--ly);width:64%;height:62%;clip-path:none;background:none;transform:translateY(-50%) rotate(2.5deg);transform-origin:0 50%;filter:blur(7px);mix-blend-mode:screen;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 28%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 28%,transparent 100%);pointer-events:none;animation:beamOn 1.2s .9s both,beamShimmer 6s 2.2s ease-in-out infinite}
.lbeam::before,.lbeam::after{content:"";position:absolute;inset:0}
.lbeam::before{clip-path:polygon(0 47%,100% 6%,100% 94%,0 53%);background:linear-gradient(90deg,rgba(255,243,214,.5) 0,rgba(255,236,190,.2) 38%,rgba(255,236,190,.05) 78%,transparent 100%)}
.lbeam::after{clip-path:polygon(0 49%,100% 28%,100% 72%,0 51%);background:linear-gradient(90deg,rgba(255,250,235,.6) 0,rgba(255,240,205,.15) 55%,transparent 100%);filter:blur(5px)}
.lglow{left:var(--lx);top:var(--ly);width:clamp(70px,17%,110px);height:auto;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,252,240,.95) 0,rgba(255,241,205,.55) 14%,rgba(255,228,170,.2) 38%,transparent 70%);mix-blend-mode:screen;animation:lensOn 1.4s .6s both,lampPulse 4.5s 2s ease-in-out infinite}
.lglow::after{content:"";position:absolute;left:50%;top:50%;width:230%;height:2px;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,rgba(255,244,215,.7) 50%,transparent);filter:blur(1px)}
@keyframes beamShimmer{0%,100%{opacity:.92}50%{opacity:1}}
@keyframes lampPulse{0%,100%{opacity:.86}50%{opacity:1}}
@media(max-width:760px){.lbeam{width:38%;height:56%}.lglow{width:clamp(44px,17%,70px)}}

/* --- Dashboard: proyektor utuh, tajam, tidak terpotong --- */
.dh-main::before{background:linear-gradient(90deg,#03100a 0,#03100acc 30%,#03100a45 52%,transparent 70%)}
.dh-img{right:4%;top:50%;bottom:auto;width:auto;max-width:none;height:76%;aspect-ratio:1240/968;transform:translateY(-50%);animation:dhIn .9s .1s both}
.dh-img img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(0,0,0,.5))}
.dh-img::before{content:"";position:absolute;left:10%;right:8%;bottom:-3%;height:9%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.7),transparent 70%);filter:blur(6px);z-index:-1}
.dh-img::after{content:"";position:absolute;left:50%;top:48%;width:92%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(214,177,92,.22);background:radial-gradient(circle,rgba(46,148,104,.34) 0,rgba(28,110,78,.16) 42%,transparent 68%);z-index:-1}
.dh-img .lens-glow{left:76%;top:62%;width:34%;background:radial-gradient(circle,rgba(220,238,255,.75) 0,rgba(130,185,255,.32) 16%,rgba(70,130,225,.1) 38%,transparent 62%)}
.dh-img .lens-flare{left:76%;top:62%;width:72%;opacity:.55}
@keyframes dhIn{from{opacity:0;transform:translateY(-46%) scale(.98)}}
@media(max-width:700px){.dh-img{height:62%;right:-4%;top:36%;opacity:.5}}
/* ===== v10: Glossarium, Penyimpanan Data, countdown auto-hapus ATS ===== */
.card.gl{display:flex;gap:14px;justify-content:space-between;align-items:flex-start;padding:14px 16px;margin:0 0 10px}
.card.gl p{margin:6px 0 4px;color:var(--txt)}
.card.gl .macts,.card.sf .macts{margin:0;flex:none}
.gcount{margin:0 0 10px;font-size:13px;color:var(--mut)}
.card.sf{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;margin:0 0 10px}
.card.sf p{margin:6px 0 0;color:var(--txt)}
.sx{width:52px;height:52px;border-radius:12px;background:var(--gold-50);border:1px solid var(--gold-100);color:var(--gold-lo);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;text-transform:uppercase}
.cdx{margin-top:10px;padding:10px;border:1px dashed var(--red);border-radius:10px;background:var(--red-bg);color:var(--red);font-size:12px}
.cdx .cd{margin-top:6px}
.cdx .cd.warn b{color:var(--red)}
.hint{display:block;margin-top:4px;color:var(--mut);font-size:12px}
@media(max-width:640px){.card.gl{flex-direction:column}.card.sf{grid-template-columns:44px minmax(0,1fr)}.card.sf .sx{width:44px;height:44px}.card.sf .macts{grid-column:1/-1}}

/* Inspeksi & Patroli Studio: dokumentasi foto per studio */
.studio-photo-block{border:1px solid var(--line,#d9dfdc);border-radius:12px;padding:12px;margin:10px 0;background:var(--card,#fff)}.studio-photo-block>label{display:block;font-weight:700;margin-bottom:8px}.studio-photo-block .pick{display:flex;flex-wrap:wrap;gap:8px}.studio-photo-block .ph{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}


/* Layout patroli studio: foto dan kamera berada di kartu studio masing-masing. */
.patrol-studio-card{border:1px solid var(--line,#d9dfdc);border-radius:12px;padding:12px;background:var(--card,rgba(128,128,128,.04));margin:0}
.patrol-studio-card .row2{margin:0}
.patrol-photo-inline{margin:10px 0 0;background:transparent}
.patrol-photo-inline .pick .pk{flex:0 1 190px;justify-content:center}
.patrol-photo-inline .ph img{width:84px;height:84px;object-fit:cover;border-radius:8px}
@media(max-width:600px){.patrol-studio-card{padding:10px}.patrol-photo-inline .pick .pk{flex:1 1 140px}}


/* Detail report: larger, readable documentation gallery without cropping source images. */
#gal .gg .ph:not(.acg){grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:14px}
#gal .gg .ph:not(.acg) figure{min-width:0;margin:0;display:flex;flex-direction:column;gap:7px}
#gal .gg .ph:not(.acg) figure img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:var(--bg);border:1px solid var(--bd);border-radius:12px;cursor:zoom-in}
#gal .gg .ph:not(.acg) figcaption{font-size:12px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
@media(max-width:700px){#gal .gg .ph:not(.acg){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
@media(max-width:420px){#gal .gg .ph:not(.acg){grid-template-columns:1fr}}

/* ===== bagian: style-polish.css ===== */
/* =====================================================================
   STC XXI Technical Report - POLISH v3  (hijau lumut dipertahankan)
   Dimuat SETELAH style.css. Tidak mengganti style.css.
   Isi: dashboard rapi, banner proyektor presisi, ATS, Glossarium.
   Hapus file ini + 1 baris <link> di index.html untuk kembali ke tampilan lama.
   ===================================================================== */

/* ---------- 1. TOKEN: hanya radius & bayangan (warna tetap hijau asli) ---------- */
:root{
 --r-s:8px;--r-m:12px;--r-l:16px;
 --sh0:0 1px 2px rgba(8,36,24,.05),0 4px 14px rgba(8,36,24,.05);
}
:root[data-theme=dark]{--sh0:0 0 0 0 transparent}
.card,.dq,.ds-big,.ds-list,.dact,.dc-b{box-shadow:var(--sh0)}
.card:hover{box-shadow:var(--sh0)}
input[type=checkbox]{accent-color:var(--gold)}

/* ---------- 2. SIDEBAR & HEADER ---------- */
.ng{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin:22px 12px 6px}
.hs b{font-size:15px;color:var(--ink)}
.thm{border-radius:10px}
/* ikon bulan/matahari bergaya garis (menggantikan emoji) */
.thm[data-thm]{font-size:0;color:var(--gt)}
.thm[data-thm]::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
 --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E")}
:root[data-theme=dark] .thm[data-thm]::before{
 --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E")}

/* ---------- 3. BANNER HALAMAN: proyektor utuh, rapi, sejajar judul ---------- */
#phero{min-height:150px;align-items:center}
.ph-t{align-items:center;padding:26px 30px}
.ph-t i{margin-bottom:0}
.ph-img{top:10px;bottom:10px;right:3%;width:30%;display:flex;align-items:center;justify-content:flex-end;overflow:visible;-webkit-mask-image:none;mask-image:none}
.ph-img::before{content:"";position:absolute;inset:-6% -4%;z-index:-1;background:radial-gradient(closest-side,rgba(225,196,118,.22),transparent 72%)}
.ph-img img{width:100%;height:100%;object-fit:contain!important;object-position:right center!important;filter:drop-shadow(0 10px 14px rgba(0,0,0,.55))}
@media(max-width:700px){
 #phero{min-height:112px}
 .ph-img{width:38%;right:2%;opacity:.38}
}

/* ---------- 4. HERO DASHBOARD ringkas + CATAT CEPAT horizontal ---------- */
.dh{grid-template-columns:1fr;gap:16px}
@media(min-width:701px){
 .dh-main{min-height:240px;padding:30px 36px}
 .dh-t{max-width:58%}
 .dh-t h1{font-size:40px;line-height:1.08}
 .dh-t p{margin-top:10px;font-size:14.5px}
 .dh-img{height:90%;right:5%}
}
.dq h2{font-family:var(--font);font-size:15px;font-weight:700;color:var(--ink)}
.qrow em{font-size:0;font-weight:400}
.qrow em::after{content:"\2192";font-size:16px;color:var(--ph)}
.qrow:hover em{transform:none}
.qrow:hover em::after{color:var(--gold)}
@media(min-width:561px){
 .dq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:18px}
 .dq h2{grid-column:1/-1;margin:0 0 4px 2px}
 .qrow{position:relative;flex-direction:column;align-items:flex-start;gap:12px;padding:14px;border:1px solid var(--bd);background:var(--card2);border-radius:var(--r-m)}
 .qrow:hover{background:var(--g50);border-color:var(--gold)}
 .qrow span{flex:none;width:100%}
 .qrow small{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
 .qrow em{position:absolute;top:12px;right:14px}
}
@media(min-width:1101px){.dq{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ---------- 5. KARTU STATISTIK ---------- */
.ds{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:820px){.ds{grid-template-columns:1fr 1fr}}
.ds-big,.ds-list,.ds-st{min-height:168px;padding:20px 22px}
.ds-big::before{display:none}
.ds .l,.ds-list h2{font-size:12.5px;font-weight:700}
.ds .n,.dsr strong,.dc-b b{font-family:var(--font);font-variant-numeric:lining-nums tabular-nums;font-weight:700;letter-spacing:-.02em}
.ds .n{font-size:56px}
@media(max-width:380px){.ds .n{font-size:46px}}
.dsr strong{font-size:20px}
/* daftar total laporan tanpa bar (bar tidak punya skala jelas). Mau bar kembali? hapus 2 baris ini. */
.dsr{grid-template-columns:1fr auto;gap:10px}
.dsr i{display:none}
.sh h2{font-family:var(--font);font-size:17px;font-weight:700;color:var(--ink)}

/* ---------- 6. MONITORING AC HARI INI (dashboard) ---------- */
.dac{margin:0 0 26px}
.dac-b{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-l);padding:18px 20px;box-shadow:var(--sh0)}
.dac-s{font-size:13.5px;color:var(--mut);margin:0 0 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dac-g{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.dac-c{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:12px 14px;min-height:92px;border-radius:var(--r-m);background:var(--card2);border:1px solid var(--bd);color:var(--txt);box-shadow:inset 4px 0 0 var(--bd2);transition:border-color .16s,background .16s,transform .16s}
.dac-c:hover{border-color:var(--gold);background:var(--g50);transform:translateY(-1px)}
.dac-c b{font-size:12px;letter-spacing:.08em;color:var(--mut)}
.dac-c .dac-t{font-size:26px;font-weight:700;line-height:1.15;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em}
.dac-c small{font-size:11.5px;font-weight:700;color:var(--mut)}
.dac-c.na{border-style:dashed}
.dac-c.na span{font-size:14px;font-weight:600;color:var(--ph);margin-top:6px}
.dac-c.ok{box-shadow:inset 4px 0 0 var(--ok)}.dac-c.ok small{color:var(--ok)}
.dac-c.bad{box-shadow:inset 4px 0 0 var(--red)}.dac-c.bad small,.dac-c.bad .dac-t{color:var(--red)}
.dac-c.na2{box-shadow:inset 4px 0 0 var(--ph)}
.dac-c.cold{box-shadow:inset 4px 0 0 #d9a400}.dac-c.cold small,.dac-c.cold .dac-t{color:#8a6500}
:root[data-theme=dark] .dac-c.cold small,:root[data-theme=dark] .dac-c.cold .dac-t{color:#f5d76e}
@media(max-width:1100px){.dac-g{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.dac-g{grid-template-columns:repeat(2,minmax(0,1fr))}.dac-b{padding:14px}}

/* ---------- 7. ADVANCED TICKET SALES: kartu film rapi, tidak melebar ---------- */
.grid:has(>.card.film){grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr))!important;align-items:start;gap:16px}
#view>.info{margin-bottom:14px}
.card.film{grid-template-columns:112px minmax(0,1fr);gap:18px;padding:18px;border-radius:var(--r-l)}
.film img,.film .noimg{width:112px;height:164px;border-radius:10px;box-shadow:var(--sh1)}
.film>div>br{display:none}
.film>div>b{display:block;font-family:var(--font);font-size:17px;font-weight:700;line-height:1.3;letter-spacing:0;color:var(--ink)}
.film>div>small{display:block;margin-top:4px;line-height:1.5}
.film>div>.pri{display:inline-block;margin:10px 0 4px}
.film .cdl{margin-top:12px;padding:10px 12px;background:var(--gold-50);border:1px solid var(--gold-100);border-radius:var(--r-m)}
.film .cdl>small{margin-bottom:8px}
.film .cd{gap:6px}
.film .cd span{min-height:46px;border-radius:8px}
.film .cd b{font-family:var(--font);font-weight:700;font-variant-numeric:lining-nums tabular-nums;font-size:18px}
.film .macts{display:flex;gap:8px;margin-top:14px}
.film .macts button{min-height:34px;padding:5px 14px;font-size:13px}
@media(max-width:560px){.card.film{grid-template-columns:92px minmax(0,1fr);gap:14px;padding:14px}.film img,.film .noimg{width:92px;height:136px}}

/* ---------- 8. GLOSSARIUM: kartu grid, indeks huruf, aksi rapi ---------- */
#gl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,500px),1fr));gap:12px;align-items:stretch}
.gcount{margin:6px 2px 12px;font-size:12.5px;font-weight:600;color:var(--mut)}
.gl-h{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:10px 0 0;font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--gt2)}
.gl-h::after{content:"";flex:1;height:1px;background:var(--bd)}
.gl-h:first-child{margin-top:0}
#gl .card.gl{flex-direction:column;align-items:stretch;justify-content:space-between;gap:12px;margin:0;padding:16px 18px;border-radius:var(--r-m);transition:border-color .16s}
#gl .card.gl:hover{border-color:var(--gold)}
#gl .card.gl>div:first-child{min-width:0}
#gl .card.gl b{font-size:16px;font-weight:700;color:var(--ink);margin-right:6px}
#gl .card.gl .pri{vertical-align:2px}
#gl .card.gl p{margin:8px 0 6px;line-height:1.6;color:var(--txt)}
#gl .card.gl small{display:block;color:var(--mut);font-size:12px}
#gl .card.gl .macts{display:flex;gap:8px;justify-content:flex-end;padding-top:10px;border-top:1px solid var(--bd)}
#gl .card.gl .macts button{min-height:32px;padding:4px 14px;font-size:12.5px}
#gl .card.gl .macts [data-x]{color:var(--red);border-color:transparent;background:transparent}
#gl .card.gl .macts [data-x]:hover{background:var(--red-bg);border-color:var(--red)}

/* ---------- 9. INDIKATOR & BADGE STATUS: hijau terang, terbaca di terang & gelap ---------- */
:root{--ok:#15803d;--ok-bg:#dcf5e5;--ok-hi:#22c55e}
:root[data-theme=dark]{--ok:#4ade80;--ok-bg:#0f3a24;--ok-hi:#4ade80}

/* badge: spesifisitas dinaikkan agar mengalahkan <style> di index.html */
.st{box-shadow:none}
:root[data-theme=dark] .st{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
td.sm .st{margin-left:6px;vertical-align:middle}

/* hijau: Selesai / Completed / Normal / APPROVED */
.st.st-Selesai,.st.st-Completed,.st.st-Normal,.st.ts-ok{background:var(--ok-bg);color:var(--ok)}
.st.st-Selesai::before,.st.st-Completed::before,.st.st-Normal::before,.st.ts-ok::before{background:var(--ok-hi);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok-hi) 28%,transparent)}
:root[data-theme=dark] .st.st-Selesai,:root[data-theme=dark] .st.st-Completed,:root[data-theme=dark] .st.st-Normal,:root[data-theme=dark] .st.ts-ok{background:var(--ok-bg);color:var(--ok);box-shadow:inset 0 0 0 1px rgba(74,222,128,.35)}

/* status lain di mode gelap (sebelumnya teks terlalu pudar) */
:root[data-theme=dark] .st.st-Menunggu,:root[data-theme=dark] .st.st-In-Progress,:root[data-theme=dark] .st.st-Perlu-Perhatian{background:#3a2a06;color:#fbbf24}
:root[data-theme=dark] .st.st-Ditanggapi,:root[data-theme=dark] .st.st-Open{background:#10284a;color:#7db6ff}
:root[data-theme=dark] .st.st-Sedang-Dikerjakan{background:#2a1f4d;color:#c4b0ff}
:root[data-theme=dark] .st.st-Need-Follow-up,:root[data-theme=dark] .st.st-Rusak,:root[data-theme=dark] .st.ts-warm{background:#3d1512;color:#ff8a80}

/* indikator hijau lain */
#conn::before{background:var(--ok-hi);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok-hi) 28%,transparent)}
#conn.bad::before{background:currentColor;box-shadow:none}
.dac-c.ok{box-shadow:inset 4px 0 0 var(--ok-hi)}
.ds-st.good .n,.ds-st.good .l{color:#fff}
:root[data-theme=dark] .film-table .fs-sedang-tayang,:root[data-theme=dark] .mdiag .mok{color:var(--ok)}

/* ===== bagian: style-dash.css ===== */
/* Tambahan dashboard: pencarian semua laporan, slider sorotan (Teori Management XXI), informasi bioskop + kursi animasi */
/* ---------- pencarian ---------- */
.dsr{position:relative;margin:0 0 14px;z-index:6}
.dsr-lb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dsr-b{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--bd2);border-radius:14px;padding:0 12px 0 14px;min-height:50px;box-shadow:var(--sh1);transition:border-color .16s,box-shadow .16s}
.dsr-b:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px #b8913f33}
.dsr-b .ic{width:20px;height:20px;flex:none;fill:none;stroke:var(--gold-lo);stroke-width:2;stroke-linecap:round}
.dsr-b input{border:0;background:transparent;box-shadow:none;padding:0;min-height:48px;flex:1;min-width:0;font-size:15px}
.dsr-b input:focus{border:0;box-shadow:none}
.dsr-b input::-webkit-search-cancel-button{display:none}
.dsr-x{min-height:30px;min-width:30px;width:30px;padding:0;border-radius:50%;border:0;background:var(--g100);color:var(--gt);font-size:20px;line-height:1;cursor:pointer}
.dsr-b kbd{font:600 12px var(--font);color:var(--mut);border:1px solid var(--bd2);border-radius:6px;padding:1px 7px;background:var(--card2)}
.dsr-r{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--bd2);border-radius:14px;box-shadow:var(--sh2);max-height:min(72vh,600px);overflow:auto;overscroll-behavior:contain}
.dsr-h{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--bd)}
.dsr-s{color:var(--mut);font-size:13px}.dsr-s b{color:var(--ink)}
.dsr-ex{display:flex;gap:8px;flex-wrap:wrap}.dsr-ex .btn{min-height:36px;padding:6px 12px;font-size:13px}
.dsr-tabs{display:flex;gap:8px;overflow-x:auto;padding:10px 14px 4px;scrollbar-width:none}
.dsr-tabs::-webkit-scrollbar{display:none}
.dsr-tabs button,.dsl-tabs button{flex:none;min-height:34px;padding:5px 13px;border-radius:99px;border:1px solid var(--bd2);background:var(--card);color:var(--txt);font:600 13px var(--font);cursor:pointer;box-shadow:none}
.dsr-tabs button em,.dsl-tabs button em{font-style:normal;color:var(--mut);font-weight:600;margin-left:3px}
.dsr-tabs button.on,.dsl-tabs button.on{background:var(--gold-50);border-color:var(--gold);color:var(--ink)}
:root[data-theme=dark] .dsr-tabs button.on,:root[data-theme=dark] .dsl-tabs button.on{background:var(--gold-100)}
.dsr-list{padding:6px}
.dsr-i{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:10px;cursor:pointer}
.dsr-i.on,.dsr-i:hover{background:var(--gold-50)}
:root[data-theme=dark] .dsr-i.on,:root[data-theme=dark] .dsr-i:hover{background:var(--g100)}
.dsr-i .g{flex:none;width:84px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-lo);padding-top:3px}
.dsr-i>div{min-width:0;flex:1}
.dsr-i b{display:block;color:var(--ink);font-weight:650;overflow-wrap:anywhere}
.dsr-i small{display:block;color:var(--mut);margin-top:1px;overflow-wrap:anywhere}
.dsr-i small.mt{color:var(--gold-lo)}
.dsr-i mark{background:#e1c47666;color:inherit;border-radius:3px;padding:0 1px}
.dsr-more{display:block;width:calc(100% - 12px);margin:2px 6px 8px;min-height:40px;border-radius:10px;border:1px dashed var(--bd2);background:transparent;color:var(--gt);font:600 13px var(--font);cursor:pointer}
.dsr-e{padding:18px 16px;color:var(--mut);text-align:center;line-height:1.6}
.dsr-e b{color:var(--ink)}

/* ---------- slider ---------- */
.dsl-w{margin:0 0 18px}
.dsl{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh1);user-select:none;-webkit-user-select:none}
.dsl-v{overflow:hidden;touch-action:pan-y}
.dsl-t{display:flex;transition:transform .55s cubic-bezier(.22,.7,.2,1)}
.dsl-s{flex:0 0 100%;min-height:176px;display:flex;align-items:center;gap:18px;padding:24px 64px 44px;color:#f4efe0;cursor:pointer;position:relative;overflow:hidden}
.dsl-s:focus-visible{outline:2px solid var(--gold-hi);outline-offset:-4px}
.sc-a{background:radial-gradient(600px 240px at 90% 0,#e1c47633,transparent 60%),linear-gradient(135deg,#04170f,#14503a)}
.sc-b{background:radial-gradient(600px 240px at 10% 100%,#e1c47633,transparent 60%),linear-gradient(135deg,#0d3626,#04170f)}
.sc-c{background:radial-gradient(600px 240px at 90% 100%,#8a1f3a66,transparent 60%),linear-gradient(135deg,#1a0a10,#4a1424)}
.sc-d{background:radial-gradient(600px 240px at 20% 0,#e1c47644,transparent 60%),linear-gradient(135deg,#2a2208,#0d3626)}
.sc-e{background:radial-gradient(700px 260px at 100% 0,#e1c47633,transparent 60%),linear-gradient(135deg,#071f15,#1b6a4d)}
.sc-f{background:radial-gradient(700px 260px at 0 100%,#e1c47633,transparent 60%),linear-gradient(135deg,#0a2a1d,#0b1f2e)}
.dsl-x{min-width:0;flex:1}
.dsl-x>small{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:6px}
.dsl-x>b{display:block;font:700 clamp(20px,3vw,29px)/1.2 var(--serif);color:#fff}
.dsl-x>span{display:block;margin-top:8px;font-size:14px;color:#e6dfc8;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dsl-x>span.kbl{margin-top:6px;-webkit-line-clamp:1}
.dsl-im{height:118px;width:80px;object-fit:cover;border-radius:10px;border:1px solid #e1c47688;flex:none;order:2}
.dsl-art{flex:0 0 min(40%,330px);order:2}
.seatart{display:block;width:100%;height:auto;max-height:150px}
.seatart .scr{stroke:var(--gold-hi);stroke-width:2.4;stroke-linecap:round;filter:drop-shadow(0 0 5px #e1c476);animation:scrglow 3.6s ease-in-out infinite}
.s{fill:#e1c476;opacity:.28;animation:seatwave 3.6s ease-in-out infinite}
.seatrow{display:block;height:14px;width:auto;max-width:100%;margin-top:10px}
.seatrow .s{fill:var(--gold)}
:root[data-theme=dark] .seatrow .s{fill:var(--gold-hi)}
.dstu-c.tot .seatrow .s{fill:#e1c476}
@keyframes seatwave{0%,60%,100%{opacity:.28}22%{opacity:1}}
@keyframes scrglow{0%,100%{opacity:.55}50%{opacity:1}}
/* kartu materi */
.kbg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px}
.kbc{background:#ffffff14;border:1px solid #e1c47633;border-radius:12px;padding:10px 12px;min-width:0}
.kbc em{display:block;font-style:normal;font-weight:700;color:var(--gold-hi);font-size:13px}
.kbc p{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:#e6dfc8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.kbh{display:block;margin-top:10px;font-size:12px;color:#d9d2b8;opacity:.8}
.dsl-s.kb{align-items:flex-start;padding-top:22px}
/* kontrol */
.dsl-b{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;min-height:40px;border-radius:50%;border:1px solid #e1c47677;background:#04170f99;color:#fff;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:2}
.dsl-b:hover{background:#04170fcc;border-color:var(--gold-hi)}
.dsl-b.p{left:10px}.dsl-b.n{right:10px}
.dsl-d{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:7px;padding:0 60px;flex-wrap:wrap}
.dsl-d button{width:8px;height:8px;min-height:0;padding:0;border-radius:99px;border:0;background:#ffffff55;cursor:pointer;transition:width .25s,background .25s;box-shadow:none}
.dsl-d button.on{width:22px;background:var(--gold-hi)}
.dsl-pg{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-hi));transition:width .25s linear}
.dsl-tabs{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 2px;scrollbar-width:none}
.dsl-tabs::-webkit-scrollbar{display:none}
/* modal materi */
.kbs{color:var(--mut);margin:2px 0 12px}
.kbm{border-left:3px solid var(--gold);padding:2px 0 2px 12px;margin:0 0 12px}
.kbm b{display:block;color:var(--ink)}
.kbm p{margin:3px 0 0;white-space:pre-line}

/* ---------- informasi bioskop ---------- */
.dstu{margin:0 0 18px}
.dstu .sh{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dstu-n{color:var(--mut)}
.dstu-g{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.dstu-c{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-m);padding:14px 16px;box-shadow:var(--sh1);transition:box-shadow .3s,border-color .3s;min-width:0}
.dstu-c .l{display:block;font-size:12.5px;font-weight:700;color:var(--gold-lo)}
.dstu-c .n{font:700 34px/1.1 var(--serif);color:var(--ink);margin-top:4px}
.dstu-c small{color:var(--mut)}
.dstu-c.tot{background:linear-gradient(135deg,#04170f,#14503a);border-color:#e1c47655}
.dstu-c.tot .l{color:var(--gold-hi)}.dstu-c.tot .n{color:#fff}.dstu-c.tot small{color:#d9d2b8}
.flash{border-color:var(--gold)!important;box-shadow:0 0 0 4px #b8913f44!important}
@media(max-width:900px){.dstu-g{grid-template-columns:repeat(2,1fr)}.dstu-c.tot{grid-column:1/-1}}
@media(max-width:700px){.kbc p{display:none}.kbg{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.kbc{padding:5px 11px;border-radius:99px}.kbc em{font-size:12px}}
@media(max-width:560px){.dsl-s{padding:18px 18px 42px;min-height:170px;gap:10px}.dsl-b{display:none}.dsl-im{height:96px;width:64px}.dsl-art{flex-basis:44%}.dsl-d{padding:0 14px}.dsr-i .g{width:62px}.dsr-b kbd{display:none}.dsr-r{max-height:68vh}.dsl-x>b{font-size:19px}}
@media(prefers-reduced-motion:reduce){.dsl-t{transition:none}.s,.seatart .scr{animation:none;opacity:.85}}

/* ===== bagian: style-dash2.css ===== */
/* =====================================================================
   DASHBOARD v3 - tata letak baru (hero ringkas, pencarian, catat cepat,
   kartu ringkasan, dua kolom konten). Dimuat paling akhir.
   Semua kelas baru berawalan "dx-" agar tidak bentrok dengan halaman lain.
   ===================================================================== */
.dx{display:flex;flex-direction:column;gap:22px;max-width:1480px;margin:0 auto}
.dx>*{min-width:0}

/* ---------- hero ringkas ---------- */
.dx-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:172px;padding:28px 32px;border-radius:var(--r-l);color:#fff;background:radial-gradient(90% 150% at 92% 0,#1d7452 0,#0d3626 46%,#04140d 100%);animation:rise .45s both}
.dx-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#03100a 0,#03100acc 42%,transparent 78%);pointer-events:none}
.dx-hi{position:relative;z-index:1;max-width:62%}
.dx-hi small{display:block;margin-bottom:6px;color:var(--gold-hi);font-size:13px;font-weight:600}
.dx-hi h1{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.1vw,38px);line-height:1.12;overflow-wrap:anywhere}
.dx-sum{display:inline-flex;align-items:center;gap:9px;margin:14px 0 0;padding:6px 14px 6px 12px;border-radius:99px;background:#ffffff14;border:1px solid #ffffff26;color:#e4efe9;font-size:13.5px;line-height:1.35}
.dx-sum i{flex:none;width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px #4ade8038}
.dx-sum.warn i{background:#fbbf24;box-shadow:0 0 0 3px #fbbf2438}
.dx-img{position:absolute;z-index:-1;right:3%;top:50%;height:132%;aspect-ratio:1240/968;transform:translateY(-50%);pointer-events:none}
.dx-img img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 24px 28px #000c) drop-shadow(0 0 50px #2a8a6540)}

/* ---------- pencarian ---------- */
.dsx{position:relative;z-index:8}
.dsx .dsr-b{min-height:54px;border-radius:var(--r-m);padding:0 14px 0 16px;box-shadow:var(--sh0)}
.dsx .dsr-b input{font-size:15px}
.dsx .dsr-r{top:calc(100% + 8px)}

/* ---------- catat cepat ---------- */
.dx-lb{margin:0 0 10px 2px;color:var(--mut);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.dx-qg{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.dx-q{display:flex;align-items:center;gap:12px;min-height:66px;padding:12px 14px;text-align:left;color:var(--txt);background:var(--card);border:1px solid var(--bd);border-radius:var(--r-m);box-shadow:var(--sh0)}
.dx-q i{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:11px;background:var(--g50);color:var(--gt);transition:background .16s,color .16s}
.dx-q span{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.dx-q b{font-size:14px;color:var(--ink)}
.dx-q small{font-size:12px;color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dx-q:hover{border-color:var(--gold);transform:translateY(-1px)}
.dx-q:hover i{background:var(--moss-700);color:var(--gold-hi)}

/* ---------- kartu ringkasan ---------- */
.dx-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px}
.dx-k{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l i" "n n" "s s";align-items:center;gap:2px 10px;min-height:116px;padding:15px 16px;text-align:left;color:var(--txt);background:var(--card);border:1px solid var(--bd);border-radius:var(--r-m);box-shadow:var(--sh0);font-weight:400}
.dx-k .l{grid-area:l;font-size:12.5px;font-weight:700;color:var(--mut)}
.dx-ki{grid-area:i;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--g50);color:var(--gt)}
.dx-ki .ic{width:18px;height:18px}
.dx-k .n{grid-area:n;margin-top:8px;font-size:36px;font-weight:700;line-height:1.05;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.dx-k small{grid-area:s;margin-top:2px;font-size:12px;color:var(--mut)}
button.dx-k{cursor:pointer}
button.dx-k:hover{border-color:var(--gold);transform:translateY(-1px)}
.dx-k.day{color:#fff;border-color:transparent;background:linear-gradient(150deg,var(--moss-600),var(--moss-900))}
.dx-k.day .l,.dx-k.day small{color:#ffffffc4}.dx-k.day .n{color:#fff}
.dx-k.day .dx-ki{background:#ffffff1f;color:var(--gold-hi)}
.dx-k.warn{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 38%,transparent)}
.dx-k.warn .l,.dx-k.warn .n,.dx-k.warn small{color:var(--warn)}
.dx-k.warn .dx-ki{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.dx-k.good{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 32%,transparent)}
.dx-k.good .l,.dx-k.good .n,.dx-k.good small{color:var(--ok)}
.dx-k.good .dx-ki{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}

/* ---------- konten dua kolom ---------- */
.dx-cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;align-items:start}
.dx-main,.dx-side{display:flex;flex-direction:column;gap:24px;min-width:0}
.dx-sec{margin:0;min-width:0}
.dx-sec .sh{margin:0 0 10px}
.dx-sec.dac,.dx-sec.dchart,.dx-sec.dsl-w{margin:0}
.dx-sec .tk:last-child{margin-bottom:0}
.dx-sec .empty{padding:26px 20px}
.dx .dac-g{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
.dx .dc-b{padding:16px 18px 4px}

/* aktivitas terbaru */
.dx-al{overflow:hidden;background:var(--card);border:1px solid var(--bd);border-radius:var(--r-l);box-shadow:var(--sh0)}
.dx-ai{display:flex;align-items:center;gap:14px;width:100%;min-height:0;padding:12px 16px;text-align:left;color:var(--txt);background:transparent;border-radius:0;border-bottom:1px solid var(--bd)}
.dx-ai:last-child{border-bottom:0}
.dx-ai:hover{background:var(--row2)}
.dx-ai:active{transform:none}
.dx-ai .kat{flex:none;min-width:116px;text-align:center}
.dx-ai .m{display:flex;flex-direction:column;flex:1;min-width:0}
.dx-ai .m b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:600}
.dx-ai .m small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--mut)}
.dx-ai em{flex:none;font-style:normal;font-size:22px;line-height:1;color:var(--ph)}
.dx-ai:hover em{color:var(--gold)}

/* pengumuman */
.dx-ann .ann{margin:0 0 10px!important}
.dx-ann .ann:last-child{margin-bottom:0!important}
.dx-ann .ann>div:not(.empty){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* informasi bioskop */
.dstu-b{padding:4px 18px;background:var(--card);border:1px solid var(--bd);border-radius:var(--r-l);box-shadow:var(--sh0)}
.dstu-r{display:grid;grid-template-columns:68px minmax(0,1fr) 84px;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--bd);border-radius:8px;transition:border-color .3s,box-shadow .3s}
.dstu-r .nm{font-size:13.5px;font-weight:600;color:var(--ink)}
.dstu-r i{display:block;height:8px;border-radius:99px;background:var(--g100);overflow:hidden}
.dstu-r i b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--moss-600),var(--gold));transform-origin:left;animation:grow .9s .2s both cubic-bezier(.2,.8,.2,1)}
.dstu-r strong,.dstu-t strong{text-align:right;font-weight:700;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.dstu-r small,.dstu-t small{font-size:12px;font-weight:500;color:var(--mut)}
.dstu-t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:13px 0 11px}
.dstu-t span{font-size:12.5px;font-weight:700;color:var(--gold-lo)}
.dstu-t strong{font-size:19px}

/* sorotan */
.dx-sec.dsl-w .dsl-tabs{padding-top:12px}

/* ---------- responsif ---------- */
@media(max-width:1100px){.dx-cols{grid-template-columns:1fr}}
@media(max-width:820px){
 .dx{gap:18px}
 .dx-hero{min-height:150px;padding:22px 20px}
 .dx-hi{max-width:100%}
 .dx-img{opacity:.38;right:-6%;height:118%}
 .dx-kpi{grid-template-columns:1fr 1fr}
 .dx-kpi>:last-child:nth-child(odd){grid-column:1/-1}
 .dx-k{min-height:104px}.dx-k .n{font-size:32px}
}
@media(max-width:620px){
 .dx-qg{grid-template-columns:1fr 1fr}
 .dx-qg>:last-child:nth-child(odd){grid-column:1/-1}
 .dx-q{flex-direction:column;align-items:flex-start;gap:10px;padding:13px}
 .dx-ai{flex-wrap:wrap;gap:6px 12px;padding:12px 14px}
 .dx-ai .kat{min-width:0}
 .dx-ai .m{flex:1 1 100%;order:3}
 .dx-ai em{display:none}
 .dstu-r{grid-template-columns:60px minmax(0,1fr) 74px}
}
@media(max-width:380px){.dx-hi h1{font-size:24px}.dx-sum{font-size:12.5px}}
@media(prefers-reduced-motion:reduce){.dx-hero,.dstu-r i b{animation:none}}

/* ===== revisi: urutan berdasarkan prioritas, sapaan ramping, kartu AC lega ===== */
.dx{gap:26px}
.dx-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.dx-top small{display:block;color:var(--mut);font-size:13px;font-weight:600;margin-bottom:2px}
.dx-top h1{margin:0;font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.2;color:var(--ink);letter-spacing:-.01em}
.dx-top .dx-sum{margin:0;background:var(--card);border:1px solid var(--bd);color:var(--txt);box-shadow:var(--sh0)}
.dx-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.dx-col{display:flex;flex-direction:column;gap:24px;min-width:0}
.dx-sec.dsl-w .sh{display:none}
.dsl-s{min-height:230px}
/* monitoring AC */
.dx .dac-b{padding:22px 24px 24px}
.dx .dac-s{margin:0 0 20px;font-size:14px}
.dx .dac-g{grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:14px}
.dx .dac-c{gap:4px;min-height:124px;padding:18px 20px;border-radius:14px;box-shadow:none;border:1px solid var(--bd);position:relative}
.dx .dac-c::before{content:"";position:absolute;top:18px;right:18px;width:9px;height:9px;border-radius:50%;background:var(--ph)}
.dx .dac-c.ok::before{background:var(--ok-hi)}
.dx .dac-c.bad::before{background:var(--red)}
.dx .dac-c.cold::before{background:#d9a400}
.dx .dac-c b{font-size:12.5px;letter-spacing:.08em}
.dx .dac-c .dac-t{margin-top:6px;font-size:28px;font-weight:700}
.dx .dac-c small{margin-top:10px;padding:3px 10px;border-radius:99px;background:var(--g100);font-size:11.5px;letter-spacing:.02em}
.dx .dac-c.ok small{background:var(--ok-bg)}
.dx .dac-c.bad small{background:var(--red-bg)}
.dx .dac-c.cold small{background:var(--warn-bg)}
.dx .dac-c.na span{margin-top:10px}
.dx .dac-c.ok,.dx .dac-c.bad,.dx .dac-c.cold,.dx .dac-c.na2{box-shadow:none}
@media(max-width:900px){.dx-cols{grid-template-columns:1fr}}
@media(max-width:620px){.dx .dac-b{padding:16px}.dx .dac-g{grid-template-columns:1fr 1fr;gap:12px}.dx .dac-c{padding:14px 16px;min-height:112px}.dx .dac-c .dac-t{font-size:24px}.dsl-s{min-height:200px}}

/* ===== bagian: style-reference.css ===== */
/* STC XXI — premium cinema technical UI refresh
   Presentation layer only. Existing IDs, navigation, forms, handlers and Apps Script calls are preserved. */
:root{
 --moss-950:#03110e;--moss-900:#061b17;--moss-800:#0a2923;--moss-700:#104438;
 --gold:#c89b48;--gold-hi:#edcb7a;--gold-lo:#8e6b2c;
 --bg:#06100e;--card:#0b1c19;--card2:#0e2420;--bd:#1b3932;--bd2:#2b5147;
 --ink:#f3f7f3;--txt:#d4e1db;--mut:#91aaa0;--ph:#6e8980;--lbl:#b8cbc2;
 --g50:#10251f;--g100:#153329;--g200:#275447;--row2:#0d211c;--dis:#0b1d18;
 --gt:#a4e2c3;--gt2:#50c994;--brass:var(--gold);--brass-l:var(--gold-hi);--brass-d:var(--gold-lo);--brass-50:#241d0f;
 --r-s:9px;--r-m:15px;--r-l:20px;--sh1:0 8px 22px #0003;--sh2:0 22px 65px #0007;
}
:root[data-theme=light]{
 --bg:#edf2ee;--card:#fff;--card2:#f5f8f5;--bd:#dce7df;--bd2:#c8d8ce;
 --ink:#10251c;--txt:#263d32;--mut:#657b6e;--ph:#879a8e;--lbl:#3b5547;
 --g50:#edf5ef;--g100:#dcebe0;--g200:#c1dac9;--row2:#f7faf7;--dis:#f0f5f1;
 --gt:#0b5036;--gt2:#16734d;--sh1:0 8px 22px #0b382012;--sh2:0 22px 65px #0b382022;
}
html{scroll-behavior:smooth}
body{background:
 radial-gradient(ellipse at 72% -10%,#174a3b35,transparent 38%),
 radial-gradient(ellipse at 5% 65%,#c89b4810,transparent 34%),var(--bg);
 letter-spacing:.005em}
button,.btn,a,input,select,textarea{transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
#side{background:linear-gradient(180deg,#071c17f7,#04130ff7);border-right:1px solid #31524780;box-shadow:12px 0 40px #00000012}
.brand{padding-top:20px;padding-bottom:20px;border-bottom:1px solid #ffffff0d}
.brand img,.hlogo{filter:drop-shadow(0 2px 8px #d2a94a20)}
.brand b,.hs b{letter-spacing:.01em}
#main>header{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--bd);box-shadow:0 8px 28px #0000000b}
#view{padding:clamp(14px,2vw,28px);max-width:1800px;margin-inline:auto;width:100%}
.card,.dq,.ds-big,.ds-list,.dact,.dc-b,.dx-q,.dx-k,.dx-studio,.dx-panel,
.card,.dq,.ds-big,.ds-list,.dact,.dc-b{background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--card2) 65%,var(--card)))}
.card:hover,.dx-q:hover,.dx-studio:hover{border-color:color-mix(in srgb,var(--gold) 65%,var(--bd))!important;transform:translateY(-2px)}
.btn{border-radius:10px;font-weight:700;letter-spacing:.01em}
.btn:not(.sec){background:linear-gradient(135deg,#e0bb68,#b98a36);color:#1c170b;border:1px solid #f0d48a;box-shadow:0 5px 16px #b88a3622}
.btn:not(.sec):hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn.sec{border-color:var(--bd2);background:var(--card2)}
input,select,textarea{border-radius:10px!important;border-color:var(--bd2)!important}
#nav a,#nav button{border-radius:10px;margin:3px 8px;width:calc(100% - 16px)}
#nav .active,#nav [aria-current=page]{background:linear-gradient(100deg,#15563f,#0d382b)!important;color:#f2f8f3!important;border:1px solid #287557}
#nav a:hover,#nav button:hover{background:var(--g50)}
.sme{border-top:1px solid #ffffff12}
#login{background:radial-gradient(ellipse at 75% 45%,#1b5b4b44,transparent 45%),linear-gradient(135deg,#03100d,#071b16 55%,#020a08)}
#login .lhero{isolation:isolate}
#login .lhero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#03110ef2 0%,#03110eb8 46%,#03110e18 100%);pointer-events:none}
#login .lscene{filter:saturate(.88) contrast(1.06)}
#login .lphoto{object-fit:cover}
#login .lpane{backdrop-filter:blur(20px)}
#login .lbox{border:1px solid #ffffff1c;background:linear-gradient(145deg,#0a211ddd,#06130fe8);box-shadow:0 25px 80px #0007;border-radius:22px}
#login .lbox h2{letter-spacing:-.025em}
#login .lbox input{background:#071b17;border-color:#31564a!important;color:#eff8f2}
#login .lbox input:focus{box-shadow:0 0 0 3px #c89b4833}
#login .lfoot{color:#91aaa0}
.dx{gap:18px}
.dx-hero{position:relative;overflow:hidden;min-height:clamp(220px,25vw,340px);padding:clamp(22px,3vw,42px);border:1px solid #376255!important;background:
 linear-gradient(90deg,#03130ff5 0%,#041712e8 38%,#04171265 70%,#04171235 100%),
 url("img/projector-hero-4k.webp") right 42%/auto 125% no-repeat,
 radial-gradient(ellipse at 80% 25%,#28604d,#061b16 65%)!important}
.dx-hero:after{background:linear-gradient(90deg,#03110e55,transparent 82%)}
.dx-hi{max-width:min(60%,650px)}
.dx-hi h1{font-family:var(--font);font-weight:800;letter-spacing:-.035em;font-size:clamp(28px,3.2vw,46px)}
.dx-hi small{letter-spacing:.17em;text-transform:uppercase}
.dx-sum{border-color:#c89b4866;background:#061a15b8}
.dx-qa,.dx-kpi{gap:12px}
.dx-q,.dx-k{background:linear-gradient(145deg,var(--card2),var(--card));border:1px solid var(--bd);min-width:0}
.dx-q{padding:14px;border-radius:14px}
.dx-q i,.dx-ki{border-radius:12px}
.dx-k .n{font-size:clamp(24px,2vw,34px);font-weight:800;letter-spacing:-.035em}
.dx-cols{gap:16px}
.dx-col{gap:16px;min-width:0}
.dx-col>section,.dx-col>.card,.dx-col>.dq{min-width:0}
.dx-studios{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr));gap:10px}
.dx-studio{min-width:0;padding:14px;background:linear-gradient(145deg,var(--card2),var(--card));border:1px solid var(--bd)}
.dx-studio .n,.dx-studio strong{font-variant-numeric:tabular-nums}
.dx-studio .seat,.dx-studio small{color:var(--mut)}
/* ATS poster remains a real image/card; prevent the poster from dominating the dashboard. */
.dx-ats,.ats-card{min-width:0}
.dx-ats img,.ats-card img{max-width:100%;object-fit:cover}
.dx-ats .poster,.ats-card .poster{width:clamp(78px,8vw,120px);aspect-ratio:2/3;flex:0 0 auto;border-radius:10px;overflow:hidden}
.dx-ats .poster img,.ats-card .poster img{width:100%;height:100%;object-fit:cover}
#view img{image-rendering:auto}
table{border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:10px}
th{background:var(--g50);color:var(--ink);font-weight:750}
td,th{border-color:var(--bd)!important}
tr:hover td{background:color-mix(in srgb,var(--g50) 60%,transparent)}
footer,#cp{color:var(--mut);border-top:1px solid var(--bd)}
@media(min-width:1500px){#view{padding:30px 36px}.dx{gap:22px}}
@media(max-width:900px){
 #view{padding:14px}
 .dx-hero{min-height:235px;background-position:center,right 42%;background-size:auto,auto 115%,auto}
 .dx-hi{max-width:78%}
 .dx-cols{grid-template-columns:minmax(0,1fr)!important}
 .dx-qa{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dx-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
 #view{padding:12px 10px calc(var(--tabh) + 18px)}
 .dx{gap:13px}
 .dx-hero{min-height:255px;padding:22px 18px;background:
 linear-gradient(90deg,#03130ff5 0%,#041712dc 62%,#0417128a 100%),
 url("img/projector-hero-4k.webp") 70% center/auto 100% no-repeat,
 #061b16!important}
 .dx-hi{max-width:100%}
 .dx-hi h1{font-size:clamp(25px,7vw,34px);max-width:15ch}
 .dx-hi p{max-width:32ch}
 .dx-qa{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .dx-q{padding:11px;gap:9px}
 .dx-q small{font-size:11px}
 .dx-kpi{gap:8px}
 .dx-k{padding:12px}
 .dx-studios{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .dx-studio{padding:11px}
 .dx-cols{gap:12px}
 .card,.dq,.ds-big,.ds-list{padding:14px}
 #login .lbox{margin:14px;border-radius:18px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Static seat capacity: cards instead of proportional bars/graphs. */
.dstu-b.dstu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.dstu-card{display:grid;justify-items:start;align-content:start;gap:5px;min-width:0;padding:14px;border:1px solid var(--bd);border-radius:13px;background:linear-gradient(145deg,var(--card2),var(--card))}
.dstu-card .dstu-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:var(--gold-hi);background:#c89b481a;border:1px solid #c89b4833}
.dstu-card .nm{font-size:12px;color:var(--mut);font-weight:650}
.dstu-card strong{font-size:25px;line-height:1.1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.dstu-card>small{font-size:11px;color:var(--mut)}
.dstu-t{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid #c89b4855;border-radius:13px;background:linear-gradient(100deg,#c89b4818,transparent);color:var(--txt)}
.dstu-t strong{font-size:clamp(20px,2.5vw,28px);color:var(--gold-hi)}
@media(max-width:480px){.dstu-b.dstu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dstu-card{padding:11px}}

/* Hotfix 2026-10: use the actual 4K cinematic photo, not the old white-background product cutout. */
#login .lscene{
 width:min(680px,100%); aspect-ratio:16/9; margin:12px 0 18px;
 overflow:hidden; border-radius:16px; background:#04100d;
 box-shadow:0 22px 55px #0008; isolation:isolate;
}
#login .lscene picture{display:block;width:100%;height:100%}
#login .lphoto{
 display:block;width:100%;height:100%;object-fit:cover;object-position:center;
 margin:0;mix-blend-mode:normal;filter:none;animation:none;
}
#login .lbeam,#login .lglow{display:none!important}
#login .lscene:after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(90deg,#03110e55,transparent 65%),linear-gradient(0deg,#03110e55,transparent 32%)}
#login .lhero{gap:0}
#login .lhero .llogo{width:min(190px,45%);max-height:78px;object-fit:contain}
#login .lhero h1{margin:4px 0 6px}
#login .lhero .tag{max-width:38ch}
@media(max-width:760px){
 #login .lscene{width:min(100%,520px);border-radius:12px;margin:10px 0 14px}
 #login .lhero{padding:24px 18px}
}

/* Reference-aligned layout overrides: target existing application classes only. */
#login{grid-template-columns:minmax(0,1.28fr) minmax(380px,.72fr);gap:0;background:#04100e;}
#login .lhero{min-width:0;min-height:100vh;min-height:100dvh;align-items:flex-start;text-align:left;justify-content:center;padding:clamp(28px,4vw,68px);background:linear-gradient(135deg,#061b16,#03100d 80%);}
#login .lhero:before{z-index:1;background:linear-gradient(90deg,#03110edc 0%,#03110e70 48%,#03110e18 100%);}
#login .lhero .llogo{width:clamp(110px,13vw,180px);max-height:70px;object-position:left center;object-fit:contain;align-self:flex-start;}
#login .lscene{width:100%;max-width:920px;aspect-ratio:16/9;margin:clamp(14px,3vh,30px) 0 16px;overflow:hidden;border-radius:18px;background:#061612;box-shadow:0 18px 55px #0007;border:1px solid #ffffff16;}
#login .lscene picture{display:block;width:100%;height:100%;}
#login .lhero .lphoto{width:100%;height:100%;object-fit:cover;object-position:center;mix-blend-mode:normal;filter:none;animation:none;}
#login .lhero h1{font-size:clamp(30px,3.3vw,48px);margin-top:5px;}
#login .lhero .sub{margin-top:9px;}
#login .lhero .tag{max-width:440px;margin-top:16px;line-height:1.7;}
#login .lpane{min-width:0;padding:clamp(24px,4vw,64px);background:radial-gradient(ellipse at 80% 40%,#174b3d50,transparent 48%),#030b09;}
#login .lbox{width:min(100%,470px);padding:clamp(22px,2.4vw,38px);}
#login .lbox h2{font-size:clamp(26px,2.4vw,36px);line-height:1.12;}
/* Banner: real 4K projector photograph and one capacity figure, no animated seat chart. */
.dx{gap:15px;}
.dx-top{margin-bottom:1px;}
.dx-sec.dsl-w{margin:0;}
.dx-sec.dsl-w .sh{display:none;}
.dsl{border:1px solid #285348;border-radius:18px;overflow:hidden;background:#041510;box-shadow:0 16px 40px #0002;}
.dsl-v{overflow:hidden;}
.dsl-s{min-height:clamp(205px,20vw,290px);padding:clamp(22px,3vw,42px) clamp(26px,3vw,52px) 45px;gap:22px;background:#061b16;}
.dsl-s.sc-a{background:linear-gradient(90deg,#03120ff5 0%,#041712df 38%,#04171240 100%);}
.dsl-s.sc-a:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#03120ff0 0%,#03120fc4 38%,#03120f12 100%),url("img/projector-hero-4k.webp") right center/cover no-repeat;z-index:0;pointer-events:none;}
.dsl-s.sc-a .dsl-x{position:relative;z-index:1;max-width:min(58%,610px);}
.dsl-s.sc-a .dsl-x>small{font-size:10px;letter-spacing:.2em;color:#b7d4c8;}
.dsl-s.sc-a .dsl-x>b{font-size:clamp(22px,2.4vw,34px);line-height:1.12;max-width:16ch;}
.dsl-s.sc-a .dsl-x>span{font-size:13px;line-height:1.5;color:#d5e5dc;margin-top:8px;}
.dsl-s.sc-a .dsl-im,.dsl-s.sc-a .dsl-art{display:none;}
.dsl-d{z-index:3;}
.dsl-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px;}
.dsl-tabs button{border-radius:999px;padding:8px 13px;background:var(--card);border:1px solid var(--bd);color:var(--txt);}
.dsl-tabs button.on{background:#c89b4826;border-color:#c89b48;color:var(--gold-hi);}
.dx-qa .dx-lb{margin-bottom:8px;}
.dx-qg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;}
.dx-q{display:flex;align-items:center;min-height:68px;padding:12px;}
.dx-kpi{grid-template-columns:repeat(5,minmax(0,1fr));}
.dx-cols{gap:14px;}
.dx-ats .tk,.dx-sec:has(.tk){min-width:0;}
.dstu-b.dstu-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.dstu-card{min-height:115px;}
@media(max-width:1100px){#login{grid-template-columns:1fr 1fr;} .dx-qg{grid-template-columns:repeat(3,minmax(0,1fr));}.dx-kpi{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:800px){#login{grid-template-columns:1fr;}#login .lhero{min-height:auto;padding:28px 20px 18px;}#login .lhero .llogo{width:100px;max-height:48px;}#login .lscene{max-width:620px;aspect-ratio:16/9;margin:12px 0;}#login .lhero h1{font-size:28px;}#login .lhero .tag{display:block;font-size:12px;margin-top:8px;}#login .lpane{padding:18px 16px 34px;align-items:center;}#login .lbox{margin:0;}.dx-qg{grid-template-columns:repeat(2,minmax(0,1fr));}.dx-kpi{grid-template-columns:repeat(2,minmax(0,1fr));}.dx-cols{grid-template-columns:1fr!important}.dstu-b.dstu-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.dsl-s.sc-a .dsl-x{max-width:90%;}}
@media(max-width:480px){.dsl-s{padding:20px 18px 42px;min-height:215px}.dsl-s.sc-a .dsl-x>b{font-size:23px}.dx-q{padding:10px;min-height:64px}.dx-kpi>:last-child:nth-child(odd){grid-column:auto;}}

/* Login contrast + theme hotfix 2026-10-20.
   Explicitly scope every login control so the two theme modes do not inherit conflicting legacy colors. */
#login .lbox{color:var(--ink);}
#login .lbox .hello{color:var(--gold-hi)!important;}
#login .lbox h2{color:var(--ink)!important;text-shadow:none!important;opacity:1!important;}
#login .lbox p{color:var(--txt)!important;opacity:1!important;}
#login .lbox label{color:var(--lbl)!important;}
#login .lbox input{background:#071b17!important;color:#f3f7f3!important;border:1px solid #31564a!important;caret-color:var(--gold-hi);}
#login .lbox input::placeholder{color:#91aaa0!important;opacity:1;}
#login .lbox input:-webkit-autofill{-webkit-text-fill-color:#f3f7f3!important;box-shadow:0 0 0 1000px #071b17 inset!important;}
#login #tp{min-height:48px;padding:0 15px;background:#10251f!important;color:#e7f3ec!important;border:1px solid #31564a!important;box-shadow:none!important;}
#login #tp:hover{background:#18392e!important;border-color:#c89b48!important;}
#login #lbtn{color:#1c170b!important;background:linear-gradient(135deg,#e0bb68,#b98a36)!important;border:1px solid #f0d48a!important;}
#login .lfoot{color:#91aaa0!important;}
#login .lthm{background:#10251f!important;color:#edcb7a!important;border:1px solid #31564a!important;box-shadow:0 5px 18px #0003!important;}
:root[data-theme="dark"] #login .lpane{background:radial-gradient(ellipse at 80% 40%,#174b3d50,transparent 48%),#030b09!important;}
:root[data-theme="dark"] #login .lbox{background:linear-gradient(145deg,#0a211ddd,#06130fe8)!important;border-color:#ffffff1c!important;}
:root[data-theme="dark"] #login .lbox h2{color:#f3f7f3!important;}
:root[data-theme="dark"] #login .lbox label{color:#b8cbc2!important;}
:root[data-theme="light"] #login{background:#edf2ee!important;}
:root[data-theme="light"] #login .lpane{background:radial-gradient(ellipse at 80% 40%,#d8e9df 0%,transparent 55%),#edf2ee!important;}
:root[data-theme="light"] #login .lbox{background:rgba(255,255,255,.96)!important;border:1px solid #d5e2d9!important;box-shadow:0 25px 70px #0b38201a!important;color:#10251c!important;}
:root[data-theme="light"] #login .lbox .hello{color:#8e6b2c!important;}
:root[data-theme="light"] #login .lbox h2{color:#10251c!important;}
:root[data-theme="light"] #login .lbox p{color:#42594c!important;}
:root[data-theme="light"] #login .lbox label{color:#344d40!important;}
:root[data-theme="light"] #login .lbox input{background:#fff!important;color:#10251c!important;border-color:#c8d8ce!important;}
:root[data-theme="light"] #login .lbox input::placeholder{color:#879a8e!important;}
:root[data-theme="light"] #login .lbox input:-webkit-autofill{-webkit-text-fill-color:#10251c!important;box-shadow:0 0 0 1000px #fff inset!important;}
:root[data-theme="light"] #login #tp{background:#edf5ef!important;color:#164b36!important;border-color:#c8d8ce!important;}
:root[data-theme="light"] #login #tp:hover{background:#dcebe0!important;}
:root[data-theme="light"] #login .lfoot{color:#657b6e!important;}
:root[data-theme="light"] #login .lthm{background:#fff!important;color:#164b36!important;border-color:#c8d8ce!important;}
@media(max-width:800px){#login .lhero{min-width:0;}#login .lbox{width:100%;max-width:470px;}#login .lpane{min-width:0;}}

/* ===== Hotfix mode terang 2026-10-20 =====
   Penyebab: :root di file ini berisi palet GELAP dan menimpa :root terang di style.css, lalu warna emas pucat
   (--gold-hi, dirancang untuk latar gelap) ikut dipakai sebagai warna TEKS di atas kartu terang
   (tab "Bioskop", ikon dan total kursi studio, dst.) sehingga hampir tak terbaca.
   Perbaikan: --gold-ink = emas tua untuk teks di permukaan terang; mode gelap tetap memakai --gold-hi. */
:root{--gold-ink:var(--gold-hi)}
:root[data-theme=light]{--gold-ink:#7c5a14}
.dstu-card .dstu-icon,.dstu-t strong,.dsl-tabs button.on{color:var(--gold-ink)}
:root[data-theme=light] .dsl-tabs button.on{background:#f6ead0;border-color:#b98a36}
:root[data-theme=light] .dstu-card .dstu-icon{background:#f6ecd2;border-color:#d9c48a}
:root[data-theme=light] .dstu-t{background:linear-gradient(100deg,#f8eed2,#fcf7e8);border-color:#d9c48a}
:root[data-theme=light] .dstu-c.tot .l{color:var(--gold-ink)}
/* teks "Belum diisi" dan panah daftar terlalu pudar di latar terang */
:root[data-theme=light] .dac-c.na span,:root[data-theme=light] .dx-ai em{color:var(--mut)}
/* chip Monitoring AC: kondisi (Studio kosong / Tidak ada show) memakai ukuran teks biasa, bukan ukuran angka suhu */
.dx .dac-c .dac-t.dac-cn{font-size:15px;line-height:1.3;font-weight:700;letter-spacing:0;margin-top:8px}
/* tombol utama mode gelap: aturan lama (hijau) mengalahkan gaya emas sehingga teks gelap di atas hijau (kontras rendah) */
:root[data-theme=dark] .btn:not(.sec){background:linear-gradient(135deg,#e0bb68,#b98a36);border:1px solid #f0d48a;color:#1c170b;box-shadow:0 5px 16px #b88a3622}
:root[data-theme=dark] .btn:not(.sec):hover{background:linear-gradient(135deg,#e9c776,#c4953f)}
:root[data-theme=dark] .btn:not(.sec):disabled{opacity:.55}

/* ===== Perbaikan mode terang + kerapian login (rev 2026-10-20) =====
   1) Hover menu samping memakai latar terang (--g50) sehingga teks putih tidak terbaca di mode terang.
      Sidebar selalu gelap, jadi hover juga dibuat gelap di kedua mode. */
#side #nav a:hover,#side #nav button:hover{background:#ffffff14;color:#ffffff}
#side #nav a.on:hover,#side #nav [aria-current=page]:hover{background:linear-gradient(100deg,#15563f,#0d382b)!important;color:#f2f8f3!important}

/* 2) Login: foto proyektor lebih kecil agar seluruh halaman muat tanpa scroll, susunan form lebih rapi. */
#login .lhero .llogo{margin-bottom:0}
#login .lhero .lscene{max-width:600px;margin:clamp(12px,2.6vh,26px) 0 14px}
#login .lhero h1{font-size:clamp(28px,3vw,44px);line-height:1.05}
#login .lhero .tag{font-size:14px;margin-top:12px}
#login .lbox{width:min(100%,440px)}
#login .lbox .hello{letter-spacing:.02em;margin-bottom:8px}
#login .lbox h2{margin:0 0 8px}
#login .lbox>p{margin:0 0 22px;font-size:14px;line-height:1.6}
#login .lbox label{display:block;font-size:13px;font-weight:650;margin:16px 0 7px}
#login .lbox input{width:100%;height:46px;padding:0 14px;font-size:15px;box-sizing:border-box;border-radius:11px!important}
#login .lbox .pw{display:flex;gap:8px;align-items:stretch}
#login .lbox .pw input{flex:1;min-width:0}
#login #tp{height:46px;min-height:46px;border-radius:11px;flex:0 0 auto;padding:0 16px;font-size:14px}
#login #lbtn{height:48px;min-height:48px;margin-top:22px!important;border-radius:12px;font-size:15px;letter-spacing:.02em}
#login #lerr:empty{display:none}
#login #lerr:not(:empty){margin-top:12px;font-size:13px;color:#c0392b;font-weight:600}
#login .lfoot{margin-top:22px;font-size:12px;text-align:center}
:root[data-theme=light] #login #lerr:not(:empty){color:#b3261e}
@media(max-height:760px){#login .lhero .lscene{max-width:460px}#login .lhero .tag{display:none}}
@media(max-width:800px){#login .lhero .lscene{max-width:100%}#login .lhero .tag{display:block}}

/* ===== Rev 3: hero login sinematik — foto proyektor memenuhi panel kiri ===== */
#login .lhero{padding:clamp(28px,4vw,64px);isolation:isolate;justify-content:flex-start}
#login .lhero .lscene{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;margin:0;border:0;border-radius:0;box-shadow:none;background:#03100d;z-index:0;filter:saturate(.95) contrast(1.05)}
#login .lhero .lphoto{transform:scale(1.03);transition:transform 2.6s cubic-bezier(.2,.7,.2,1)}
#login .lhero:hover .lphoto{transform:scale(1.07)}
#login .lhero:before{z-index:1;background:linear-gradient(180deg,#03110e30 0%,#03110e00 30%,#03110e00 62%,#03110ea0 100%),linear-gradient(90deg,#03110ec8 0%,#03110e70 34%,#03110e10 70%,#03110e00 100%)}
#login .lhero>*:not(.lscene){position:relative;z-index:2}
#login .lhero .llogo{margin-bottom:auto;height:auto;max-height:64px;width:clamp(120px,12vw,168px);object-fit:contain;object-position:left center;filter:drop-shadow(0 4px 18px #0009)}
#login .lhero h1{font-size:clamp(46px,5.6vw,88px);line-height:.96;letter-spacing:-.025em;margin:0 0 16px;text-shadow:0 6px 40px #0008}
#login .lhero .sub{font-size:13px;letter-spacing:.24em;color:var(--gold-hi);font-weight:700}
#login .lhero .sub::before{content:"";display:block;width:56px;height:2px;background:var(--gold);margin-bottom:16px;border-radius:2px}
#login .lhero .tag{display:block!important;font-size:15px;line-height:1.7;color:#d5e5dc;max-width:460px;margin-top:18px;opacity:.92}
@media(max-height:760px){#login .lhero .tag{display:block!important}#login .lhero h1{font-size:clamp(40px,4.6vw,72px)}}
@media(max-width:800px){
 #login .lhero{min-height:auto;padding:26px 22px 30px}
 #login .lhero .lscene{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9;margin:0 0 22px;border-radius:16px;border:1px solid #ffffff16;box-shadow:0 18px 50px #0007;order:0}
 #login .lhero:before{background:linear-gradient(180deg,#03110e40,#03110ef2 100%)}
 #login .lhero .llogo{margin-bottom:16px;max-height:48px}
 #login .lhero h1{font-size:clamp(34px,10vw,48px);margin-bottom:10px}
 #login .lhero .tag{font-size:13px;margin-top:12px}
}

/* ===== bagian: style-redesign.css ===== */
/* STC XXI — Redesign layer (presentation only).
   Dimuat paling akhir. Tidak mengubah ID, class, atau logika JavaScript maupun backend. */

:root{
  --rd-radius:16px; --rd-radius-s:11px;
  --rd-gold:#c89b48; --rd-gold-hi:#edcb7a; --rd-gold-deep:#8e6b2c;
  --rd-emerald:#0f3b2e; --rd-emerald-2:#17563f;
  --rd-ease:cubic-bezier(.2,.7,.2,1);
  --rd-shadow:0 1px 2px #0b1f1812,0 10px 30px -12px #0b1f1826;
}
:root[data-theme=dark]{--rd-shadow:0 1px 2px #0000,0 14px 40px -14px #000a}

html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{letter-spacing:0}
::selection{background:#c89b4866;color:inherit}

/* ---------- Tipografi judul ---------- */
#main h1,#main .ph-t,#ptitle{font-family:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;letter-spacing:-.01em}

/* ---------- Sidebar ---------- */
#side{background:linear-gradient(180deg,#0b2a20 0%,#06160f 60%,#041009 100%)!important;border-right:1px solid #ffffff0f!important;box-shadow:none!important}
#side .brand{padding:22px 22px 18px;border-bottom:1px solid #ffffff10}
#side .brand img{height:38px;width:auto}
#side .brand b{font-family:"Bodoni Moda",Georgia,serif;font-size:17px;font-weight:700;color:#f7f3e8}
#side .brand small{color:#9fbdb1;font-size:11.5px;letter-spacing:.02em}
#nav{padding:10px 12px 14px}
#nav .gh,#nav .nsec,#nav h6{font-size:10.5px;letter-spacing:.16em;color:#c9a55a!important;font-weight:700;padding:16px 12px 8px;text-transform:uppercase}
#nav a,#nav button{font-size:14px;font-weight:500;min-height:42px;border-radius:12px;margin:2px 0;width:100%;padding:9px 12px 9px 14px}
#nav a:hover,#side #nav button:hover{background:#ffffff0f!important;color:#fff!important;padding-left:16px}
#nav .active,#nav a.on,#nav [aria-current=page]{background:linear-gradient(100deg,#1d6a4d,#0f4534)!important;color:#fff!important;border:1px solid #2f8b65!important;box-shadow:0 8px 22px -10px #000c,inset 0 1px 0 #ffffff1a!important}
#side .sme{border-top:1px solid #ffffff10;padding:14px 16px}
#side .av{background:linear-gradient(135deg,#edcb7a,#a77a2c);color:#1c170b;font-weight:800}

/* ---------- Header ---------- */
#main>header{background:color-mix(in srgb,var(--bg) 78%,transparent)!important;backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid var(--bd);height:64px;padding:0 22px}
#ptitle{font-size:22px;font-weight:700;color:var(--ink)}
#psub{color:var(--mut);font-size:12.5px}
#clock{font-size:12.5px;color:var(--mut);font-weight:600;font-variant-numeric:tabular-nums}
#conn{border-radius:999px;font-size:12px;font-weight:700;padding:5px 11px;background:var(--g50);color:var(--gt)}

/* ---------- Konten & kartu ---------- */
#view{padding:clamp(16px,2.4vw,32px);max-width:1480px}
.card,.dq,.ds-big,.ds-list,.dact,.dc-b,.dx-panel,.dx-studio,.dx-q,.dx-k{
  border-radius:var(--rd-radius)!important;border:1px solid var(--bd)!important;box-shadow:var(--rd-shadow)}
.card:hover{transform:none}
.dx-hero{border-radius:22px!important;box-shadow:0 30px 60px -28px #03130f80}

/* ---------- Tombol ---------- */
.btn{min-height:42px;padding:0 18px;border-radius:var(--rd-radius-s);font-size:14px;font-weight:700;letter-spacing:.01em;transition:transform .18s var(--rd-ease),filter .18s,background-color .18s,box-shadow .18s}
.btn:not(.sec):not(:disabled):hover{transform:translateY(-1px);box-shadow:0 12px 24px -12px #b88a36aa}
.btn:not(.sec):active,.btn.sec:active{transform:translateY(0) scale(.985)}
.btn.sec{border-radius:var(--rd-radius-s);font-weight:650}
.btn:disabled{opacity:.6;cursor:not-allowed}
.thm{border-radius:var(--rd-radius-s);transition:background-color .2s,transform .2s var(--rd-ease)}
.thm:hover{transform:translateY(-1px)}

/* ---------- Input ---------- */
input,select,textarea{font-size:15px;min-height:44px;border-radius:var(--rd-radius-s)!important;transition:border-color .18s,box-shadow .18s,background-color .18s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--rd-gold)!important;box-shadow:0 0 0 4px #c89b4822}

/* ---------- Login — layout & sinematik ---------- */
#login{grid-template-columns:minmax(0,1.15fr) minmax(460px,.85fr)}
#login .lpane{padding:clamp(20px,2.6vw,48px)}
#login .lhero{padding:clamp(32px,4.4vw,72px)}
#login .lhero h1{font-family:"Bodoni Moda",Didot,Georgia,serif;font-weight:700;font-size:clamp(50px,6vw,96px);line-height:.94;letter-spacing:-.03em}
#login .lhero .sub{font-size:12.5px;letter-spacing:.28em;color:var(--rd-gold-hi)!important}
#login .lhero .tag{font-size:15px;color:#d8e7df!important}
#login .lpane{padding:clamp(24px,4vw,64px)}
#login .lbox{width:min(100%,440px);padding:clamp(28px,3vw,42px);border-radius:24px;border:1px solid #d6e3db;box-shadow:0 30px 80px -30px #0b382040}
:root[data-theme=dark] #login .lbox{border-color:#ffffff18}
#login .lbox .hello{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:800}
#login .lbox h2{font-family:"Bodoni Moda",Didot,Georgia,serif;font-size:clamp(30px,2.8vw,40px);font-weight:600;letter-spacing:-.02em}
#login .lbox input{height:48px;font-size:15px}
#login #lbtn{height:52px;min-height:52px;font-size:15px;border-radius:14px;box-shadow:0 14px 28px -14px #b88a36b0}
#login .lfoot{font-size:12px;letter-spacing:.02em}

/* ---------- Mobile ---------- */
@media(max-width:800px){
  #main>header{height:auto;min-height:60px;padding:10px 14px;flex-wrap:wrap;gap:8px}
  #view{padding:12px 12px calc(var(--tabh,64px) + 20px)}
  #login .lbox{border-radius:20px;padding:24px 20px}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* Perapian form login: kolom password lebih lebar, tombol Tampilkan rapi */
#login .lbox .pw{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch}
#login .lbox .pw input{width:100%;min-width:0}
#login #tp{min-width:112px;height:48px;min-height:48px;border-radius:var(--rd-radius-s)}
#login .lbox h2{font-size:clamp(28px,2.4vw,36px);white-space:normal}


/* =========================================================
   DASHBOARD — bahasa visual baru (presentation only)
   ========================================================= */
:root{--rd-ink-soft:var(--mut)}

/* Salam & tanggal */
.dx-top{margin-bottom:4px}
.dx-top .dx-date,.dx-top small:first-child{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rd-gold-deep);font-weight:800}
:root[data-theme=dark] .dx-top .dx-date,:root[data-theme=dark] .dx-top small:first-child{color:var(--rd-gold-hi)}
.dx-top h1,.dx-top h2{font-family:"Bodoni Moda",Didot,Georgia,serif;font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-.02em;margin:4px 0 0}
.dx-top .dx-status,.dx-top [class*=status]{border-radius:999px;padding:8px 14px;font-weight:650;box-shadow:var(--rd-shadow);border:1px solid var(--bd)}

/* Banner sinematik */
.dsl{border-radius:24px!important;border:1px solid #ffffff14!important;box-shadow:0 30px 70px -34px #03130fb0!important}
.dsl-s{min-height:clamp(260px,26vw,360px)!important;padding:clamp(28px,3.4vw,56px)!important}
.dsl-s.sc-a .dsl-x>small{font-size:11px!important;letter-spacing:.26em!important;color:var(--rd-gold-hi)!important;font-weight:800}
.dsl-s.sc-a .dsl-x>b{font-family:"Bodoni Moda",Didot,Georgia,serif!important;font-size:clamp(30px,3.6vw,54px)!important;line-height:1.02!important;letter-spacing:-.02em;max-width:14ch!important;text-shadow:0 6px 30px #0008}
.dsl-s.sc-a .dsl-x>span{font-size:15px!important;color:#e3efe8!important;margin-top:14px!important;max-width:46ch}
.dsl-s.sc-a:before{background:linear-gradient(90deg,#03120ff7 0%,#03120fc0 36%,#03120f10 78%),url("img/projector-hero-4k.webp") 68% center/cover no-repeat!important}
.dsl-d{bottom:18px!important}
.dsl-d button{width:8px;height:8px;border-radius:99px;background:#ffffff40;border:0;transition:all .3s var(--rd-ease)}
.dsl-d button.on,.dsl-d button[aria-current=true]{width:26px;background:var(--rd-gold-hi)}
.dsl-x-btn,.dsl-nav button{background:#03120f99!important;border:1px solid #ffffff26!important;backdrop-filter:blur(8px);color:#fff!important}

/* Chip kategori & pencarian */
.dsl-tabs button,.dx-tabs button{font-weight:650;font-size:13px;padding:8px 14px}
.dx-search,.dsr,[class*=dsr-box]{border-radius:16px!important;box-shadow:var(--rd-shadow);min-height:52px}

/* Label seksi */
.dx-sec .sh h2,.dx-sec h2{font-size:12px!important;letter-spacing:.16em!important;text-transform:uppercase;font-weight:800;color:var(--rd-ink-soft)!important;font-family:inherit!important}
.dx-sec .sh{border-bottom:1px solid var(--bd);padding-bottom:10px;margin-bottom:14px}
.lnk{font-weight:700;color:var(--rd-gold-deep)!important}
:root[data-theme=dark] .lnk{color:var(--rd-gold-hi)!important}

/* Catat cepat — kartu aksi */
.dx-q{position:relative;overflow:hidden;border-radius:18px!important;min-height:84px;padding:16px!important;gap:14px!important;background:var(--card)!important;transition:transform .25s var(--rd-ease),box-shadow .25s var(--rd-ease),border-color .25s}
.dx-q:hover{transform:translateY(-3px);box-shadow:0 22px 40px -22px #0b382055;border-color:color-mix(in srgb,var(--rd-gold) 60%,var(--bd))!important}
.dx-q i{width:44px!important;height:44px!important;border-radius:14px!important;background:linear-gradient(145deg,var(--g100),var(--g50))!important;color:var(--gt)!important;display:grid;place-items:center;flex:0 0 auto}
.dx-q b{font-size:15px;font-weight:750;color:var(--ink)}
.dx-q small{color:var(--mut);font-size:12.5px;line-height:1.4}
.dx-q:after{content:"→";position:absolute;right:16px;top:50%;transform:translate(6px,-50%);opacity:0;color:var(--rd-gold-deep);font-weight:800;transition:all .25s var(--rd-ease)}
.dx-q:hover:after{opacity:1;transform:translate(0,-50%)}

/* KPI */
.dx-k{border-radius:20px!important;padding:18px 18px 16px!important;min-height:132px;display:flex;flex-direction:column;gap:6px;transition:transform .25s var(--rd-ease),box-shadow .25s}
.dx-k:hover{transform:translateY(-3px);box-shadow:0 22px 40px -22px #0b382055}
.dx-k .l{font-size:13px;font-weight:650;color:var(--mut)}
.dx-k .n{font-family:"Bodoni Moda",Didot,Georgia,serif;font-size:clamp(34px,3.2vw,46px)!important;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.dx-k small{font-size:12px;color:var(--mut);margin-top:auto}
.dx-k.warn{background:linear-gradient(150deg,#fff3d6,#fffaf0)!important;border-color:#e8c76a!important}
:root[data-theme=dark] .dx-k.warn{background:linear-gradient(150deg,#2b2208,#171306)!important}
.dx-k.warn .n{color:#8a5a00}
:root[data-theme=dark] .dx-k.warn .n{color:var(--rd-gold-hi)}
.dx-k.good{background:linear-gradient(150deg,#0f3b2e,#0a2a20)!important;border-color:#1f6b50!important}
.dx-k.good .n,.dx-k.good .l,.dx-k.good small{color:#f1f7f3!important}
.dx-k.good .n{color:#fff!important}
.dx-k.good small{color:#a9d4c0!important}
.dx-ki{width:38px!important;height:38px!important;border-radius:12px!important;display:grid;place-items:center;background:#c89b481f!important;color:var(--gt)!important}
.dx-k.warn .dx-ki{background:#c89b4826!important;color:#8a5a00!important}
.dx-k.good .dx-ki{background:#ffffff1a!important;color:var(--rd-gold-hi)!important}

/* Kolom & kartu */
.dx-cols{gap:18px!important}
.dx-sec{border-radius:20px;background:var(--card);border:1px solid var(--bd);box-shadow:var(--rd-shadow);padding:18px 18px 16px}
.dx-sec.dsl-w{background:none;border:0;box-shadow:none;padding:0}

/* Aktivitas */
.dx-ai{border-radius:14px!important;padding:12px 14px!important;transition:background .2s,transform .2s var(--rd-ease)}
.dx-ai:hover{background:var(--g50)!important;transform:translateX(3px)}
.dx-ai .kat{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--g100);color:var(--gt)}
.dx-ai b{font-size:14.5px;font-weight:700}
.dx-ai small{font-size:12px;color:var(--mut)}

/* ATS */
.tk{border-radius:16px!important;border:1px solid var(--bd)!important;padding:12px!important;background:var(--card2)!important;box-shadow:none!important}
.tk-poster{border-radius:12px!important;box-shadow:0 12px 24px -12px #000a}
.tk b{font-family:"Bodoni Moda",Didot,Georgia,serif;font-size:17px;font-weight:700}
.tk .pri{border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.04em}

/* Pengumuman */
.dx-ann .card,.dx-ann article,.dx-ann .ann{border-radius:16px;border:1px solid var(--bd);background:var(--card2)}

/* Empty state */
.empty{border-radius:16px!important;border:1px dashed var(--bd2)!important;background:transparent!important;padding:28px 20px!important;text-align:center}
.empty b{display:block;font-family:"Bodoni Moda",Georgia,serif;font-size:18px;margin-bottom:4px}

@media(max-width:800px){
  .dsl-s.sc-a:before{background:linear-gradient(180deg,#03120fe6,#03120f99 60%,#03120fe6),url("img/projector-hero-4k.webp") 70% center/cover no-repeat!important}
  .dsl-s.sc-a .dsl-x>b{font-size:clamp(26px,7vw,34px)!important}
  .dx-q{min-height:72px}
  .dx-k .n{font-size:30px!important}
}

/* =========================================================
   DASHBOARD — rapikan tata letak, tidak ada area kosong
   Kolom kanan (Pengumuman) mengisi tinggi baris agar sejajar dengan kolom kiri (ATS).
   ========================================================= */
.dx-cols{align-items:stretch!important}
.dx-col{display:flex;flex-direction:column}
.dx-col>.dx-ann{flex:1 1 auto;display:flex;flex-direction:column}
.dx-ann>.card.ann,.dx-ann>.ann{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-start}
.dx-ann>.card.ann+.card.ann,.dx-ann>.ann+.ann{margin-top:12px}
.dx-ann .card.ann .ann-body,.dx-ann .card.ann p{flex:1}
/* Tidak ada kartu pengumuman: tampilkan kotak kosong dengan tinggi tetap agar tidak terlihat bolong */
.dx-ann>.empty{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-start}

/* =========================================================
   Profil & keluar pindah ke sudut kanan atas (header)
   ========================================================= */
#main>header{display:flex;align-items:center;gap:12px}
#main>header .clk{margin-left:auto}
.uhead{display:flex;align-items:center;gap:10px;margin-left:14px;padding:6px 8px 6px 6px;border-radius:999px;background:var(--card);border:1px solid var(--bd);box-shadow:var(--rd-shadow)}
.uhead .sme{display:flex;align-items:center;gap:10px;border:0!important;padding:0!important;background:none!important}
.uhead .sme>div{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.uhead .sme b{color:var(--ink)!important;font-size:13px;font-weight:750}
.uhead .sme .badge{margin-top:3px;font-size:10px;padding:2px 8px}
.uhead .av{width:34px;height:34px;font-size:14px;flex:0 0 auto}
.uhead .sact{display:flex;gap:6px;padding-left:6px;border-left:1px solid var(--bd)}
.uhead .sact .btn{min-height:34px;height:34px;padding:0 12px;font-size:12.5px;border-radius:999px}
@media(max-width:900px){
  .uhead{margin-left:6px}
  .uhead .sme>div{display:none}
}
@media(max-width:600px){
  #main>header{flex-wrap:wrap}
  .uhead{margin-left:auto;padding:4px}
  .uhead .sact{border-left:0;padding-left:0}
  .uhead .sact .btn{padding:0 10px}
}

/* =========================================================
   Dashboard: kartu kapasitas mengisi tinggi baris (tanpa celah kosong)
   ========================================================= */
.dx-col>.dstu{flex:1 1 auto;display:flex;flex-direction:column}
.dx-col>.dstu>.dstu-b{flex:1 1 auto}
.dx-col>.dstu .dstu-grid{align-content:start}
.dx-col>.dchart{flex:1 1 auto;display:flex;flex-direction:column}
.dx-col>.dchart>.dc-b{flex:1 1 auto;display:flex;flex-direction:column}
.dx-col>.dchart .dc-k+*,.dx-col>.dchart>.dc-b>*:last-child{flex:1 1 auto}

/* Reset sisa gaya sidebar pada .sfoot setelah dipindah ke header */
.uhead .sfoot{position:static!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:10px}
.uhead .sact .btn.sec{color:var(--txt)!important;background:var(--card2)!important;border:1px solid var(--bd2)!important;box-shadow:none!important}
.uhead .sact .btn.sec:hover{background:var(--g100)!important}
.uhead .sme b,.uhead .sme span{color:var(--ink)!important}
.uhead .sme .badge{color:var(--gold-ink)!important;background:#c89b4822!important}

/* =========================================================
   MOBILE / SMARTPHONE — tata letak responsif
   ========================================================= */
@media(max-width:800px){
  html,body{overflow-x:hidden;max-width:100%}
  #main{min-width:0;width:100%}
  #main>header{height:auto;min-height:0;padding:10px 12px;display:grid;grid-template-columns:auto 1fr auto;gap:8px 10px;align-items:center}
  #main>header .hs{min-width:0}
  #main>header .hs small,#clock,#conn,#main>header .hlogo{display:none!important}
  #main>header #ptitle{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  #main>header .clk{margin-left:0;display:flex;gap:6px}
  #main>header .clk .bell{display:inline-flex}
  .uhead{grid-column:1/-1;margin:0;width:100%;justify-content:space-between;border-radius:16px;padding:6px 8px}
  .uhead .sact .btn{flex:1}
  .uhead .sact{flex:1;justify-content:flex-end}
  #phero{padding:0 12px}
  #view{padding:12px 12px calc(var(--tabh,64px) + 28px)}
  .dx{gap:14px}
  .dx-top h1,.dx-top h2,#main h1{font-size:26px}
  .dsl-s.sc-a .dsl-x>b{font-size:clamp(24px,7vw,32px)!important}
  .dsl-s{min-height:280px!important}
  .dsl-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin-inline:-2px;padding-bottom:2px}
  .dsl-tabs button{flex:0 0 auto;white-space:nowrap}
  .dx-qg,.dx-qa{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .dx-q{min-height:76px}
  .dx-kpi{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .dx-k{min-height:112px;padding:14px!important}
  .dx-k .n{font-size:30px!important}
  .dx-cols{grid-template-columns:minmax(0,1fr)!important;gap:14px}
  .dx-sec{padding:14px}
  .dstu-b.dstu-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #dac .dac-b,.dac-b{overflow-x:auto}
  .card,.dq,.ds-big,.ds-list{padding:14px}
  #tabs{box-shadow:0 -8px 24px -12px #0b382033}
}
@media(max-width:480px){
  .dx-qg,.dx-qa{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dx-k .l{font-size:12px}
  .uhead .sme{display:none}
}

/* ATS: poster tetap tampil di semua ukuran layar; info & hitung mundur tersusun rapi */
.tk-poster,.tk .poster img,.ats-card img.tk-poster{display:block;object-fit:cover;flex:0 0 auto}
@media(max-width:800px){
  .tk{display:grid!important;grid-template-columns:92px minmax(0,1fr)!important;gap:12px 14px;align-items:start}
  .tk .tk-poster{width:92px;height:138px;border-radius:12px;grid-row:1}
  .tk .tl{grid-column:2;grid-row:1;min-width:0}
  .tk .tr{grid-column:1/-1;grid-row:2}
  .tk .tl b{font-size:17px;line-height:1.2}
  .tk .tm{grid-template-columns:1fr 1fr;gap:8px}
}
@media(max-width:480px){
  .tk{grid-template-columns:76px minmax(0,1fr)!important;gap:10px 12px}
  .tk .tk-poster{width:76px;height:114px}
}
.dx-ann .card.ann .pri{align-self:flex-start}

/* LOGIN di HP: satu kolom, foto proyektor di atas, form di bawah */
@media(max-width:800px){
  #login{grid-template-columns:minmax(0,1fr)!important;min-height:100dvh;height:auto}
  #login .lhero{min-width:0;width:100%;min-height:auto!important;padding:22px 20px 24px!important;justify-content:flex-start}
  #login .lhero .lscene{position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:16/9!important;margin:0 0 18px!important;border-radius:16px!important}
  #login .lhero .llogo{width:110px;max-height:44px;margin-bottom:14px}
  #login .lhero h1{font-size:clamp(36px,11vw,50px)!important}
  #login .lhero .tag{display:block!important;font-size:13px;max-width:none}
  #login .lpane{min-width:0!important;width:100%;padding:18px 16px 32px!important;justify-content:center;align-items:flex-start}
  #login .lbox{width:100%!important;max-width:460px;margin:0 auto;padding:24px 20px!important;border-radius:20px!important}
  #login .lbox h2{font-size:28px!important}
}

/* ===== bagian: style-sidebar.css ===== */
/* =====================================================================
   STC XXI Technical Report - SIDEBAR + TATA LETAK (dimuat PALING AKHIR)
   Sidebar kini panel tetap di samping konten (tidak melayang / tidak menimpa halaman),
   nama website selalu tampak, menu bergrup rapi, aksi akun di bagian bawah.
   Tombol menu di header (sbtn) tetap dapat menyembunyikan / menampilkan sidebar.
   Akun (nama, Profil, Keluar) dan tombol tema ada di header sudut kanan atas.
   Hanya mengubah tampilan: tidak ada fungsi app.js yang diubah.
   ===================================================================== */

:root{--sbw:272px;--pad:clamp(14px,2.2vw,32px);--cmax:1480px}

/* ---------- PANEL SIDEBAR ---------- */
#side{background:linear-gradient(180deg,#0b2a20 0%,#06160f 58%,#041009 100%)!important;border-right:1px solid #c89b4833!important;box-shadow:none!important}
#side .scard{display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden;white-space:nowrap;background:none;color:#bdd4c8;border:0;border-radius:0;box-shadow:none}

/* merek: logo + nama website (selalu tampak) */
#side .brand{flex:none;display:flex;flex-direction:row;align-items:center;gap:12px;padding:18px 16px 14px;border-bottom:1px solid #ffffff12}
#side .brand img{flex:none;width:58px;height:auto}
#side .brand>div{min-width:0;padding-left:12px;border-left:1px solid #c89b4866}
#side .brand b,#side .brand small{display:block;overflow:hidden;text-overflow:ellipsis;max-height:none;opacity:1}
#side .brand b{font:700 16px/1.25 "Bodoni Moda",Georgia,serif;color:#f7f3e8;letter-spacing:0}
#side .brand small{white-space:normal;margin-top:3px;font-size:11.5px;line-height:1.3;color:#9fbdb1;letter-spacing:.01em}

/* pencarian menu */
#side .ssrch{flex:none;display:flex;align-items:center;gap:10px;height:40px;margin:14px 14px 6px;padding:0 12px;overflow:hidden;
 border:1px solid #ffffff1c;border-radius:11px;background:#ffffff0d;color:#8fb3a2;cursor:text;transition:border-color .16s,background .16s}
#side .ssrch:focus-within{border-color:#c89b48;background:#ffffff14}
#side .ssrch .ic{flex:none;width:17px;height:17px}
#side .ssrch input{flex:1;min-width:0;width:100%;height:100%;border:0;outline:0;background:transparent;box-shadow:none;padding:0;margin:0;min-height:0;font:inherit;font-size:13.5px;color:#e6f1ea;-webkit-appearance:none;appearance:none}
#side .ssrch input::placeholder{color:#7f9c90}
#side .ssrch input::-webkit-search-cancel-button{display:none}

/* daftar menu */
#side #nav{flex:1;min-height:0;padding:6px 14px 14px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#ffffff22 transparent}
#side #nav::-webkit-scrollbar{width:6px}
#side #nav::-webkit-scrollbar-thumb{background:#ffffff22;border-radius:6px}
#side .ng{margin:12px 6px 4px;padding:0;height:auto;background:none;overflow:hidden;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:none;color:#c9a55a;opacity:.95}
#side .ng:first-child{margin-top:8px}
#side #nav a{display:flex;align-items:center;width:100%;gap:12px;min-height:39px;margin:0 0 1px;padding:0 12px;border:1px solid transparent;border-radius:11px;
 font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#bdd4c8;position:relative;transition:background .16s,color .16s,border-color .16s}
#side #nav a i{flex:none;display:flex;width:20px;justify-content:center;opacity:.85}
#side #nav a:hover{padding-left:12px;background:#ffffff10!important;color:#fff!important}
#side #nav a.on,#side #nav a.on:hover{background:linear-gradient(90deg,#c89b4829,#ffffff0b)!important;border-color:#c89b4833;color:#fff!important;font-weight:650}
#side #nav a.on::before{display:block;content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:#e1c476}
#side #nav a.on i{color:#edcb7a;opacity:1}
#side #nav a.soon{opacity:.6}


/* ---------- DESKTOP: sidebar tetap di samping, konten bergeser ---------- */
@media(min-width:821px){
 #side{position:sticky;top:0;width:var(--sbw);height:100vh;height:100dvh;flex:none;z-index:40;overflow:visible}
 body.sb-off #side{margin-left:calc(var(--sbw) * -1);visibility:hidden}
}

/* ---------- MOBILE: laci ---------- */
@media(max-width:820px){
 #side{background:linear-gradient(180deg,#0b2a20 0%,#06160f 60%,#041009 100%)!important;border-radius:0 24px 24px 0;overflow:hidden}
 #side .scard{padding-top:env(safe-area-inset-top,0px)}
}
@media(prefers-reduced-motion:reduce){#side,#side #nav a,#side .ssrch{transition:none!important}}

/* ---------- HEADER: tulisan di atas judul halaman dihapus ---------- */
.hsite{display:none!important}
#main>header{height:auto;min-height:64px}

/* ---------- TATA LETAK: semua blok selebar & sejajar, tanpa ruang kosong ---------- */
#view{width:100%;max-width:var(--cmax);margin-inline:auto;box-sizing:border-box;padding-inline:var(--pad)}
#phero{width:calc(100% - 2*var(--pad));max-width:calc(var(--cmax) - 2*var(--pad));margin-inline:auto;box-sizing:border-box}
body.sb-off #view{max-width:var(--cmax)}
body.sb-off #phero{max-width:calc(var(--cmax) - 2*var(--pad))}
#view>*{max-width:100%}
#view .card:not(.film):not(.ann){max-width:none}
#view .scroll.cards,#view #rl{width:100%}

/* bilah pencarian / filter: item mengisi baris penuh, baris yang terbungkus tetap terisi */
#view .bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;width:100%;box-sizing:border-box}
#view .bar>input[type=search],#view .bar>input:not([type]){flex:2 1 260px;min-width:0}
#view .bar>.fl{flex:1 1 160px;min-width:0}
#view .bar>select{flex:1 1 170px;min-width:0}
#view .bar>.btn{flex:1 1 130px;white-space:nowrap}
#view .bar>#ua,#view .bar>#ra{flex:1 1 150px}

/* dashboard: kolom yang kosong (mis. grafik tanpa data) tidak menyisakan ruang */
.dx-cols{grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr))!important}
.dx-col:empty{display:none}
.dx-col>section{flex:1 1 auto}

/* grid auto-fill meninggalkan kolom kosong di kanan -> auto-fit membuat kartu memenuhi baris */
.grid:has(>.card.film){grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))!important}
#gl{grid-template-columns:repeat(auto-fit,minmax(min(100%,500px),1fr))}
.dx .dac-g{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}

/* bilah filter Laporan Film: baris yang terbungkus tetap terisi penuh */
.filmbar{display:flex;flex-wrap:wrap;align-items:flex-end}
.filmbar>*{flex:1 1 170px;min-width:0}
.filmbar #filmq,.filmbar #froutlet{flex:2 1 240px}

/* Advance Ticket Sales: kartu film selebar halaman */
#view .grid>.card.film{max-width:none;display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr);gap:18px;align-items:start}
#view .grid>.card.film>img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:12px}
@media(max-width:520px){#view .grid>.card.film{grid-template-columns:110px minmax(0,1fr);gap:12px}}

/* ---------- SLIDE ATS: poster besar, tanpa ruang kosong ---------- */
.dsl-s.sc-c{isolation:isolate;background:#04140f}
.dsl-s.sc-c .dsl-bg{position:absolute;left:-40px;top:-40px;width:calc(100% + 80px);height:calc(100% + 80px);max-width:none;
 object-fit:cover;filter:blur(34px) saturate(1.3) brightness(.62);z-index:-2;pointer-events:none}
.dsl-s.sc-c::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(90deg,#03120ff7 0%,#03120fc4 36%,#03120f70 70%,#03120f99 100%)}
.dsl-s.sc-c .dsl-x{position:relative;z-index:1;max-width:min(54%,700px)}
.dsl-s.sc-c .dsl-x>small{font-size:11px;letter-spacing:.26em;color:var(--rd-gold-hi,#edcb7a);font-weight:800}
.dsl-s.sc-c .dsl-x>b{font:700 clamp(28px,3.6vw,56px)/1.05 "Bodoni Moda",Didot,Georgia,serif;letter-spacing:-.015em;text-shadow:0 6px 30px #0009}
.dsl-s.sc-c .dsl-x>span{margin-top:14px;font-size:clamp(14px,1.15vw,17px);color:#e3efe8;-webkit-line-clamp:3}
.dsl-s.sc-c .dsl-im{position:absolute;z-index:1;order:0;top:26px;height:calc(100% - 78px);width:auto;aspect-ratio:2/3;
 right:clamp(84px,14vw,260px);object-fit:cover;border-radius:14px;border:1px solid #e1c47699;box-shadow:0 24px 60px -14px #000d}
@media(max-width:800px){
 .dsl-s.sc-c{flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:440px!important}
 .dsl-s.sc-c{padding-bottom:50px!important}
 .dsl-s.sc-c .dsl-x{flex:0 0 auto;max-width:100%;width:100%;text-align:left}
 .dsl-s.sc-c .dsl-im{top:18px;right:auto;left:50%;transform:translateX(-50%);height:min(calc(100% - 190px),300px)}
 .dsl-s.sc-c::before{background:linear-gradient(180deg,#03120f55 0%,#03120fa0 45%,#03120ff2 100%)}
}

/* ---------- FORM DAILY MONITORING AC: Merk | Kondisi | Suhu sejajar, tanpa ruang kosong ---------- */
@media(min-width:700px){
 .acr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;align-items:end}
 .acr>*{grid-column:1/-1;margin:0}
 .acr>.acr-g{display:block;grid-column:auto}
 .acr>.acc-l{grid-column:auto;margin:0}
 .acr>.acr-g.acr-t{grid-column:auto}
 .acr:has(>.acr-t[style*="display:none"])>.acc-l{grid-column:span 2}
 .acr>.acr-g label,.acr>.acc-l{display:block}
 .acr select,.acr input:not([type=file]){width:100%;box-sizing:border-box}
}
.acr .pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.acr .pick>*{width:100%;box-sizing:border-box}

/* ===== bagian: style-ux.css ===== */
/* =====================================================================
   STC XXI Technical Report - PENYEMPURNAAN UX (dimuat paling akhir)
   1) Akun pengguna hanya di sudut kanan atas header (nama + menu Profil / Keluar).
   2) Lebar sidebar dapat diubah pengguna (geser tepi kanan, tombol panah, klik ganda reset).
   3) Animasi saat scroll: konten muncul bertahap, bilah progres, bayangan header.
   4) Responsif: PC, tablet, smartphone; aman untuk notch & layar sentuh.
   Animasi otomatis nonaktif bila pengguna memilih "kurangi gerakan".
   ===================================================================== */

:root{--sbw:272px}

/* ---------- 1) AKUN DI SUDUT KANAN ATAS ---------- */
#main>header{position:sticky;top:0}
#main>header .uhead{position:relative;display:flex;align-items:center;flex:none;margin-left:14px;max-width:100%;
 padding:4px 6px 4px 4px;border-radius:999px;background:var(--card);border:1px solid var(--bd);box-shadow:var(--rd-shadow)}
#main>header .uh-tg{display:flex;align-items:center;gap:8px;min-height:40px;min-width:0;margin:0;padding:0 4px 0 0;
 background:none;border:0;border-radius:999px;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
#main>header .uh-tg:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#main>header .uhead .sme{display:flex;align-items:center;gap:10px;min-width:0;border:0;padding:0;background:none}
#main>header .uhead .av{width:34px;height:34px;font-size:14px;flex:0 0 auto}
#main>header .uh-who{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0}
#main>header .uh-who b{display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:13px;font-weight:750}
#main>header .uh-who .badge{margin-top:3px;font-size:10px;padding:2px 8px}
#main>header .uh-chev{flex:none;width:16px;height:16px;color:var(--mut);transition:transform .2s ease}
#main>header .uhead.open .uh-chev{transform:rotate(180deg)}
#main>header .uhead .sact{display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:80;flex-direction:column;gap:6px;min-width:192px;padding:8px;
 background:var(--card);border:1px solid var(--bd);border-radius:16px;box-shadow:var(--sh2)}
#main>header .uhead.open .sact{display:flex;animation:uhIn .18s ease both}
#main>header .uhead .sact .btn{display:flex;align-items:center;justify-content:flex-start;line-height:1;width:100%;height:40px;min-height:40px;margin:0;padding:0 12px;border-radius:11px;font-size:13.5px}
#main>header .uhead .sact .btn.sec{color:var(--txt)!important;background:var(--card2)!important;border:1px solid var(--bd2)!important;box-shadow:none!important}
#main>header .uhead .sact .btn.sec:hover{background:var(--g100,var(--card2))!important}
@keyframes uhIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* tablet: nama disembunyikan agar header tetap muat */
@media(min-width:801px) and (max-width:1100px){#main>header .uh-who{display:none}}

/* smartphone: hanya avatar di kanan atas, di sebelah tombol tema & lonceng */
@media(max-width:800px){
 #main>header{grid-template-columns:minmax(0,1fr) auto auto;gap:6px 8px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
 #main>header .clk{margin-left:0;gap:6px}
 #main>header .uhead{grid-column:auto;margin:0;padding:3px;width:auto}
 #main>header .uh-tg{min-height:40px;padding:0}
 #main>header .uh-who,#main>header .uh-chev{display:none}
 #main>header .uhead .sact{min-width:190px}
}
@media(pointer:coarse){
 #main>header .thm,#main>header .bell{min-width:42px;min-height:42px;width:42px;height:42px}
 #main>header .uh-tg{min-width:40px;min-height:40px}
}

/* ---------- 2) LEBAR SIDEBAR DAPAT DIATUR ---------- */
#side{width:var(--sbw)}
#side .sb-rz{position:absolute;top:0;bottom:0;right:-7px;z-index:6;width:14px;margin:0;padding:0;border:0;background:none;
 display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-tap-highlight-color:transparent}
#side .sb-rz::after{content:"";width:2px;height:100%;background:#c89b4826;border-radius:2px;transition:background .18s,box-shadow .18s}
#side .sb-rz:hover::after,#side .sb-rz.drag::after{background:linear-gradient(180deg,transparent,#e1c476 18%,#e1c476 82%,transparent)}
#side .sb-rz:focus-visible{outline:none}
#side .sb-rz:focus-visible::after{background:#e1c476;box-shadow:0 0 0 3px #c89b4866}
body.sb-resizing,body.sb-resizing *{cursor:col-resize!important;user-select:none!important;-webkit-user-select:none!important}
@media(max-width:820px){
 #side{width:min(var(--sbw),86vw)}
 #side .sb-rz{right:0;width:18px}
}

/* ---------- 3) ANIMASI SAAT SCROLL ---------- */
#main>header .sprog{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
#main>header .sprog i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:0 50%;
 background:linear-gradient(90deg,#c89b48,#edcb7a 60%,#c89b48);will-change:transform}
#main>header{transition:box-shadow .3s ease}
#main>header.is-scrolled{box-shadow:0 14px 32px -22px #0b3820aa}

html.anim-ready .rv:not(.rv-in){opacity:0;transform:translate3d(0,26px,0)}
.rv.rv-in{opacity:1;transform:none;
 transition:opacity .75s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .75s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}

/* ---------- 4) RESPONSIF & KOMPATIBEL ---------- */
img,video,canvas,svg{max-width:100%}
#view{min-width:0}
#view table{max-width:100%}
@media(max-width:820px){
 #tabs{padding-bottom:env(safe-area-inset-bottom,0px)}
}
@media(prefers-reduced-motion:reduce){
 html.anim-ready .rv:not(.rv-in){opacity:1;transform:none}
 .rv.rv-in{transition:none}
 #main>header .sprog{display:none}
 #main>header,#side .sb-rz::after,#main>header .uh-chev{transition:none!important}
 #main>header .uhead.open .sact{animation:none}
}

/* ---------- 5) MENU HP ---------- */
#side .sb-close{display:none;margin-left:auto;flex:none;width:36px;height:36px;padding:0;align-items:center;justify-content:center;border-radius:10px;border:1px solid #ffffff22;background:#ffffff0d;color:#dcebe3;cursor:pointer}
#side .sb-close .ic{width:18px;height:18px}
#side .sb-close:focus-visible{outline:2px solid #e1c476;outline-offset:2px}
@media(max-width:820px){
 #side .brand{position:relative}
 #side .sb-close{display:inline-flex;position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:9px}
}
#tabs a[aria-current=page]{color:var(--gt)}

#main>header .uhead .sact .btn[hidden]{display:none!important}

/* ---------- 8) NAVIGASI BAWAH: tombol "+" tepat di tengah ---------- */
@media(max-width:820px){
 #tabs{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;justify-items:center;align-items:center;overflow:visible;padding-left:6px;padding-right:6px}
 #tabs a{min-height:0;width:100%;height:100%;justify-content:center;padding:0;gap:3px}
 #tabs a.pl{justify-content:flex-end;font-size:11px;font-weight:700;font-style:normal;color:#0b5036;padding-bottom:2px;position:relative}
 #tabs a.pl em{font-style:normal}
 #tabs a.pl .pl-b{position:relative;width:58px;height:58px;margin-top:-34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:none;
  background:linear-gradient(135deg,#edcb7a,#b8913f);color:#06160f;border:4px solid var(--card);
  box-shadow:0 10px 22px -8px #b8913f99,0 0 0 1px #b8913f55;transition:transform .15s ease}
 #tabs a.pl .pl-b svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;display:block}
 #tabs a.pl:active .pl-b{transform:scale(.94)}
 #tabs a.pl[aria-expanded=true] .pl-b{transform:rotate(45deg)}
 #tabs a.pl:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:12px}
}
/* ---------- 8b) BALON "BUAT LAPORAN" dengan panah ke tombol + ---------- */
#nsheet{position:fixed;inset:0;z-index:29}
#nsheet.hidden{display:none}
#nsheet .nsh-shade{position:absolute;inset:0;background:#030d0878;animation:nsFade .2s ease both}
@keyframes nsFade{from{opacity:0}to{opacity:1}}
#nsheet .nsh-box{position:absolute;left:50%;bottom:calc(var(--tabh,64px) + 50px);width:min(316px,calc(100vw - 24px));
 max-height:min(430px,calc(100dvh - var(--tabh,64px) - 120px));overflow:auto;box-sizing:border-box;
 background:var(--card);color:var(--ink);border:1px solid var(--bd);border-radius:22px;padding:14px 14px 16px;
 box-shadow:var(--sh2);transform-origin:50% 100%;animation:nsPop .34s cubic-bezier(.2,.9,.25,1.18) both}
/* panah balon, menunjuk ke tombol + */
#nsheet .nsh-box::after{content:"";position:absolute;left:50%;bottom:-10px;width:20px;height:20px;background:var(--card);
 border-right:1px solid var(--bd);border-bottom:1px solid var(--bd);border-bottom-right-radius:5px;transform:translateX(-50%) rotate(45deg)}
@keyframes nsPop{from{opacity:0;transform:translate(-50%,14px) scale(.7)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
#nsheet .nsh-box h2{font:700 15px/1.2 "Bodoni Moda",Georgia,serif;margin:2px 4px 10px;color:var(--ink);letter-spacing:.01em}
#nsheet .nsh-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.nsi{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:92px;padding:11px;text-align:left;border-radius:16px;
 border:1px solid var(--bd);background:var(--card2);color:var(--ink);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
 animation:nsIn .34s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 60ms + 90ms);transition:transform .15s ease,border-color .15s ease}
.nsi:active{transform:scale(.96)}
.nsi:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@keyframes nsIn{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
.nsi i{display:flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:10px;background:#c89b4822;color:var(--gold-ink)}
.nsi i .ic{width:17px;height:17px}
.nsi b{font-size:13px;line-height:1.25;font-weight:700}
.nsi small{font-size:11px;line-height:1.3;color:var(--mut)}
/* tombol + saat terbuka: berputar jadi X */
#tabs a.pl .pl-b{transition:transform .25s cubic-bezier(.2,.9,.3,1.3)}
@media(prefers-reduced-motion:reduce){#nsheet .nsh-shade,#nsheet .nsh-box,.nsi{animation:none}}

/* ---------- 9) HEADER HP: akun, lonceng, dan tema berukuran sama dan sejajar ---------- */
@media(max-width:800px){
 #main>header .uhead{width:42px;height:42px;min-width:42px;margin:0;padding:0;border:1.5px solid var(--gold);box-sizing:border-box;border-radius:999px;background:var(--card);box-shadow:var(--rd-shadow)}
 #main>header .uh-tg{width:100%;height:100%;min-height:0;padding:2px;justify-content:center;gap:0;box-sizing:border-box;border-radius:999px}
 #main>header .uh-tg .sme{width:100%;height:100%;justify-content:center}
 #main>header .uhead .av{width:100%;height:100%;flex:none;font-size:14px}
 #main>header .clk .bell,#main>header .clk .thm{width:42px;height:42px;min-width:42px;min-height:42px;box-sizing:border-box}
 #main>header .clk{align-items:center}
}

/* ---------- 10) PERBAIKAN BAR BAWAH HP: tidak ada celah hijau di bawah, label Buat terbaca ---------- */
@media(max-width:820px){
 #tabs{box-sizing:border-box;height:calc(64px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);bottom:0;background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}
 #tabs a{height:64px}
 #tabs a.pl{height:64px}
 #tabs a.pl em{color:var(--gt);font-style:normal}
}

/* ===== bagian: style-compact.css ===== */
/* STC XXI Technical Report: tampilan ringkas saat dibuka sebagai aplikasi terpasang (PWA).
   Hanya aktif jika <html> memiliki kelas "pwa" (diatur di index.html sebelum halaman tampil),
   sehingga tampilan di browser biasa tidak berubah. */

html.pwa body { font-size: 14px; }
html.pwa #main header { padding: 8px 12px; min-height: 0; }
html.pwa #ptitle { font-size: 16px !important; }
html.pwa #psub { display: none !important; }
html.pwa .hlogo { height: 26px !important; width: auto !important; }
html.pwa .thm,
html.pwa .sbtn,
html.pwa #bell { width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 10px !important; }
html.pwa .thm .ic, html.pwa #bell .ic { width: 16px !important; height: 16px !important; }
html.pwa .uh-tg, html.pwa #uhtg { gap: 4px; }
html.pwa #av, html.pwa .av { width: 30px !important; height: 30px !important; font-size: 12px !important; }
html.pwa .uh-who b { font-size: 12px; }
html.pwa .uh-who .badge { font-size: 10px; padding: 1px 6px; }
html.pwa #hname { font-size: 12px; }

/* Area konten */
html.pwa #view { padding: 10px 12px 96px !important; }
html.pwa .dx { gap: 0 !important; }
html.pwa .dx > * + * { margin-top: 10px !important; }

/* Sapaan */
html.pwa .dx-top { padding: 0 !important; }
html.pwa .dx-top small { font-size: 10px !important; letter-spacing: .08em !important; }
html.pwa .dx-top h1 { font-size: 17px !important; line-height: 1.25 !important; margin: 2px 0 0 !important; }
html.pwa .dx-sum { font-size: 12px !important; padding: 4px 10px !important; margin-top: 6px !important; }

/* Sorotan: carousel dibuat pendek */
html.pwa .dsl-w .sh h2 { font-size: 13px !important; }
html.pwa .dsl-w .sh { margin-bottom: 6px !important; }
html.pwa .dsl-v, html.pwa .dsl { height: 112px !important; min-height: 0 !important; }
html.pwa .dsl { border-radius: 12px !important; }
html.pwa .dsl-x { padding: 10px 12px !important; }
html.pwa .dsl-x small { font-size: 9px !important; letter-spacing: .08em !important; }
html.pwa .dsl-x b { font-size: 14px !important; line-height: 1.25 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.pwa .dsl-x > span, html.pwa .dsl-x > .kbh, html.pwa .dsl-x .kbg { display: none !important; }
html.pwa .dsl-art, html.pwa .dsl-im, html.pwa .seatart, html.pwa .dx-img, html.pwa .lens-glow { display: none !important; }
html.pwa .dsl-b { width: 26px !important; height: 26px !important; font-size: 16px !important; }
html.pwa .dsl-d { bottom: 6px !important; }

/* Chip navigasi kategori */
html.pwa .dsl-tabs { gap: 6px !important; }
html.pwa .dsl-tabs button, html.pwa .dsl-tabs a { font-size: 12px !important; padding: 4px 10px !important; }

/* Pencarian */
html.pwa .dsx { margin: 0 !important; }
html.pwa .dsr-b { height: 40px !important; border-radius: 12px !important; padding: 0 10px !important; }
html.pwa .dsr-lb { display: none !important; }
html.pwa .dsr-b input, html.pwa #dq { font-size: 13px !important; }
html.pwa .dsr-b .ic { width: 16px !important; height: 16px !important; }

/* Catat cepat */
html.pwa .dx-lb { font-size: 10px !important; letter-spacing: .08em !important; margin: 0 0 6px !important; }
html.pwa .dx-qg { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
html.pwa .dx-q { flex-direction: row !important; align-items: center !important; gap: 8px !important; padding: 8px !important; border-radius: 12px !important; text-align: left !important; min-height: 0 !important; }
html.pwa .dx-q i { width: 30px !important; height: 30px !important; min-width: 30px !important; border-radius: 9px !important; }
html.pwa .dx-q i svg, html.pwa .dx-q svg { width: 16px !important; height: 16px !important; }
html.pwa .dx-q b { font-size: 12px !important; line-height: 1.2 !important; display: block; }
html.pwa .dx-q small { font-size: 10px !important; line-height: 1.2 !important; display: block; margin-top: 1px; }
html.pwa .dx-q > span { min-width: 0; }

/* Kartu ringkasan */
html.pwa .dx-kpi { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
html.pwa .dx-k { padding: 8px 10px !important; border-radius: 12px !important; gap: 2px !important; min-height: 0 !important; }
html.pwa .dx-k .dx-ki { width: 26px !important; height: 26px !important; min-width: 26px !important; border-radius: 8px !important; }
html.pwa .dx-k .dx-ki svg { width: 14px !important; height: 14px !important; }
html.pwa .dx-k .l { font-size: 11px !important; line-height: 1.2 !important; }
html.pwa .dx-k .n { font-size: 18px !important; line-height: 1.1 !important; }
html.pwa .dx-k small { font-size: 9px !important; line-height: 1.2 !important; }

/* Bagian (section) */
html.pwa .dx-sec { padding: 10px 12px !important; border-radius: 12px !important; }
html.pwa .dx-sec .sh { margin-bottom: 6px !important; gap: 8px !important; }
html.pwa .dx-sec .sh h2 { font-size: 13px !important; line-height: 1.3 !important; }
html.pwa .lnk { font-size: 11px !important; padding: 2px 4px !important; }
html.pwa .dx-cols { gap: 10px !important; }
html.pwa .dx-col { gap: 10px !important; min-width: 0; }

/* Tiket ATS */
html.pwa .tk { gap: 8px !important; padding: 8px !important; }
html.pwa .tk-poster { width: 46px !important; height: auto !important; border-radius: 6px !important; }
html.pwa .tk .tl b { font-size: 13px !important; }
html.pwa .tk .tl small { font-size: 11px !important; }
html.pwa .tk .tm span { font-size: 11px !important; }
html.pwa .tk .pri { font-size: 9px !important; padding: 1px 6px !important; }

/* Aktivitas & pengumuman */
html.pwa .dx-ai { padding: 8px 10px !important; gap: 8px !important; border-radius: 10px !important; }
html.pwa .dx-ai .m b { font-size: 13px !important; }
html.pwa .dx-ai .m small { font-size: 10px !important; }
html.pwa .dx-ai .kat { font-size: 9px !important; padding: 2px 6px !important; }
html.pwa .dx-ai em { font-size: 16px !important; }
html.pwa .dx-al { gap: 6px !important; }

/* Kapasitas studio */
html.pwa .dstu-b { gap: 8px !important; }
html.pwa .dstu-card { padding: 8px 10px !important; border-radius: 12px !important; gap: 2px !important; }
html.pwa .dstu-card strong { font-size: 18px !important; line-height: 1.1 !important; }
html.pwa .dstu-card .nm { font-size: 11px !important; }
html.pwa .dstu-card small { font-size: 9px !important; }
html.pwa .dstu-icon { display: none !important; }
html.pwa .dstu-t { padding: 8px 10px !important; font-size: 12px !important; }
html.pwa .dstu-t strong { font-size: 14px !important; }

/* Tombol dan kartu umum di halaman lain */
html.pwa .btn { padding: 8px 12px !important; font-size: 13px !important; border-radius: 10px !important; }
html.pwa .card { padding: 12px !important; border-radius: 12px !important; }
html.pwa .empty { padding: 12px !important; font-size: 12px !important; }
html.pwa .empty b { font-size: 13px !important; }
html.pwa input, html.pwa select, html.pwa textarea { font-size: 14px; }
html.pwa h2 { font-size: 16px !important; }

/* Navigasi bawah: lebih rendah dan ringkas */
/* Bilah bawah: tinggi tetap memperhitungkan area aman (safe-area) di HP agar tidak ada celah hijau di bawahnya */
html.pwa #tabs { height: calc(56px + env(safe-area-inset-bottom, 0px)) !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; background: var(--card) !important; }
html.pwa #tabs a.pl .pl-b { margin-top: -28px !important; width: 52px !important; height: 52px !important; }
html.pwa #nav a, html.pwa #tabs a { font-size: 10px !important; }
html.pwa #nav svg, html.pwa #tabs svg { width: 18px !important; height: 18px !important; }

/* Sorotan (carousel informasi) disembunyikan agar beranda lebih ringkas */
html.pwa .dsl-w { display: none !important; }
html.pwa .dx-k { text-align: left !important; align-items: flex-start !important; }
html.pwa .dx-k.day .dx-ki { background: rgba(255,255,255,.18) !important; }

/* Monitoring AC: kartu per ruangan dibuat ringkas */
html.pwa .dac-b { gap: 6px !important; }
html.pwa .dac-c { padding: 6px 8px !important; border-radius: 10px !important; min-height: 0 !important; gap: 0 !important; }
html.pwa .dac-c b { font-size: 12px !important; line-height: 1.2 !important; letter-spacing: .04em !important; }
html.pwa .dac-c span { font-size: 11px !important; line-height: 1.2 !important; }
html.pwa .dac-c i, html.pwa .dac-c .dot { width: 6px !important; height: 6px !important; }
html.pwa .dac-c small { font-size: 10px !important; }
html.pwa .dac-grid, html.pwa .dac-b > div { gap: 6px !important; }
html.pwa .dac-c { padding-right: 22px !important; position: relative; }

/* ==========================================================================
   PENYEMPURNAAN UI/UX BERANDA (mode aplikasi terpasang)
   Prinsip: satu skala jarak (4/8/12/16px), hierarki jelas, target sentuh
   minimal 44px, umpan balik saat ditekan, dan label yang konsisten.
   ========================================================================== */

/* Header: tetap di atas, sedikit transparan, jarak lebih rapi */
html.pwa #main > header {
  position: sticky; top: 0; z-index: 20;
  padding: 10px 16px !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
html.pwa #ptitle { font-size: 17px !important; letter-spacing: .01em; }
html.pwa .thm, html.pwa .sbtn, html.pwa #bell {
  width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 12px !important;
}
html.pwa #av, html.pwa .av { width: 34px !important; height: 34px !important; }

/* Ruang konten */
html.pwa #view { padding: 12px 16px 104px !important; }
html.pwa .dx > * + * { margin-top: 16px !important; }

/* Sapaan: eyebrow tanggal, nama, lalu ringkasan status sebagai tombol */
html.pwa .dx-top small {
  display: block; font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .12em !important; text-transform: uppercase; opacity: .85;
}
html.pwa .dx-top h1 { font-size: 22px !important; line-height: 1.2 !important; margin: 4px 0 0 !important; font-weight: 700 !important; }
html.pwa .dx-sum {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px !important; font-weight: 600 !important; padding: 8px 14px !important;
  border-radius: 999px !important; margin-top: 12px !important;
}

/* Pencarian: lebih tinggi, mudah disentuh */
html.pwa .dsx { margin: 0 !important; }
html.pwa .dsr-b {
  height: 48px !important; border-radius: 14px !important; padding: 0 14px !important;
  gap: 10px; box-shadow: none !important;
}
html.pwa .dsr-b input, html.pwa #dq { font-size: 15px !important; }
html.pwa #dq::placeholder { font-size: 14px; }

/* Label bagian (eyebrow) konsisten di semua bagian */
html.pwa .dx-lb,
html.pwa .dx-sec .sh h2,
html.pwa .dx-kpi-lb {
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .1em !important;
  text-transform: uppercase; margin: 0 0 10px !important; opacity: .8;
}

/* Catat cepat: kartu aksi dengan ikon, teks, dan umpan balik tekan */
html.pwa .dx-qg { gap: 10px !important; }
html.pwa .dx-q {
  min-height: 60px !important; padding: 12px !important; gap: 12px !important;
  border-radius: 16px !important; align-items: center !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
html.pwa .dx-q:active { transform: scale(.98); }
html.pwa .dx-q i {
  width: 36px !important; height: 36px !important; min-width: 36px !important;
  border-radius: 12px !important;
}
html.pwa .dx-q i svg { width: 18px !important; height: 18px !important; }
html.pwa .dx-q b { font-size: 14px !important; font-weight: 700 !important; }
html.pwa .dx-q small { font-size: 12px !important; line-height: 1.3 !important; margin-top: 2px !important; opacity: .8; }

/* Ringkasan: satu tile utama (hari ini) dan tile status yang jelas */
html.pwa .dx-kpi { gap: 10px !important; }
html.pwa .dx-k {
  min-height: 96px !important; padding: 14px !important; border-radius: 16px !important;
  justify-content: space-between !important;
}
html.pwa .dx-k .l { font-size: 13px !important; font-weight: 600 !important; }
html.pwa .dx-k .n { font-size: 26px !important; font-weight: 700 !important; line-height: 1 !important; margin-top: 6px; }
html.pwa .dx-k small { font-size: 12px !important; margin-top: 6px; opacity: .8; }
html.pwa .dx-k .dx-ki { width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 10px !important; }

/* Bagian: kartu rata dengan bayangan lembut */
html.pwa .dx-sec {
  padding: 16px !important; border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
}
html.pwa .dx-sec .sh { margin-bottom: 12px !important; display: flex; align-items: center; justify-content: space-between; }
html.pwa .dx-sec .sh h2 { font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; opacity: 1 !important; margin: 0 !important; }
html.pwa .lnk { font-size: 13px !important; font-weight: 600 !important; min-height: 32px; padding: 4px 8px !important; }

/* Daftar aktivitas dan ATS: baris dengan pemisah halus */
html.pwa .dx-al { gap: 0 !important; }
html.pwa .dx-ai {
  min-height: 56px !important; padding: 12px 4px !important; border-radius: 0 !important;
  border-bottom: 1px solid rgba(127,127,127,.18); background: transparent !important;
}
html.pwa .dx-ai:last-child { border-bottom: 0; }
html.pwa .dx-ai .m b { font-size: 14px !important; font-weight: 600 !important; }
html.pwa .dx-ai .m small { font-size: 12px !important; }
html.pwa .dx-ai em { font-size: 20px !important; opacity: .5; }

/* Kapasitas studio: kartu angka yang mudah dibaca */
html.pwa .dstu-card { min-height: 72px; padding: 12px !important; border-radius: 14px !important; }
html.pwa .dstu-card strong { font-size: 22px !important; font-weight: 700 !important; }
html.pwa .dstu-card .nm { font-size: 12px !important; font-weight: 600 !important; }
html.pwa .dstu-t { border-radius: 14px !important; padding: 12px 14px !important; font-size: 13px !important; }

/* Monitoring AC: kartu ruangan dengan status jelas */
html.pwa .dac-c { min-height: 60px !important; padding: 10px 12px !important; border-radius: 14px !important; }
html.pwa .dac-c b { font-size: 13px !important; font-weight: 700 !important; }
html.pwa .dac-c span { font-size: 12px !important; margin-top: 2px; }

/* Tiket ATS */
html.pwa .tk { padding: 12px 0 !important; border-bottom: 1px solid rgba(127,127,127,.18); }
html.pwa .tk:last-child { border-bottom: 0; }
html.pwa .tk-poster { width: 52px !important; border-radius: 10px !important; }
html.pwa .tk .tl b { font-size: 14px !important; font-weight: 600 !important; }
html.pwa .tk .tl small { font-size: 12px !important; }

/* Keadaan kosong: tetap jelas dan tidak memakan tempat */
html.pwa .empty { padding: 16px !important; border-radius: 14px !important; text-align: center; }
html.pwa .empty b { font-size: 14px !important; display: block; margin-bottom: 4px; }

/* Bilah bawah: tombol + sejajar, label jelas, area sentuh cukup */
html.pwa #tabs a { min-height: 44px; font-size: 11px !important; font-weight: 600 !important; }
html.pwa #tabs a[aria-current=page] { font-weight: 700 !important; }

/* Gerakan dikurangi bila pengguna memintanya */
@media (prefers-reduced-motion: reduce) {
  html.pwa *, html.pwa *::before, html.pwa *::after { transition: none !important; animation: none !important; }
}

/* Catat cepat: ikon di atas, judul dan keterangan di bawah agar teks tidak terlalu sempit */
html.pwa .dx-q { flex-direction: column !important; align-items: flex-start !important; text-align: left !important; }
html.pwa .dx-q > span { display: block; width: 100%; }
html.pwa .dx-q i { margin-bottom: 2px; }
html.pwa .dx-qg > .dx-q:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row !important; align-items: center !important; }

/* ==========================================================================
   PADAT & RAPI (mode aplikasi terpasang): ruang lebih sedikit, tetap modern
   ========================================================================== */
html.pwa #main > header { padding: 8px 14px !important; }
html.pwa #view { padding: 10px 14px 96px !important; }
html.pwa .dx > * + * { margin-top: 12px !important; }
html.pwa .dx-top h1 { font-size: 20px !important; }
html.pwa .dx-sum { margin-top: 8px !important; padding: 6px 12px !important; font-size: 12px !important; }
html.pwa .dsx { margin-top: 0 !important; }
html.pwa .dsr-b { height: 44px !important; }
html.pwa .dx-lb, html.pwa .dx-sec .sh h2 { margin-bottom: 8px !important; }

/* Catat cepat: dua kolom lebih ringkas, judul satu baris */
html.pwa .dx-qg { gap: 8px !important; }
html.pwa .dx-q { min-height: 0 !important; padding: 10px !important; gap: 6px !important; border-radius: 14px !important; }
html.pwa .dx-q i { width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 10px !important; margin-bottom: 0 !important; }
html.pwa .dx-q b { font-size: 13px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.pwa .dx-q small { font-size: 11px !important; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
html.pwa .dx-qg > .dx-q:last-child:nth-child(odd) { padding: 10px 12px !important; }

/* Ringkasan: tile lebih pendek */
html.pwa .dx-kpi { gap: 8px !important; }
html.pwa .dx-k { min-height: 0 !important; padding: 10px 12px !important; border-radius: 14px !important; gap: 0 !important; }
html.pwa .dx-k .dx-ki { width: 28px !important; height: 28px !important; min-width: 28px !important; border-radius: 9px !important; }
html.pwa .dx-k .n { font-size: 22px !important; margin-top: 4px !important; }
html.pwa .dx-k small { margin-top: 2px !important; font-size: 11px !important; }

/* Bagian: padding lebih kecil */
html.pwa .dx-sec { padding: 12px !important; border-radius: 14px !important; }
html.pwa .dx-sec .sh { margin-bottom: 8px !important; }
html.pwa .dx-ai { min-height: 0 !important; padding: 9px 2px !important; }
html.pwa .tk { padding: 9px 0 !important; }
html.pwa .dstu-card { min-height: 0 !important; padding: 10px !important; }
html.pwa .dac-c { min-height: 0 !important; padding: 8px 10px !important; }
html.pwa .dx-k .dx-ki { margin-bottom: 6px !important; }

/* Menu samping (drawer) di mode terpasang: tombol tutup tidak menimpa judul */
html.pwa #side .brand { position: relative; padding-right: 60px !important; }
html.pwa #side .sb-close { position: absolute !important; top: 50%; right: 12px; transform: translateY(-50%); width: 40px !important; height: 40px !important; border-radius: 12px !important; }
html.pwa #side .brand img { width: 46px !important; }
html.pwa #side .brand b { font-size: 15px !important; }

/* Bilah navigasi bawah: beri ruang minimum 16px di bawah label agar tidak tertutup strip navigasi sistem */
html.pwa #tabs {
  height: calc(60px + max(env(safe-area-inset-bottom, 0px), 16px)) !important;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px) !important;
}
html.pwa #tabs a { padding-bottom: 4px !important; }

/* Sheet "Buat laporan baru": sembunyikan garis scroll yang mengganggu; tetap bisa digulir dengan sentuhan */
html.pwa #nsheet, html.pwa #nsheet *, html.pwa #nsbox, html.pwa #nsgrid, html.pwa #npanel {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html.pwa #nsheet::-webkit-scrollbar, html.pwa #nsheet *::-webkit-scrollbar,
html.pwa #nsbox::-webkit-scrollbar, html.pwa #nsgrid::-webkit-scrollbar {
  width: 0 !important; height: 0 !important; display: none !important;
}

/* Menu samping di HP: hilangkan handle geser (khusus PC) dan garis tepi kanan yang mengganggu */
html.pwa #side .sb-rz { display: none !important; }
html.pwa #side { box-shadow: none !important; border-right: 0 !important; }
html.pwa #side::after { display: none !important; }

/* ===== bagian: style-final.css ===== */
/* STC XXI Technical Report - lapisan tema final (visual saja).
   Tidak mengubah DOM, script, atau koneksi ke backend Apps Script.
   Hapus baris <link> style-final.css di index.html untuk kembali ke tampilan sebelumnya. */
:root{
  --fin-ink:#03110e; --fin-panel:#0b1c19; --fin-edge:#1b3932;
  --fin-paper:#f3f7f3; --fin-muted:#9fb3aa; --fin-gold:#c89b48; --fin-gold-hi:#edcb7a;
}
[data-theme="dark"] body{background:var(--fin-ink)}
#login .lphoto{object-fit:cover;filter:saturate(.9)}
#login .lhero{background:var(--fin-ink)}
#side{border-right:1px solid var(--fin-edge)}
#side .brand b{color:var(--fin-paper)}
#side .brand small{color:var(--fin-muted)}
header{border-bottom:1px solid var(--fin-edge)}
.btn:not(.sec):focus-visible,.nav a:focus-visible,button:focus-visible{outline:2px solid var(--fin-gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Target sentuh minimal 44px di layar kecil (WCAG 2.5.5) */
@media (max-width:768px){
  .thm,.bell,#sbtn,#uhtg{min-width:44px;min-height:44px}
}
/* Di layar kecil, tombol "+ Buat laporan" melayang menutupi isi halaman dan bilah bawah sudah punya tombol Buat */
@media (max-width:768px){
  body>#ra{display:none!important}
}

/* ===== Login kaca (glassmorphism) di atas foto kursi studio ===== */
#login:not(.hidden){
  display:flex !important;align-items:center;justify-content:center;min-height:100vh;padding:24px 16px;
  position:relative;isolation:isolate;
}
/* latar foto kursi studio diletakkan di lapisan terpisah agar tidak tertimpa aturan background dari stylesheet lama */
#login::before{
  content:"";position:fixed;inset:-24px;z-index:-1;pointer-events:none;
  background:url("img/lobby-xxi.webp") center/cover no-repeat;
  filter:blur(6px) brightness(.62) saturate(1.05);
  transform:scale(1.02);
}
#login .lhero{display:none !important}
#login .lpane{background:transparent !important;display:flex;justify-content:center;width:100%;padding:0 !important}
#login .lbox{
  position:relative;width:100%;max-width:380px;
  background:rgba(255,255,255,.14) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);
  border:1px solid rgba(255,255,255,.3) !important;border-radius:24px !important;
  box-shadow:0 24px 60px rgba(0,0,0,.4) !important;color:#fff !important;padding:30px 26px !important;
}
#login .lbox h2,#login .lbox .hello,#login .lbox p,#login .lbox label{color:#fff !important}
#login .lbox .hello{color:rgba(255,255,255,.8) !important;text-align:center}
#login .lbox h2{text-align:center;font-family:"Bodoni Moda",Georgia,serif;font-weight:500}
#login .lbox p{text-align:center;color:rgba(255,255,255,.78) !important;font-size:14px}
#login .cardlogo{display:block;width:84px;height:auto;margin:0 auto 10px}
#login .lbox input{
  background:rgba(255,255,255,.12) !important;color:#fff !important;border:1px solid rgba(255,255,255,.3) !important;
  border-radius:14px !important;
}
#login .lbox input::placeholder{color:rgba(255,255,255,.6)}
#login .lbox input:focus{outline:2px solid var(--fin-gold-hi);outline-offset:1px}
#login .lbox .btn.sec,#login .lbox #tp{background:rgba(255,255,255,.14) !important;color:#fff !important;border:1px solid rgba(255,255,255,.3) !important}
#login #lbtn,#login .lbox button[type=submit]{
  background:linear-gradient(135deg,#edcb7a,#c89b48) !important;color:#03110e !important;border:0 !important;
  border-radius:14px !important;font-weight:700;box-shadow:0 10px 24px rgba(200,155,72,.35);
}
#login .lthm{background:rgba(255,255,255,.18) !important;color:#fff !important;border:1px solid rgba(255,255,255,.3) !important}

/* Penegasan spesifisitas: menimpa aturan login dari stylesheet lama (style.css, style-reference.css, style-redesign.css, style-compact.css) */
html body #login{background:transparent !important;background-color:transparent !important}
html body #login .lpane{background:transparent !important;background-color:transparent !important}
html body #login .lbox{
  background:rgba(255,255,255,.14) !important;background-color:rgba(255,255,255,.14) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.25) !important;backdrop-filter:blur(18px) saturate(1.25) !important;
  border:1px solid rgba(255,255,255,.3) !important;border-radius:24px !important;box-shadow:0 24px 60px rgba(0,0,0,.4) !important;
}
html body #login .lbox h2{color:#fff !important}
html body #login .lbox .hello{color:rgba(255,255,255,.85) !important}
html body #login .lbox p{color:rgba(255,255,255,.8) !important}
html body #login .lbox label{color:#fff !important}
html body #login .lbox input{background:rgba(255,255,255,.12) !important;background-color:rgba(255,255,255,.12) !important;color:#fff !important;border:1px solid rgba(255,255,255,.3) !important}
html body #login .lbox #tp{background:rgba(255,255,255,.16) !important;background-color:rgba(255,255,255,.16) !important;color:#fff !important;border:1px solid rgba(255,255,255,.3) !important}
html body #login .lbox #lbtn{background:linear-gradient(135deg,#edcb7a,#c89b48) !important;background-color:#c89b48 !important;color:#03110e !important;border:0 !important}

/* Aturan tema terang/gelap dari style-reference.css memakai :root[data-theme] #login ..., jadi perlu dilawan dengan selektor setara */
:root[data-theme] #login .lbox{background:rgba(255,255,255,.14) !important;background-color:rgba(255,255,255,.14) !important;border:1px solid rgba(255,255,255,.3) !important;color:#fff !important}
:root[data-theme] #login .lbox input{background:rgba(255,255,255,.12) !important;background-color:rgba(255,255,255,.12) !important;color:#fff !important;border:1px solid rgba(255,255,255,.3) !important}
:root[data-theme] #login .lbox #tp{background:rgba(255,255,255,.16) !important;color:#fff !important;border:1px solid rgba(255,255,255,.3) !important}
:root[data-theme] #login .lbox #lbtn{background:linear-gradient(135deg,#edcb7a,#c89b48) !important;color:#03110e !important;border:0 !important}
:root[data-theme] #login .lpane{background:transparent !important}
:root[data-theme] #login{background:transparent !important}
:root[data-theme] #login .lbox h2,:root[data-theme] #login .lbox label{color:#fff !important}
:root[data-theme] #login .lbox .hello{color:rgba(255,255,255,.88) !important}
:root[data-theme] #login .lbox p{color:rgba(255,255,255,.82) !important}
:root[data-theme] #login .lbox input::placeholder{color:rgba(255,255,255,.65) !important}
:root[data-theme] #login .lbox #uh,:root[data-theme] #login .lbox .foot{color:rgba(255,255,255,.7) !important}

/* ===== Perbaikan blur login =====
   Satu-satunya blur kaca ada pada kartu .lbox. Blur lama dari style-reference.css (#login .lpane) dimatikan
   agar tidak muncul sebagai kotak buram di seluruh panel kanan. Latar dipasang pada satu lapisan tetap,
   sehingga tepi kartu bersih di desktop, tablet, dan HP. */
html body #login .lpane,:root[data-theme] #login .lpane,#login .lpane{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;filter:none !important}
html body #login .lbox,:root[data-theme] #login .lbox{
  -webkit-backdrop-filter:blur(18px) saturate(1.2) !important;backdrop-filter:blur(18px) saturate(1.2) !important;
  overflow:hidden;isolation:isolate;transform:translateZ(0);
  box-shadow:0 22px 50px rgba(0,0,0,.35) !important;
}

/* Penting: saat login selesai, kelas .hidden harus benar-benar menyembunyikan halaman login */
#login.hidden{display:none !important}

/* Kartu login tidak boleh ikut memudar bila kelas .ok tertinggal (animasi lok berakhir di opacity 0 dan memakai fill-mode both).
   Kelas .ok hanya dipakai sebagai efek sukses sesaat, jadi kartu tetap terlihat walau proses berpindah ke dashboard tertunda. */
#login.ok .lbox{animation:none !important;opacity:1 !important;transform:none !important}

/* Tombol ganti tema tidak ditampilkan di halaman login (tema login mengikuti tampilan kaca) */
#login .lthm{display:none !important}

/* ===== bagian: style-harmoni.css ===== */
/* STC XXI Technical Report - tema halaman dalam (lapisan terakhir), tiga mode:
   1. "glass" (data-theme="glass"): gaya video referensi - panel kaca buram di atas foto interior hangat.
   2. "light" (data-theme="light"): terang dengan latar putih.
   3. "dark"  (data-theme="dark"):  gelap hijau lumut, seperti bawaan aplikasi.
   Bentuk sidebar dan navigasi bawah tidak diubah; hanya warna, latar, dan gaya kaca.
   Hanya menyentuh elemen di dalam #app, #modal, #nsheet, #npanel, dan #toast; halaman login tidak diubah.
   Hapus baris <link> style-harmoni.css di index.html untuk kembali ke tampilan sebelumnya. */

/* ---------- 1. Token per mode ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#060c09; --card:#0d1612; --card2:#111d17; --bd:#1b2b22; --bd2:#2a3f33;
  --ink:#eef4f0; --txt:#cfdcd4; --mut:#8a9f94; --ph:#5f7569; --lbl:#b2c5ba;
  --g50:#101c16; --g100:#16261d; --g200:#2a4a39; --row2:#0f1a14; --dis:#121f18;
  --gt:#b5e0c9; --gt2:#6fd0a0;
  --gold:#b8913f; --gold-hi:#e1c476; --gold-lo:#e1c476; --gold-50:#221d0d; --gold-100:#5e4b1b;
  --red:#ff8a80; --red-bg:#361512; --ok:#6fd0a0; --ok-bg:#10291c; --warn:#f0c15c; --warn-bg:#2f2406;
  --info:#8ab8f0; --info-bg:#10243c;
  --sh1:0 1px 2px #000a; --sh2:0 24px 60px #000c; --rd-shadow:0 1px 2px #0000,0 14px 36px -16px #000c;
  --card-blur:none;
  --side-bg:linear-gradient(180deg,#0b1f1a 0%,#06140f 100%); --side-bd:#1b2b22; --side-fg:#eef4f0; --side-mut:#8a9f94;
  --side-input:rgba(255,255,255,.06); --side-act:linear-gradient(90deg,rgba(237,203,122,.16),rgba(237,203,122,.04));
  --head-bg:rgba(6,12,9,.94); --head-fg:#eef4f0; --head-bd:#1b2b22; --head-btn:rgba(255,255,255,.06);
  --tabs-bg:rgba(6,12,9,.96); --tabs-bd:#1b2b22; --tabs-fg:#8a9f94; --tabs-on:#edcb7a;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#ffffff; --card:#ffffff; --card2:#f7f9f8; --bd:#e3eae6; --bd2:#cfd9d3;
  --ink:#0b1c14; --txt:#1b2d24; --mut:#5b6d63; --ph:#93a39a; --lbl:#2c4137;
  --g50:#f4f7f5; --g100:#e7eee9; --g200:#cfe0d6; --row2:#f8faf9; --dis:#f1f4f2;
  --gt:#0b1c14; --gt2:#9c7430;
  --gold:#9c7430; --gold-hi:#e8c77a; --gold-lo:#6e4f16; --gold-50:#fbf6e8; --gold-100:#efdfae;
  --red:#b3261e; --red-bg:#fdeceb; --ok:#17703f; --ok-bg:#e1f2e7; --warn:#8a5a00; --warn-bg:#fdf0cf;
  --info:#1a5aa5; --info-bg:#e3edfa;
  --sh1:0 1px 2px #0b1c1410; --sh2:0 22px 50px #0b1c1426; --rd-shadow:0 1px 2px #0b1c140d,0 10px 26px -16px #0b1c1426;
  --card-blur:none;
  --side-bg:#ffffff; --side-bd:#e3eae6; --side-fg:#0b1c14; --side-mut:#5b6d63;
  --side-input:#f4f7f5; --side-act:linear-gradient(90deg,#fbf1d6,#fdf9ee);
  --head-bg:#ffffff; --head-fg:#0b1c14; --head-bd:#e3eae6; --head-btn:#f4f7f5;
  --tabs-bg:#ffffff; --tabs-bd:#e3eae6; --tabs-fg:#5b6d63; --tabs-on:#9c7430;
}
:root[data-theme="glass"]{
  color-scheme:dark;
  --bg:rgba(18,14,10,.30); --card:rgba(255,255,255,.14); --card2:rgba(255,255,255,.10);
  --bd:rgba(255,255,255,.26); --bd2:rgba(255,255,255,.20);
  --ink:#ffffff; --txt:rgba(255,255,255,.92); --mut:rgba(255,255,255,.70); --ph:rgba(255,255,255,.50); --lbl:rgba(255,255,255,.88);
  --g50:rgba(255,255,255,.08); --g100:rgba(255,255,255,.14); --g200:rgba(255,255,255,.22); --row2:rgba(255,255,255,.05); --dis:rgba(255,255,255,.04);
  --gt:#1b1408; --gt2:#edcb7a;
  --gold:#edcb7a; --gold-hi:#f6dd98; --gold-lo:#f0d28a; --gold-50:rgba(237,203,122,.14); --gold-100:rgba(237,203,122,.32);
  --red:#ffb3ab; --red-bg:rgba(255,120,110,.18); --ok:#9fe6bd; --ok-bg:rgba(111,208,160,.18); --warn:#ffd98a; --warn-bg:rgba(240,193,92,.18);
  --info:#b5d6ff; --info-bg:rgba(138,184,240,.18);
  --sh1:0 1px 2px rgba(0,0,0,.2); --sh2:0 24px 60px rgba(0,0,0,.30);
  --rd-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 18px 40px -18px rgba(0,0,0,.45);
  --card-blur:blur(18px) saturate(1.25);
  --side-bg:rgba(18,14,10,.40); --side-bd:rgba(255,255,255,.16); --side-fg:#f6f1e8; --side-mut:rgba(246,241,232,.66);
  --side-input:rgba(255,255,255,.08); --side-act:linear-gradient(90deg,rgba(237,203,122,.24),rgba(237,203,122,.06));
  --head-bg:rgba(18,14,10,.34); --head-fg:#f6f1e8; --head-bd:rgba(255,255,255,.16); --head-btn:rgba(255,255,255,.10);
  --tabs-bg:rgba(18,14,10,.52); --tabs-bd:rgba(255,255,255,.16); --tabs-fg:rgba(246,241,232,.72); --tabs-on:#edcb7a;
}

/* ---------- 2. Latar halaman ---------- */
:root[data-theme="dark"] body:has(#app:not(.hidden)){
  background:radial-gradient(1200px 520px at 80% -10%,#0f2a1d 0,transparent 60%),var(--bg);
  background-attachment:fixed;
}
:root[data-theme="light"] body:has(#app:not(.hidden)){background:#ffffff}
html[data-theme="glass"]{background:#120e0a}
:root[data-theme="glass"] body:has(#app:not(.hidden)){background:transparent}
:root[data-theme="glass"] body:has(#app:not(.hidden))::before{
  content:"";position:fixed;inset:-24px;z-index:-1;pointer-events:none;
  background:url("img/lobby-xxi.webp") center/cover no-repeat;
  filter:blur(10px) brightness(.78) saturate(1.05);transform:scale(1.02);
}

/* ---------- 3. Tipografi ---------- */
:root[data-theme] #app h1,:root[data-theme] #app h2,:root[data-theme] #app h3,
:root[data-theme] #modal h2,:root[data-theme] #modal h3,:root[data-theme] #nsheet h2,
:root[data-theme] #ptitle{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
:root[data-theme] #app #view{color:var(--txt)}

/* ---------- 4. Sidebar, navigasi, dan header (bentuk tetap, warna per mode) ---------- */
:root[data-theme] #app #side{background:var(--side-bg) !important;border-right:1px solid var(--side-bd) !important;color:var(--side-fg)}
:root[data-theme="glass"] #app #side,:root[data-theme="glass"] #app #main>header{-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
:root[data-theme] #app #side .brand b{color:var(--side-fg)}
:root[data-theme] #app #side .brand small{color:var(--side-mut)}
:root[data-theme] #app #side .ssrch{background:var(--side-input) !important;border:1px solid var(--side-bd) !important;border-radius:14px !important}
:root[data-theme] #app #side .ssrch input{background:transparent !important;border:0 !important;box-shadow:none !important;color:var(--side-fg) !important;outline:none}
:root[data-theme] #app #side .ssrch input::placeholder,:root[data-theme] #app #side .ssrch svg{color:var(--side-mut) !important;stroke:var(--side-mut)}
:root[data-theme] #app #nav a,:root[data-theme] #app #nav button{color:var(--side-fg);text-decoration:none;border-radius:12px}
:root[data-theme] #app #nav a:hover,:root[data-theme] #app #nav button:hover{background:var(--g100) !important;color:var(--side-fg)}
:root[data-theme] #app #nav .active,:root[data-theme] #app #nav a.on,:root[data-theme] #app #nav [aria-current=page]{
  background:var(--side-act) !important;color:var(--side-fg) !important;box-shadow:inset 3px 0 0 var(--gold-hi);
}
:root[data-theme] #app #nav h6,:root[data-theme] #app #nav .nsec,:root[data-theme] #app #nav .gh{color:var(--gold-lo) !important;letter-spacing:.14em;text-transform:uppercase;font-size:11px;font-weight:700}
:root[data-theme] #app #main>header{background:var(--head-bg) !important;color:var(--head-fg);border-bottom:1px solid var(--head-bd) !important}
:root[data-theme] #app #main>header #ptitle{color:var(--head-fg) !important;font-size:22px}
:root[data-theme] #app #main>header #psub,:root[data-theme] #app #main>header #clock,:root[data-theme] #app #main>header #conn{color:var(--side-mut) !important}
:root[data-theme] #app #main>header .thm,:root[data-theme] #app #main>header .bell,:root[data-theme] #app #main>header #uhtg{
  background:var(--head-btn) !important;color:var(--head-fg) !important;border:1px solid var(--head-bd) !important;
}
:root[data-theme] #app #main>header .uh-who b{color:var(--head-fg)}
:root[data-theme] #app #main>header .badge{background:var(--gold-50);color:var(--gold-lo)}

/* ---------- 5. Konten: kartu, tombol, input, tabel ---------- */
:root[data-theme] #app .dx-top small,:root[data-theme] #app .dx-date{
  color:var(--gold-lo);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
:root[data-theme="light"] #app .dx-top small,:root[data-theme="light"] #app .dx-date{color:var(--gold)}
:root[data-theme] #app .dx-top h1{font-size:clamp(28px,3.4vw,44px);line-height:1.08}
:root[data-theme] #app .sh h2{font-size:clamp(20px,2.2vw,26px)}

:root[data-theme] #app .card,:root[data-theme] #app .dq,:root[data-theme] #app .dx-panel,
:root[data-theme] #app .dx-studio,:root[data-theme] #app .dx-q,:root[data-theme] #app .dx-k,
:root[data-theme] #app .dact,:root[data-theme] #app .dc-b,:root[data-theme] #app .ds-list{
  background:var(--card) !important;border:1px solid var(--bd) !important;border-radius:18px !important;
  box-shadow:var(--rd-shadow) !important;color:var(--txt);
  -webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);
}
:root[data-theme] #app .card:hover,:root[data-theme] #app .dx-q:hover,:root[data-theme] #app .dx-k:hover{border-color:var(--gold) !important}
:root[data-theme] #app .dx-q,:root[data-theme] #app .dx-k{transition:border-color .2s ease,transform .2s ease}
:root[data-theme] #app .dx-q:hover,:root[data-theme] #app .dx-k:hover{transform:translateY(-1px)}
:root[data-theme] #app .dx-q > i{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--gold-50) !important;color:var(--gt) !important;border:1px solid var(--gold-100) !important;
}
:root[data-theme="dark"] #app .dx-q > i{color:#e1c476 !important}
:root[data-theme] #app .dx-q > i .ic,:root[data-theme] #app .dx-q > i svg{stroke:currentColor !important;color:inherit !important}
:root[data-theme] #app .dx-ki{background:var(--gold-50);color:var(--gold-lo);border-radius:12px;border:1px solid var(--gold-100)}

:root[data-theme] #app .btn:not(.sec),:root[data-theme] #modal .btn:not(.sec),:root[data-theme] #nsheet .btn:not(.sec){
  background:linear-gradient(135deg,#edcb7a,#c89b48) !important;color:#03110e !important;border:0 !important;
  border-radius:14px !important;font-weight:700;box-shadow:0 8px 20px rgba(200,155,72,.28);
}
:root[data-theme] #app .btn:not(.sec):not(:disabled):hover,:root[data-theme] #modal .btn:not(.sec):hover{
  background:linear-gradient(135deg,#f3d88f,#d4a85a) !important;transform:translateY(-1px);
}
:root[data-theme] #app .btn.sec,:root[data-theme] #modal .btn.sec,:root[data-theme] #nsheet .btn.sec{
  background:var(--card2) !important;color:var(--ink) !important;border:1px solid var(--bd2) !important;border-radius:14px !important;font-weight:600;
}
:root[data-theme] #app .btn.sec:hover,:root[data-theme] #modal .btn.sec:hover{border-color:var(--gold) !important;color:var(--gold-hi) !important}
:root[data-theme="light"] #app .btn.sec:hover,:root[data-theme="light"] #modal .btn.sec:hover{color:var(--gold-lo) !important}
:root[data-theme] #app .btn:disabled{opacity:.5;box-shadow:none}

:root[data-theme] #app input:not([type=checkbox]):not([type=radio]):not([type=search]),
:root[data-theme] #app select,:root[data-theme] #app textarea,
:root[data-theme] #modal input:not([type=checkbox]):not([type=radio]),
:root[data-theme] #modal select,:root[data-theme] #modal textarea{
  background:var(--card2) !important;color:var(--ink) !important;border:1px solid var(--bd2) !important;border-radius:12px !important;
}
:root[data-theme] #app input:focus,:root[data-theme] #app select:focus,:root[data-theme] #app textarea:focus,
:root[data-theme] #modal input:focus,:root[data-theme] #modal select:focus,:root[data-theme] #modal textarea:focus{
  outline:2px solid var(--gold-hi);outline-offset:1px;border-color:var(--gold) !important;
}
:root[data-theme] #app label,:root[data-theme] #modal label{color:var(--lbl)}

:root[data-theme] #app .dsl-tabs button,:root[data-theme] #app .dsr-tabs button,:root[data-theme] #app .chips button{
  border-radius:999px;border:1px solid var(--bd2);background:var(--card);color:var(--txt);font-weight:600;
}
:root[data-theme] #app .dsl-tabs button.on,:root[data-theme] #app .dsr-tabs button.on,:root[data-theme] #app .chips button.on{
  background:linear-gradient(135deg,#edcb7a,#c89b48) !important;color:#03110e !important;border-color:transparent !important;
}
:root[data-theme] #app .dsl-tabs button.on *,:root[data-theme] #app .dsr-tabs button.on *{color:#03110e !important}
:root[data-theme] #app .badge{border-radius:999px;font-weight:700}
:root[data-theme] #app .badge:not([class*="st-"]){background:var(--gold-50);color:var(--gold-lo);border:1px solid var(--gold-100)}

:root[data-theme] #app table{border-collapse:separate;border-spacing:0}
:root[data-theme] #app th{background:var(--g50);color:var(--mut);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
:root[data-theme] #app td,:root[data-theme] #app th{border-bottom:1px solid var(--bd)}
:root[data-theme] #app tbody tr:hover td{background:var(--row2)}

/* ---------- 6. Pencarian & status beranda ---------- */
:root[data-theme] #app .dsr-b{
  background:var(--card) !important;border:1px solid var(--bd2) !important;border-radius:18px !important;box-shadow:var(--rd-shadow);
  -webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);
}
:root[data-theme] #app .dsr-b:focus-within{border-color:var(--gold) !important}
:root[data-theme] #app .dsr-b input:not([type=checkbox]):not([type=radio]):not([type=search]):not([type=button]){
  background:transparent !important;border:0 !important;box-shadow:none !important;outline:none !important;color:var(--ink) !important;
}
:root[data-theme] #app .dsr-b input::placeholder{color:var(--ph) !important}
:root[data-theme] #app .dx-top .badge,:root[data-theme] #app .dx-top [class*=status]{
  background:var(--card) !important;color:var(--txt) !important;border:1px solid var(--bd2) !important;border-radius:999px !important;
  box-shadow:var(--sh1);font-weight:600;
}

/* ---------- 7. Modal, panel notifikasi, sheet buat laporan, toast ---------- */
:root[data-theme] #modal .mbox,:root[data-theme] #npanel,:root[data-theme] #nsheet .nsh-box{
  background:var(--card) !important;border:1px solid var(--bd) !important;border-radius:22px !important;box-shadow:var(--sh2) !important;color:var(--txt);
  -webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);
}
:root[data-theme] #modal .mbox h2,:root[data-theme] #nsheet .nsh-box h2{font-size:24px}
:root[data-theme] #toast{
  background:var(--card) !important;color:var(--ink) !important;border:1px solid var(--gold-100) !important;border-radius:14px !important;
  box-shadow:var(--sh2);-webkit-backdrop-filter:var(--card-blur);backdrop-filter:var(--card-blur);
}
:root[data-theme="dark"] #toast{background:#060c09 !important;color:#eef4f0 !important}

/* ---------- 8. Navigasi bawah (HP) - bentuk tetap ---------- */
@media (max-width:768px){
  :root[data-theme] #app #tabs{background:var(--tabs-bg) !important;border-top:1px solid var(--tabs-bd) !important;
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  :root[data-theme] #app #tabs button:not(.pl),:root[data-theme] #app #tabs a:not(.pl){color:var(--tabs-fg)}
  :root[data-theme] #app #tabs .on:not(.pl),:root[data-theme] #app #tabs [aria-current=page]:not(.pl),:root[data-theme] #app #tabs .active:not(.pl){color:var(--tabs-on) !important}
}

/* ---------- 8b. Slide sorotan (beranda): kecil, minimalis, tanpa teks terpotong ---------- */
:root[data-theme] #app .dsl-w .sh{margin-bottom:10px}
:root[data-theme] #app .dsl-s::after{content:none !important;display:none !important}
:root[data-theme] #app .dsl-s{
  height:auto !important;min-height:116px !important;padding:16px 50px 30px 50px !important;gap:0;align-items:center;
  background:var(--card) !important;border:1px solid var(--bd);border-radius:16px;box-shadow:var(--rd-shadow);overflow:hidden;
}
:root[data-theme="dark"] #app .dsl-s{background:linear-gradient(180deg,#0e1d16,#0a1511) !important}
:root[data-theme] #app .dsl-s:hover{border-color:var(--gold)}
/* Slide utama (sc-a): latar foto auditorium dengan gradasi gelap di kiri agar teks terbaca */
:root[data-theme] #app .dsl-s.sc-a::before{
  content:"" !important;display:block !important;position:absolute !important;inset:0 !important;width:auto !important;height:auto !important;
  background:
    linear-gradient(90deg,rgba(6,12,9,.94) 0%,rgba(6,12,9,.78) 42%,rgba(6,12,9,.28) 80%,rgba(6,12,9,.10) 100%),
    url("img/auditorium.jpg") center 92%/cover no-repeat !important;
  z-index:0 !important;pointer-events:none;border-radius:inherit;
}
:root[data-theme] #app .dsl-s.sc-a .dsl-im{display:none !important}
:root[data-theme] #app .dsl-s.sc-a .dsl-x{padding-right:0 !important;max-width:min(62%,560px) !important}
:root[data-theme] #app .dsl-s.sc-a .dsl-x>small{color:#edcb7a !important}
:root[data-theme] #app .dsl-s.sc-a .dsl-x>b{color:#ffffff !important}
:root[data-theme] #app .dsl-s.sc-a .dsl-x>span{color:rgba(255,255,255,.84) !important}
:root[data-theme] #app .dsl-s.sc-a .dsl-x{text-shadow:0 1px 10px rgba(0,0,0,.45)}
:root[data-theme] #app .dsl-s.sc-a .dsl-x{padding-right:0}
/* Teks: tidak dipotong, tidak ada elipsis */
:root[data-theme] #app .dsl-x{order:1;padding:0;min-width:0;flex:1;position:relative;z-index:1;max-width:none !important}
:root[data-theme] #app .dsl-x>small{display:block;font-size:10.5px !important;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lo) !important;margin:0 0 6px;text-shadow:none !important;line-height:1.3}
:root[data-theme] #app .dsl-x>b{display:block;font-family:var(--serif) !important;font-size:20px !important;font-weight:600 !important;line-height:1.25 !important;color:var(--ink) !important;text-shadow:none !important;max-width:none !important;-webkit-line-clamp:unset !important;overflow:visible !important;display:block !important}
:root[data-theme] #app .dsl-x>span{display:block;margin-top:6px;font-size:12.5px !important;line-height:1.5 !important;color:var(--mut) !important;text-shadow:none !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;max-width:none !important;-webkit-line-clamp:unset !important;-webkit-box-orient:horizontal !important;display:block !important}
:root[data-theme] #app .dsl-s .kbl{font-size:12.5px !important;color:var(--mut) !important}
:root[data-theme] #app .dsl-s .kbh{font-size:10.5px !important}
:root[data-theme] #app .dsl-s.kb .kbg{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:6px 14px;margin-top:4px}
:root[data-theme] #app .dsl-s.kb .kbc{padding:0 !important;margin:0 !important}
:root[data-theme] #app .dsl-s.kb .kbc em{display:block;font-style:normal;font-size:11px !important;font-weight:700;color:var(--gold-lo);letter-spacing:.04em}
:root[data-theme] #app .dsl-s.kb .kbc p{margin:2px 0 0 !important;font-size:12px !important;line-height:1.45 !important;color:var(--mut) !important;display:block !important;-webkit-line-clamp:unset !important;overflow:visible !important}
:root[data-theme] #app .dsl-s.kb .kbh{display:none !important}
:root[data-theme] #app .dsl-s.kb .kbl{display:block;margin-top:2px}
:root[data-theme] #app .dsl-art{display:none}
:root[data-theme] #app .dsl-b{width:28px;height:28px;min-height:28px;font-size:16px;background:rgba(6,12,9,.55);border:1px solid rgba(237,203,122,.35);color:#fff;z-index:2}
:root[data-theme] #app .dsl-b.p{left:10px}
:root[data-theme] #app .dsl-b.n{right:10px}
:root[data-theme] #app .dsl-d{bottom:9px;padding:0 60px;gap:5px}
:root[data-theme] #app .dsl-d button{width:6px;height:6px;background:rgba(255,255,255,.35)}
:root[data-theme] #app .dsl-d button.on{width:16px;background:#edcb7a}
@media (max-width:600px){
  :root[data-theme] #app .dsl-s{min-height:0 !important;padding:14px 40px 28px 40px !important}
  :root[data-theme] #app .dsl-x>b{font-size:17px !important}
  :root[data-theme] #app .dsl-x>span{font-size:12px !important}
  :root[data-theme] #app .dsl-s.sc-a .dsl-x{max-width:none !important}
  :root[data-theme] #app .dsl-b.p{left:6px}
  :root[data-theme] #app .dsl-b.n{right:6px}
}

/* ---------- 9. Fokus & gerak ---------- */
:root[data-theme] #app :focus-visible,:root[data-theme] #modal :focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  :root[data-theme] #app *{transition:none !important;animation:none !important}
}

/* ===== bagian: style-mode-final.css ===== */
/* STC XXI Technical Report - lapisan final (frontend saja):
   pemilih mode segmen, font Inter yang jelas di semua mode, warna hero dan banner ATS
   mengikuti mode, tabel terbaca di semua mode, indikator AC error, dan tombol Download. */

:root{
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- 1. Font: satu keluarga teks yang jelas di semua mode ---------- */
#app,#app *,#modal,#modal *,#nsheet,#nsheet *,#npanel,#npanel *,#toast,#login,#login *,#tabs,#tabs *{
  font-family:var(--font) !important;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
#app h1,#app h2,#app h3,#app #ptitle,#modal h3,#modal h2,#nsheet h2,
#app .dx-top h1,#app .dx-top h2,#app .dh-t h1,#app .ph-t h1,#phero h1{
  font-weight:700 !important;letter-spacing:-.015em !important;
}
#app .card b,#app .dq h2,#app .sh h2,#modal b,#app .tk b,#app .film>div>b{font-weight:700 !important}

/* ---------- 2. Warna per mode (token) ---------- */
:root[data-theme="dark"]{
  --hero-a:linear-gradient(120deg,#0e3324 0%,#082117 55%,#04140d 100%);
  --hero-ink:#f4f8f5;--hero-sub:#cfe2d6;--hero-ic:rgba(237,203,122,.10);--hero-ic-bd:rgba(237,203,122,.45);--hero-gold:#edcb7a;
  --hero-img-op:.55;
  --tb-bg:#04140f;--tb-ovl:linear-gradient(90deg,rgba(3,18,15,.97) 0%,rgba(3,18,15,.80) 42%,rgba(3,18,15,.45) 75%,rgba(3,18,15,.60) 100%);
  --tb-ink:#f4f8f5;--tb-sub:#d6e6dc;--tb-gold:#edcb7a;--tb-bd:rgba(225,196,118,.6);
  --tbl-ink:#eef4f0;--tbl-th:#b2c5ba;--tbl-bd:#2a3f33;
  --err-bg:#361512;--err-ink:#ffb3ab;--err-bd:#ff8a80;
}
:root[data-theme="glass"]{
  --hero-a:linear-gradient(120deg,rgba(20,15,10,.66) 0%,rgba(20,15,10,.50) 60%,rgba(20,15,10,.40) 100%);
  --hero-ink:#ffffff;--hero-sub:#f1ebe0;--hero-ic:rgba(237,203,122,.18);--hero-ic-bd:rgba(246,221,152,.6);--hero-gold:#f6dd98;
  --hero-img-op:.6;
  --tb-bg:rgba(20,15,10,.55);--tb-ovl:linear-gradient(90deg,rgba(12,9,6,.86) 0%,rgba(12,9,6,.66) 45%,rgba(12,9,6,.40) 80%,rgba(12,9,6,.55) 100%);
  --tb-ink:#ffffff;--tb-sub:#f1ebe0;--tb-gold:#f6dd98;--tb-bd:rgba(246,221,152,.55);
  --tbl-ink:#ffffff;--tbl-th:rgba(255,255,255,.82);--tbl-bd:rgba(255,255,255,.22);
  --err-bg:rgba(255,120,110,.22);--err-ink:#ffd0ca;--err-bd:#ffb3ab;
}
:root[data-theme="light"]{
  --hero-a:linear-gradient(120deg,#fbf6ea 0%,#f6edd7 60%,#efe2bf 100%);
  --hero-ink:#0b1c14;--hero-sub:#2c4137;--hero-ic:#fffdf6;--hero-ic-bd:#c9a86a;--hero-gold:#7a5514;
  --hero-img-op:.22;
  --tb-bg:#f6edd7;--tb-ovl:linear-gradient(90deg,rgba(251,246,234,.97) 0%,rgba(251,246,234,.90) 42%,rgba(251,246,234,.62) 75%,rgba(251,246,234,.55) 100%);
  --tb-ink:#0b1c14;--tb-sub:#2c4137;--tb-gold:#7a5514;--tb-bd:#c9a86a;
  --tbl-ink:#0b1c14;--tbl-th:#2c4137;--tbl-bd:#cfd9d3;
  --err-bg:#fdeceb;--err-ink:#8c1d17;--err-bd:#b3261e;
}

/* ---------- 3. Pemilih mode (segmen) di header, pengganti tombol satu-klik ---------- */
#app #main>header .mseg{
  display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  background:var(--head-btn);border:1px solid var(--head-bd);flex:0 0 auto;
}
#app #main>header .mseg button{
  appearance:none;border:0;background:transparent;color:var(--head-fg);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 11px;border-radius:999px;
  font:600 13px/1 var(--font);white-space:nowrap;transition:background .15s ease,color .15s ease;
}
#app #main>header .mseg button .ic{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
#app #main>header .mseg button:hover{background:var(--g100)}
#app #main>header .mseg button.on,#app #main>header .mseg button[aria-checked="true"]{
  background:linear-gradient(135deg,#edcb7a,#c89b48);color:#03110e;
}
#app #main>header .mseg button:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
@media(max-width:720px){
  #app #main>header .mseg button span{display:none}
  #app #main>header .mseg button{padding:0 10px;min-width:36px;justify-content:center}
}
@media(max-width:380px){#app #main>header .mseg{display:none}}

/* ---------- 4. Hero halaman (contoh: Advance Ticket Sales) mengikuti mode ---------- */
#phero,#phero.ph-a,#phero.ph-b,#phero.ph-g,#phero.ph-w{background:var(--hero-a) !important;color:var(--hero-ink) !important;border:1px solid var(--tb-bd)}
#phero::after{background:repeating-linear-gradient(135deg,rgba(128,128,128,.06) 0 2px,transparent 2px 24px) !important}
#phero .ph-t h1{color:var(--hero-ink) !important}
#phero .ph-t p{color:var(--hero-sub) !important;opacity:1 !important}
#phero .ph-t i{background:var(--hero-ic) !important;border:1px solid var(--hero-ic-bd) !important;color:var(--hero-gold) !important}
#phero .ph-t i .ic,#phero .ph-t i svg{stroke:currentColor !important;color:var(--hero-gold) !important}
#phero .ph-img{opacity:var(--hero-img-op)}
#phero .ph-img img{filter:none}

/* ---------- 5. Banner ATS di dashboard (slide) mengikuti mode ---------- */
:root[data-theme] .dsl-s.sc-c{background:var(--tb-bg) !important}
:root[data-theme] .dsl-s.sc-c::before{background:var(--tb-ovl) !important}
:root[data-theme] .dsl-s.sc-c .dsl-x>small{color:var(--tb-gold) !important}
:root[data-theme] .dsl-s.sc-c .dsl-x>b{color:var(--tb-ink) !important;text-shadow:none !important}
:root[data-theme] .dsl-s.sc-c .dsl-x>span{color:var(--tb-sub) !important}
:root[data-theme] .dsl-s.sc-c .dsl-im{border-color:var(--tb-bd) !important}

/* ---------- 6. Tabel dan teks di dalam modal/halaman: selalu terbaca ---------- */
:root[data-theme] #modal table,:root[data-theme] #view table,:root[data-theme] #modal td,:root[data-theme] #view td{color:var(--tbl-ink) !important}
:root[data-theme] #modal th,:root[data-theme] #view th{color:var(--tbl-th) !important}
:root[data-theme] #modal table,:root[data-theme] #view table{background:transparent}
:root[data-theme] #modal th,:root[data-theme] #modal td,:root[data-theme] #view th,:root[data-theme] #view td{border-color:var(--tbl-bd) !important}
:root[data-theme] #modal .mt td,:root[data-theme] #modal .mt th{color:var(--tbl-ink) !important}
:root[data-theme] #modal p,:root[data-theme] #modal li,:root[data-theme] #modal small,:root[data-theme] #modal span,:root[data-theme] #view p,:root[data-theme] #view li{color:var(--txt)}
:root[data-theme] #modal small,:root[data-theme] #view small{color:var(--mut) !important}

/* ---------- 7. Daily Monitoring AC: AC Eror ---------- */
.aerr{display:inline-flex;align-items:center;gap:8px;margin:2px 0 8px;padding:8px 12px;border-radius:12px;
  border:1px solid var(--bd2);background:var(--g50);color:var(--ink);font-weight:600;font-size:14px;cursor:pointer;min-height:44px}
.aerr input{width:18px;height:18px;min-height:0;margin:0;accent-color:#c0392b;cursor:pointer}
.aerr:has(input:checked){border-color:var(--err-bd);background:var(--err-bg);color:var(--err-ink)}
.ts-err{background:var(--err-bg);color:var(--err-ink);border:1px solid var(--err-bd);border-radius:999px;padding:2px 9px;font-weight:700;font-size:12px}
.ac-errbox,.dac-alert{margin:0 0 12px;padding:10px 14px;border-radius:12px;background:var(--err-bg);color:var(--err-ink);
  border:1px solid var(--err-bd);font-weight:600;font-size:14px;line-height:1.5}
.ac-errbox b,.dac-alert b{font-weight:800}
.dac-c.err{border-color:var(--err-bd) !important;background:var(--err-bg) !important;color:var(--err-ink) !important}
.dac-c.err b::after{content:" ⚠";color:var(--err-ink)}

/* ---------- 8. Tombol Download tunggal -> pilihan PDF / Excel ---------- */
.dlw{position:relative;display:inline-block}
.dlw>.btn{min-width:130px}
.dlw .dlm{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:240px;display:flex;flex-direction:column;gap:4px;padding:6px;
  border-radius:14px;background:var(--card);border:1px solid var(--bd2);box-shadow:var(--sh2);backdrop-filter:var(--card-blur);-webkit-backdrop-filter:var(--card-blur)}
.dlw .dlm.hidden{display:none !important}
.dlw .dlm button{appearance:none;text-align:left;background:transparent;border:0;border-radius:10px;padding:11px 12px;min-height:44px;
  color:var(--ink);font:600 14px/1.2 var(--font);cursor:pointer}
.dlw .dlm button:hover,.dlw .dlm button:focus-visible{background:var(--g100);outline:none}
.zipbar .dlw{margin-left:auto}

/* ---------- 9. Grafik meteran: kontras di setiap mode ---------- */
#mchart{background:var(--card) !important;border-color:var(--bd2) !important}
#mchart svg text{font-family:var(--font) !important}
#mchart .ctx{fill:var(--mut) !important;font-weight:600}
#mchart .ctt{fill:var(--ink) !important}
#mchart .cts{fill:var(--txt) !important}
#mchart .cgr{stroke:var(--bd2) !important;opacity:.7}
#mchart .cax{stroke:var(--bd2) !important}
.mlb{color:var(--ink) !important;border-color:var(--bd2) !important;font-weight:600}
.mlb i{box-shadow:0 0 0 1px rgba(128,128,128,.25)}

/* ---------- 10. Mode Kaca: tabel laporan & chip status harus terbaca di atas foto ---------- */
:root[data-theme="glass"] #view .scroll.cards{
  background:rgba(12,9,6,.68) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);
  border:1px solid rgba(255,255,255,.18) !important;border-radius:16px;
}
:root[data-theme="glass"] #view table.rt th{color:rgba(255,255,255,.95) !important;text-shadow:0 1px 2px rgba(0,0,0,.7);font-weight:700}
:root[data-theme="glass"] #view table.rt td{color:#ffffff !important;text-shadow:0 1px 3px rgba(0,0,0,.75)}
:root[data-theme="glass"] #view table.rt td[data-l="Pelapor"],:root[data-theme="glass"] #view table.rt td.sm{color:rgba(255,255,255,.92) !important}
:root[data-theme="glass"] #view table.rt tr{border-color:rgba(255,255,255,.16) !important}
:root[data-theme="glass"] .st{
  background:rgba(8,6,4,.82) !important;color:#ffffff !important;border:1px solid rgba(255,255,255,.4) !important;
  text-shadow:none;font-weight:700;
}
:root[data-theme="glass"] .st.ts-ok,:root[data-theme="glass"] .st.st-Completed,:root[data-theme="glass"] .st.st-Selesai{color:#a8f5c8 !important;border-color:#a8f5c8 !important}
:root[data-theme="glass"] .st.ts-warm,:root[data-theme="glass"] .st.ts-cold,:root[data-theme="glass"] .st.ts-na{color:#ffb3ab !important;border-color:#ffb3ab !important}
:root[data-theme="glass"] .st.st-In-Progress,:root[data-theme="glass"] .st.st-Pending,:root[data-theme="glass"] .st.st-Open{color:#ffd98a !important;border-color:#ffd98a !important}
:root[data-theme="glass"] .dlw .dlm{background:rgba(12,9,6,.92) !important;border-color:rgba(255,255,255,.22) !important}
:root[data-theme="glass"] .dlw .dlm button{color:#ffffff !important}

/* ---------- 11. Iklan (slide sorotan), poster ATS, dan info film mengikuti mode ---------- */
:root[data-theme="dark"]{
  --ad-bg:linear-gradient(180deg,#0e1d16,#0a1511);
  --ad-ovl:linear-gradient(90deg,rgba(6,12,9,.94) 0%,rgba(6,12,9,.78) 42%,rgba(6,12,9,.28) 80%,rgba(6,12,9,.10) 100%);
  --ad-ink:#f4f8f5;--ad-sub:#d6e6dc;--ad-gold:#edcb7a;--ad-bd:rgba(225,196,118,.38);
  --poster-bg:#0b1410;
  --film-card:var(--card);--film-ink:#eef4f0;--film-sub:#c4d6cb;
  --cdl-bg:rgba(201,162,77,.12);--cdl-bd:rgba(225,196,118,.40);--cdl-lab:#edcb7a;--cdl-cell:rgba(0,0,0,.38);--cdl-ink:#f4f8f5;
  --cdx-ink:#ffb3ab;--cdx-bg:rgba(255,120,110,.14);
}
:root[data-theme="glass"]{
  --ad-bg:rgba(14,11,8,.60);
  --ad-ovl:linear-gradient(90deg,rgba(10,8,6,.90) 0%,rgba(10,8,6,.72) 45%,rgba(10,8,6,.40) 80%,rgba(10,8,6,.50) 100%);
  --ad-ink:#ffffff;--ad-sub:#f1ebe0;--ad-gold:#f6dd98;--ad-bd:rgba(246,221,152,.55);
  --poster-bg:#0a0806;
  --film-card:rgba(12,9,6,.66);--film-ink:#ffffff;--film-sub:#f1ebe0;
  --cdl-bg:rgba(246,221,152,.14);--cdl-bd:rgba(246,221,152,.58);--cdl-lab:#f6dd98;--cdl-cell:rgba(8,6,4,.72);--cdl-ink:#ffffff;
  --cdx-ink:#ffd0ca;--cdx-bg:rgba(255,120,110,.22);
}
:root[data-theme="light"]{
  --ad-bg:linear-gradient(180deg,#fffdf6,#f6edd7);
  --ad-ovl:linear-gradient(90deg,rgba(255,253,246,.97) 0%,rgba(255,253,246,.88) 45%,rgba(255,253,246,.45) 80%,rgba(255,253,246,.25) 100%);
  --ad-ink:#0b1c14;--ad-sub:#2c4137;--ad-gold:#7a5514;--ad-bd:#c9a86a;
  --poster-bg:#efe6d0;
  --film-card:#ffffff;--film-ink:#0b1c14;--film-sub:#3a4f45;
  --cdl-bg:#fbf3df;--cdl-bd:#c9a86a;--cdl-lab:#7a5514;--cdl-cell:#ffffff;--cdl-ink:#0b1c14;
  --cdx-ink:#8c1d17;--cdx-bg:#fdeceb;
}

/* Iklan: latar dan teks mengikuti mode (sc-a memakai foto auditorium hanya sebagai lapisan di bawah gradasi) */
:root[data-theme] #app .dsl-s{background:var(--ad-bg) !important;border-color:var(--ad-bd) !important}
:root[data-theme] #app .dsl-s.sc-a::before{
  background:var(--ad-ovl),url("img/auditorium.jpg") center 92%/cover no-repeat !important;
}
:root[data-theme] #app .dsl-s .dsl-x>small{color:var(--ad-gold) !important}
:root[data-theme] #app .dsl-s .dsl-x>b{color:var(--ad-ink) !important;text-shadow:none !important}
:root[data-theme] #app .dsl-s .dsl-x>span{color:var(--ad-sub) !important}
:root[data-theme] #app .dsl-s.sc-a .dsl-x>small{color:var(--ad-gold) !important}
:root[data-theme] #app .dsl-s.sc-a .dsl-x>b{color:var(--ad-ink) !important}
:root[data-theme] #app .dsl-s.sc-a .dsl-x>span{color:var(--ad-sub) !important}
:root[data-theme] #app .dsl-s.sc-a .dsl-x{text-shadow:none !important}
:root[data-theme="light"] #app .dsl-s.sc-a .dsl-x{text-shadow:none !important}

/* Poster ATS: seluruh poster terlihat (tidak terpotong), ukuran sedikit lebih besar, latar sesuai mode */
#view .grid>.card.film>img,#view .grid>.card.film>.noimg,.film img,.film .noimg,.tk-poster{
  object-fit:contain !important;background:var(--poster-bg) !important;padding:4px;box-sizing:border-box;
  border:1px solid var(--bd2) !important;
}
#view .grid>.card.film{grid-template-columns:minmax(132px,160px) minmax(0,1fr) !important;gap:20px !important}
#view .grid>.card.film>img{width:100%;height:auto;aspect-ratio:2/3}
@media(max-width:520px){#view .grid>.card.film{grid-template-columns:118px minmax(0,1fr) !important}}

/* Info film (judul, keterangan, status) */
#view .card.film{background:var(--film-card) !important}
#view .card.film>div>b{color:var(--film-ink) !important;text-shadow:none}
#view .card.film>div>small{color:var(--film-sub) !important}
:root[data-theme="glass"] #view .card.film{-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);border:1px solid rgba(255,255,255,.18) !important}

/* Bagian bawah film: hitung mundur tayang & hapus otomatis, tombol aksi */
#view .card.film .cdl{background:var(--cdl-bg) !important;border:1px solid var(--cdl-bd) !important;border-radius:var(--r-m,12px);color:var(--cdl-ink) !important}
#view .card.film .cdl>small{color:var(--cdl-lab) !important;font-weight:700;text-shadow:none}
#view .card.film .cd span{background:var(--cdl-cell) !important;color:var(--cdl-ink) !important;border:1px solid var(--cdl-bd)}
#view .card.film .cd span b{color:var(--cdl-ink) !important}
#view .card.film .cdx{color:var(--cdx-ink) !important;background:var(--cdx-bg) !important;border-radius:10px;padding:6px 10px;font-weight:700;font-size:13px}
#view .card.film .macts .btn.sec{color:var(--film-ink) !important}

/* ===== bagian: style-final-fix.css ===== */
/* STC XXI Technical Report - lapisan perbaikan terakhir (frontend saja).
   1. Iklan slide dashboard mengikuti tema (Gelap, Kaca, Terang), termasuk tombol dan titik navigasi.
   2. Poster ATS di slide dibuat besar dan jelas, mengisi kolom gambarnya.
   3. Tombol "Unggah TTD Pembuat" di Laporan Film tidak keluar dari kolom.
   4. Pilihan Download (Excel/PDF) sejajar dan rapi di semua kategori. */

/* ---------- 1. Iklan slide: navigasi dan titik mengikuti tema ---------- */
:root[data-theme] #app .dsl-s{background:var(--ad-bg) !important;border-color:var(--ad-bd) !important}
:root[data-theme] #app .dsl-b{
  background:rgba(6,12,9,.55) !important;border:1px solid rgba(237,203,122,.35) !important;color:#ffffff !important;
}
:root[data-theme] #app .dsl-b:hover,:root[data-theme] #app .dsl-b:focus-visible{background:rgba(6,12,9,.8) !important;border-color:var(--ad-gold) !important}
:root[data-theme="glass"] #app .dsl-b{background:rgba(12,9,6,.62) !important;border-color:rgba(246,221,152,.55) !important}
:root[data-theme="light"] #app .dsl-b{background:#fffdf6 !important;border:1px solid #c9a86a !important;color:#0b1c14 !important;box-shadow:0 2px 8px rgba(90,60,10,.15)}
:root[data-theme="light"] #app .dsl-b:hover,:root[data-theme="light"] #app .dsl-b:focus-visible{background:#f6edd7 !important;border-color:#7a5514 !important}
:root[data-theme="light"] #app .dsl-d button{background:rgba(11,28,20,.28) !important}
:root[data-theme="light"] #app .dsl-d button.on{background:#7a5514 !important}
:root[data-theme="glass"] #app .dsl-d button{background:rgba(255,255,255,.4) !important}
:root[data-theme="glass"] #app .dsl-d button.on{background:#f6dd98 !important}

/* ---------- 2. Poster ATS di slide: besar, jelas, mengisi kolom gambar ---------- */
html body #app .dsl-s.sc-c{
  display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:flex-start !important;
  gap:clamp(18px,2.6vw,36px) !important;min-height:0 !important;padding:clamp(20px,2.4vw,30px) clamp(22px,3vw,44px) !important;
}
html body #app .dsl-s.sc-c .dsl-im{
  position:relative !important;top:auto !important;right:auto !important;left:auto !important;bottom:auto !important;
  transform:none !important;order:2 !important;flex:0 0 auto !important;
  width:clamp(150px,16vw,210px) !important;height:auto !important;max-height:none !important;aspect-ratio:2/3 !important;
  object-fit:cover !important;border-radius:14px !important;border:1px solid var(--ad-bd) !important;
  box-shadow:0 22px 48px -18px rgba(0,0,0,.55) !important;margin:0 !important;
}
html body #app .dsl-s.sc-c .dsl-x{order:1 !important;flex:1 1 auto !important;min-width:0 !important;max-width:none !important;width:auto !important;position:relative;z-index:1}
html body #app .dsl-s.sc-c .dsl-x>b{font-size:clamp(22px,2.6vw,34px) !important;line-height:1.15 !important}
@media(max-width:560px){
  html body #app .dsl-s.sc-c{gap:14px !important;padding:16px 16px 40px !important}
  html body #app .dsl-s.sc-c .dsl-im{width:118px !important;border-radius:10px !important}
  html body #app .dsl-s.sc-c .dsl-x>b{font-size:18px !important}
}

/* ---------- 3. Filter Laporan Film: tombol TTD tidak keluar dari kolom ---------- */
.filmbar>label[for="frsigfile"]{
  display:flex !important;align-items:center !important;justify-content:center !important;text-align:center !important;
  white-space:normal !important;line-height:1.25 !important;min-width:0 !important;max-width:100% !important;
  width:100% !important;box-sizing:border-box !important;padding:10px 12px !important;min-height:44px !important;
  overflow:hidden !important;overflow-wrap:anywhere !important;
}

/* ---------- 4. Menu Download (Excel / PDF): sejajar dan rapi di semua kategori ---------- */
.dlw .dlm{
  box-sizing:border-box !important;min-width:240px !important;width:max-content !important;max-width:min(92vw,320px) !important;
  padding:6px !important;align-items:stretch !important;
}
.dlw .dlm button{
  display:flex !important;align-items:center !important;justify-content:flex-start !important;
  width:100% !important;box-sizing:border-box !important;margin:0 !important;align-self:stretch !important;
  text-align:left !important;white-space:nowrap !important;
}

/* ===== Perbaikan mode Kaca (v2): dashboard tidak pudar, input login tidak hitam, grafik terbaca, poster ATS seragam ===== */
/* 1. Kartu dan panel lebih padat di atas foto, latar foto sedikit lebih redup agar isi dashboard jelas */
:root[data-theme="glass"]{
  --card:rgba(14,11,8,.56);--card2:rgba(14,11,8,.44);
  --g50:rgba(255,255,255,.10);--g100:rgba(255,255,255,.16);
}
:root[data-theme="glass"] body:has(#app:not(.hidden))::before{filter:blur(10px) brightness(.58) saturate(1.05) !important}
:root[data-theme="glass"] #app .card,:root[data-theme="glass"] #app .dx-sec,:root[data-theme="glass"] #app .dx-k,
:root[data-theme="glass"] #app .dx-q,:root[data-theme="glass"] #app .tk,:root[data-theme="glass"] #app .dstu-card{
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
}

/* 2. Input login mode Kaca: kaca terang, bukan kotak hitam */
:root[data-theme="glass"] #login .lbox input{
  background:rgba(255,255,255,.16) !important;border:1px solid rgba(255,255,255,.38) !important;color:#ffffff !important;caret-color:#f6dd98;
}
:root[data-theme="glass"] #login .lbox input::placeholder{color:rgba(255,255,255,.72) !important;opacity:1}
:root[data-theme="glass"] #login .lbox input:-webkit-autofill{-webkit-text-fill-color:#ffffff !important;box-shadow:0 0 0 1000px rgba(40,34,26,.92) inset !important}

/* 3. Grafik statistik mode Kaca: panel gelap-kaca agar garis dan angka terbaca di atas foto */
:root[data-theme="glass"] .mch{
  background:rgba(10,8,6,.78) !important;border:1px solid rgba(246,221,152,.45) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
:root[data-theme="glass"] .mnote{color:rgba(255,255,255,.86) !important}

/* 4. Poster ATS di kartu dashboard: poster memanjang ke bawah di kolom kiri (seluruh tinggi kartu),
      judul, keterangan, tanggal, dan countdown tetap di kolom kanan */
.dx-col .tk{
  display:grid !important;grid-template-columns:150px minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;column-gap:0 !important;row-gap:0 !important;align-items:start !important;
}
.dx-col .tk{padding:0 !important;overflow:hidden}
.dx-col .tk .tk-poster{
  grid-column:1;grid-row:1 / span 2;width:100% !important;height:100% !important;min-height:100%;
  align-self:stretch !important;flex:none !important;object-fit:cover !important;
  border-radius:0 !important;margin:0 !important;box-shadow:none !important;border:0 !important;
}
.dx-col .tk .tl{padding:16px 18px 6px 0 !important}
.dx-col .tk .tr{padding:14px 16px 16px !important}
.dx-col .tk .tl{grid-column:2;grid-row:1;min-width:0}
.dx-col .tk .tr{
  grid-column:2;grid-row:2;width:auto !important;border-left:0 !important;border-top:2px dashed var(--gold-100);
  border-radius:0 0 var(--r-m) var(--r-m);flex-direction:column;justify-content:center;
}
@media(max-width:520px){
  .dx-col .tk{grid-template-columns:112px minmax(0,1fr) !important;column-gap:12px !important}
}
/* Di luar dashboard (halaman ATS), poster tetap berukuran seragam */
.tk .tk-poster{
  width:clamp(118px,13vw,150px) !important;height:auto !important;aspect-ratio:2/3 !important;
  flex:0 0 auto !important;object-fit:cover !important;border-radius:12px !important;
}

/* 5. Mode Kaca: satu warna kartu untuk dashboard dan kategori laporan (seirama), cukup gelap agar teks jelas */
:root[data-theme="glass"]{--card:rgba(10,8,6,.74);--card2:rgba(10,8,6,.74)}
:root[data-theme="glass"] #app .dx-sec,:root[data-theme="glass"] #app .card,:root[data-theme="glass"] #app .dx-k,
:root[data-theme="glass"] #app .dx-q,:root[data-theme="glass"] #app .tk,:root[data-theme="glass"] #app .dstu-card{
  background:rgba(10,8,6,.74) !important;
}
/* Poster ATS: menutupi border kartu di atas, bawah, dan kiri agar benar-benar penuh sampai tepi */
.dx-col .tk .tk-poster{margin:-1px 0 -1px -1px !important;width:calc(100% + 1px) !important;height:calc(100% + 2px) !important}
:root[data-theme="glass"]{--film-card:rgba(10,8,6,.74)}