/* KJG Monitor — TV 55" (16:9). Ukuran memakai vw/vh agar sama di TV 1080p maupun 4K. */
:root{
  --bg:#0c0c0b; --surface:#1a1a19; --surface-2:#232321; --line:#2f2f2c; --grid:#2a2a27;
  --text:#f0efec; --text-2:#c3c2b7; --mut:#8e8d86;
  --gold:#d4a64a; --gold-2:#f3d48a;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --crit:#d03b3b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:.78vw;background:var(--bg);color:var(--text);font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
@media (max-aspect-ratio:4/3){html{font-size:1.4vw}}
body{height:100vh;overflow:hidden;background:radial-gradient(ellipse at 20% -10%,rgba(212,166,74,.10),transparent 55%),var(--bg)}
#app{display:flex;flex-direction:column;height:100vh}
.mut{color:var(--mut)}
/* Header */
.hd{display:flex;align-items:center;gap:2rem;padding:.9rem 2rem .6rem;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:1rem;min-width:0;flex:1}
.brand img{height:3.4rem;width:auto}
.brand b{display:block;font-size:1.55rem;letter-spacing:.04em;color:var(--gold-2)}
.brand span{display:block;font-size:1.15rem;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dots{display:flex;gap:.6rem}
#dots i{display:block;height:.55rem;width:2.2rem;border-radius:.3rem;background:var(--line)}
#dots i.on{background:var(--gold)}
.clock{text-align:right}
.clock span{display:block;font-size:1.05rem;color:var(--text-2)}
.clock b{display:block;font-size:2.6rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
#prog{height:.25rem;background:transparent}
#prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-2))}
/* Stage & panel grid */
#stage{flex:1;min-height:0;padding:1rem 1.4rem;overflow:hidden;position:relative}
.screen{display:grid;gap:1rem;height:100%;grid-auto-rows:minmax(0,1fr);animation:fade .6s ease}
@keyframes fade{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
.n1{grid-template-columns:1fr}.n2{grid-template-columns:1fr 1fr}.n3{grid-template-columns:1.25fr 1fr 1fr}
.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.n5,.n6{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr}
.n7,.n8{grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr}
.n5 .p:first-child{grid-row:span 2}
.n3.lead{grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr}.n3.lead .p:first-child{grid-row:span 2}
.n4.lead{grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:1fr 1fr}.n4.lead .p:first-child{grid-row:span 2}.n4.lead .p:nth-child(2){grid-column:span 2}
.screen.all{grid-template-columns:repeat(3,1fr);grid-auto-rows:42vh;height:auto}
.scroller{height:100%;overflow:hidden}
.p{background:linear-gradient(180deg,var(--surface),#161615);border:1px solid var(--line);border-radius:1rem;padding:1rem 1.2rem;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.p h2{font-size:1.2rem;font-weight:600;color:var(--gold-2);letter-spacing:.03em;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.7rem}
.p h2 small{font-size:.95rem;font-weight:400;color:var(--mut)}
.pb{flex:1;min-height:0;display:flex;flex-direction:column;gap:.8rem;overflow:hidden}
.empty{color:var(--mut);font-size:1.1rem;padding:1rem 0}
/* Tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.7rem}
.tile{background:var(--surface-2);border-radius:.7rem;padding:.7rem .9rem;border:1px solid var(--line)}
.tile b{display:block;font-size:2.4rem;font-weight:650;line-height:1.05;font-variant-numeric:tabular-nums}
.tile span{display:block;font-size:.95rem;color:var(--text-2);margin-top:.15rem}
.tile em{display:block;font-style:normal;font-size:.9rem;color:var(--mut);margin-top:.2rem}
.tile b{white-space:nowrap}
.tile.big b{font-size:2.9rem}
.tile .st{margin-top:.35rem}
/* Status chip: ikon + label, warna tidak pernah sendirian */
.st{display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem;font-weight:600;padding:.12rem .55rem;border-radius:1rem;background:rgba(255,255,255,.06);color:var(--text)}
.st::before{font-size:.85rem}
.st.good::before{content:"●";color:var(--good)}.st.warn::before{content:"▲";color:var(--warn)}
.st.serious::before{content:"◆";color:var(--serious)}.st.crit::before{content:"■";color:var(--crit)}.st.info::before{content:"○";color:var(--s1)}
.delta{font-size:.95rem;font-weight:600}
/* Lists */
.list{list-style:none;display:flex;flex-direction:column;gap:.35rem;overflow:hidden}
.list li{display:flex;gap:.7rem;align-items:baseline;font-size:1.05rem;padding:.35rem .5rem;border-radius:.45rem;background:rgba(255,255,255,.025);white-space:nowrap;overflow:hidden}
.list li .t{flex:1;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.list li .r{color:var(--text-2);font-variant-numeric:tabular-nums}
.list li .tag{font-size:.82rem;color:var(--mut);border:1px solid var(--line);padding:0 .4rem;border-radius:.3rem}
.sub{font-size:.95rem;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;min-height:0;flex:1}
.cols>div{min-height:0;display:flex;flex-direction:column;gap:.5rem;overflow:hidden}
/* Charts */
.chart{flex:1;min-height:6rem;position:relative}
.chart svg{width:100%;height:100%;display:block;overflow:visible}
.chart .ax{fill:var(--mut);font-size:11px}
.chart .gl{stroke:var(--grid);stroke-width:1}
.legend{display:flex;gap:1.2rem;font-size:.95rem;color:var(--text-2);flex-wrap:wrap}
.legend i{display:inline-block;width:.9rem;height:.25rem;border-radius:.2rem;margin-right:.4rem;vertical-align:middle}
.hbar{display:grid;grid-template-columns:minmax(6rem,auto) 1fr auto;gap:.35rem .8rem;align-items:center;font-size:1rem}
.hbar .lb{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:11rem}
.hbar .tr{height:1.1rem;display:flex;gap:2px;border-radius:.25rem;overflow:hidden;background:rgba(255,255,255,.04)}
.hbar .tr i{display:block;height:100%}
.hbar .tr i:last-child{border-radius:0 .25rem .25rem 0}
.hbar .vl{font-variant-numeric:tabular-nums;color:var(--text);text-align:right;white-space:nowrap}
/* Agenda */
.day{display:flex;flex-direction:column;gap:.35rem}
.day h3{font-size:1rem;color:var(--text-2);font-weight:600}
.ev{display:flex;gap:.8rem;align-items:center;font-size:1.05rem;padding:.4rem .6rem;border-radius:.45rem;background:var(--surface-2);border-left:.3rem solid var(--s1)}
.ev .jm{font-variant-numeric:tabular-nums;color:var(--gold-2);min-width:7.5rem}
.ev .tt{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ev .tp{color:var(--mut);font-size:.9rem;white-space:nowrap}
.ev.c-merah{border-left-color:var(--crit)}.ev.c-hijau{border-left-color:var(--s3)}.ev.c-kuning{border-left-color:var(--s4)}.ev.c-ungu{border-left-color:#9085e9}.ev.c-abu{border-left-color:var(--mut)}
/* Sosmed */
.sos{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(24rem,1fr));flex:1;min-height:0}
.sent{background:var(--surface-2);border-radius:.8rem;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.6rem;overflow:hidden;border:1px solid var(--line)}
.sent .hdx{display:flex;align-items:center;gap:1rem}
.score{font-size:3rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.score small{font-size:1rem;color:var(--mut);font-weight:400}
.acc{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;font-size:.95rem}
.acc div{background:rgba(0,0,0,.25);border-radius:.4rem;padding:.35rem .5rem}
.acc b{display:block;font-size:1.35rem;font-variant-numeric:tabular-nums}
.acc span{color:var(--mut)}
.reko{font-size:1rem;color:var(--text-2);list-style:none}
.reko li{padding:.15rem 0}
.reko li::before{content:"→ ";color:var(--gold)}
/* Table */
table.tb{width:100%;border-collapse:collapse;font-size:1rem}
table.tb th{text-align:left;color:var(--mut);font-weight:500;font-size:.9rem;border-bottom:1px solid var(--line);padding:.25rem .4rem}
table.tb td{padding:.32rem .4rem;border-bottom:1px solid rgba(255,255,255,.04);white-space:nowrap}
table.tb td.n{text-align:right;font-variant-numeric:tabular-nums}
/* Footer ticker */
.ft{display:flex;align-items:center;gap:1.2rem;height:3.4rem;border-top:1px solid var(--line);padding:0 1.4rem;background:rgba(0,0,0,.35)}
.upd{font-size:.95rem;color:var(--mut);white-space:nowrap}
.tk{flex:1;overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
#ticker{display:inline-block;padding-left:100%;animation:tick linear infinite;font-size:1.2rem}
#ticker .st{margin-right:2.5rem;background:transparent;font-weight:500}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-100%)}}
/* Pairing */
#pair{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg)}
#pair[hidden]{display:none}
.pbox{text-align:center;max-width:60rem;padding:3rem}
.plogo{height:6rem;margin-bottom:1.5rem}
.pbox h1{font-size:3rem;color:var(--gold-2);margin-bottom:1rem}
.pbox p{font-size:1.4rem;color:var(--text-2)}
#pkode{font-size:7rem;font-weight:700;letter-spacing:.6rem;margin:1.5rem 0;font-variant-numeric:tabular-nums;color:var(--text)}
#pqr{display:inline-block;background:#fff;padding:1rem;border-radius:1rem;margin-bottom:1rem}
#pqr svg{width:16rem;height:16rem;display:block}
@media (prefers-reduced-motion:reduce){.screen{animation:none}#ticker{animation:none;padding-left:0}}

/* ---------- Mode ringkas (1 layar, TV besar) ---------- */
.grid{display:grid;gap:.9rem;height:100%;animation:fade .5s ease}
.cd{--g:var(--s1);position:relative;background:linear-gradient(180deg,var(--surface),#151514);border:1px solid var(--line);border-top:.35rem solid var(--g);border-radius:1rem;padding:.8rem 1.1rem .9rem;min-height:0;min-width:0;display:flex;flex-direction:column;gap:.45rem;overflow:hidden;cursor:pointer;outline:none;transition:transform .15s,box-shadow .15s}
.cd:hover,.cd:focus{transform:translateY(-.15rem);box-shadow:0 0 0 .2rem var(--g),0 .8rem 2rem rgba(0,0,0,.5)}
.g-sdm{--g:#3987e5}.g-dopa{--g:#d95926}.g-tqm{--g:#199e70}.g-sos{--g:#c98500}.g-ai{--g:#9085e9}
.cd header{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.cd header span{font-size:1.3rem;font-weight:650;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd header em{font-style:normal;font-size:.85rem;font-weight:700;letter-spacing:.08em;color:var(--g);white-space:nowrap}
.cbody{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:1.1rem;align-items:stretch}
.cl{display:flex;flex-direction:column;gap:.45rem;min-width:0;justify-content:center}
.cr{min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center}
.hl{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.hl .bg{font-size:3.5rem;font-weight:750;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.02em}
.hl .bg small{font-size:1.5rem;color:var(--mut);font-weight:500}
.hl span{font-size:1.1rem;color:var(--text-2);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd .st{font-size:1.1rem;padding:.15rem .7rem}
.kv{display:flex;gap:1.2rem;flex-wrap:nowrap}
.kv.col{flex-direction:column;gap:.55rem}
.kv.col span{flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;gap:.6rem;font-size:1.1rem}
.kv span{font-size:1rem;color:var(--mut);display:flex;flex-direction:column;line-height:1.15}
.kv b{font-size:1.55rem;color:var(--text);font-variant-numeric:tabular-nums}
.kv .k-crit b{color:#ff8a8a}.kv .k-warn b{color:var(--warn)}.kv .k-good b{color:#6bd46b}
.cb{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.cb .chart{flex:1;min-height:3rem;max-height:9rem}
.mb{display:grid;grid-template-columns:auto 1fr auto;gap:.3rem .7rem;align-items:center;font-size:1.05rem}
.mb .lb{color:var(--text-2);white-space:nowrap;max-width:7.5rem;overflow:hidden;text-overflow:ellipsis}
.mb .tr{height:.9rem;background:rgba(255,255,255,.05);border-radius:.25rem;overflow:hidden}
.mb .tr i{display:block;height:100%;border-radius:0 .25rem .25rem 0;min-width:2px}
.mb .vl{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.ml{list-style:none;font-size:1.1rem;color:var(--text-2);display:flex;flex-direction:column;gap:.2rem}
.ml li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml b{color:var(--gold-2);margin-right:.3rem}
/* detail */
#det{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:4vh 4vw;animation:fade .25s ease}
#det[hidden]{display:none}
.dbox{width:min(80vw,110rem);height:min(82vh,60rem);display:flex;flex-direction:column;gap:.5rem}
.dbox .p.big{flex:1;border-top:.4rem solid var(--g);box-shadow:0 2rem 5rem rgba(0,0,0,.6);font-size:1.15em}
.dbox .p.big h2{font-size:1.7rem}
.dhint{text-align:center;color:var(--mut);font-size:1rem}
#tip{position:fixed;z-index:60;pointer-events:none;background:#f0efec;color:#111;font-size:1.1rem;font-weight:600;padding:.4rem .7rem;border-radius:.5rem;box-shadow:0 .4rem 1.2rem rgba(0,0,0,.5);max-width:30rem}
#tip[hidden]{display:none}
.chart [data-tip]{cursor:crosshair}
.chart circle[data-tip]{transition:r .1s}.chart circle[data-tip]:hover{r:7}
.chart path[data-tip]:hover{filter:brightness(1.3)}
.kv b{white-space:nowrap}.kv span{min-width:0}
.cd .st{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cd .kv:not(.col) b{font-size:1.45rem}
/* kotak pendek (layar lebih pendek dari 16:9): sembunyikan angka kecil agar tidak terpotong */
.cd{container-type:size}
@container (max-height: 12.5rem){.cl .kv{display:none}.hl .bg{font-size:3rem}}
@container (max-height: 10rem){.cd .st{display:none}}

/* Quality Diagnostic (layar analisa penuh) */
.dbox.wide{width:96vw;height:92vh}
.dbox.wide .p.big{font-size:1em;padding:.8rem 1rem}
.dbox.wide .p.big h2{font-size:1.5rem;margin-bottom:.3rem}
.qk{grid-template-columns:repeat(6,1fr)}
.qk .tile{padding:.5rem .7rem}.qk .tile b{font-size:2rem}.qk .tile.big b{font-size:2.3rem}.qk .tile em{font-size:.85rem}
.qg{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:.7rem}
.qc{background:var(--surface-2);border:1px solid var(--line);border-radius:.7rem;padding:.55rem .8rem;display:flex;flex-direction:column;gap:.35rem;min-height:0;min-width:0;overflow:hidden}
.qc.w2{grid-column:span 2}
.qc h4{font-size:1rem;color:var(--gold-2);font-weight:600;display:flex;justify-content:space-between;gap:.5rem}
.qc h4 small{color:var(--mut);font-weight:400;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qc .chart{flex:1;min-height:5rem}
.qc .hbar{font-size:.9rem;gap:.25rem .6rem}.qc .hbar .tr{height:.85rem}.qc .hbar .lb{max-width:8rem}
.qc .tb{font-size:.88rem}.qc .tb td,.qc .tb th{padding:.15rem .3rem}
.qx{display:flex;flex-wrap:wrap;gap:.2rem .8rem;font-size:.85rem;color:var(--text-2)}.qx b{color:var(--text)}.qx em{font-style:normal;color:var(--mut)}
.qc .legend{font-size:.85rem}
.qn{font-size:.85rem;color:var(--text-2)}
.mkv{display:flex;gap:1rem;font-size:.95rem;color:var(--mut);margin-bottom:.2rem}.mkv span{display:flex;flex-direction:column;line-height:1.1}.mkv b{font-size:1.35rem;color:var(--text)}.mkv b.kc{color:#ff8a8a}.mkv b.kw{color:var(--warn)}

/* kalender agenda */
.cdx .cfull{flex:1;min-height:0;display:flex;flex-direction:column;gap:.5rem}
.kal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);grid-template-rows:auto;gap:.3rem;flex:1;min-height:0}
.kal .kh{background:#3a3a37;border-radius:.4rem;text-align:center;font-size:.85rem;padding:.15rem 0;color:var(--text)}
.kal .kh.mg{background:#c42b2b;color:#fff}
.kd{border:1px solid var(--line);border-radius:.5rem;padding:.2rem .35rem;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:.15rem;background:rgba(255,255,255,.015)}
.kd.lw{opacity:.55}.kd.now{border-color:var(--gold-2);box-shadow:0 0 0 1px var(--gold-2) inset;opacity:1}
.kn{font-weight:700;font-size:.95rem;line-height:1.1}.kn.mg{color:#ff7a7a}
.kch{font-size:.72rem;line-height:1.25;padding:.05rem .3rem;border-radius:.25rem;background:#25324a;border-left:.2rem solid #3987e5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kch em{font-style:normal;color:var(--gold-2)}
.kch.c-merah{border-left-color:#d03b3b;background:#3a2328}.kch.c-hijau{border-left-color:#199e70;background:#1f3530}.kch.c-kuning{border-left-color:#c98500;background:#3a3220}.kch.c-ungu{border-left-color:#9085e9;background:#2b2a45}.kch.c-abu{border-left-color:#888;background:#2c2c2a}
.km{font-size:.68rem;color:var(--mut)}
.kal.big{gap:.4rem;flex:none}.kal.big .kd{min-height:6.2rem}.kal.big .kn{font-size:1.1rem}.kal.big .kch{font-size:.85rem}.kal.big .kh{font-size:1rem;padding:.3rem 0}
.agl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1.2rem}
.agl.mini{flex:none;max-height:32%;overflow:hidden}.agl.mini .ev{font-size:.85rem;padding:.2rem .5rem}.agl.mini .day h3{font-size:.85rem}.agl.mini .ev .jm{min-width:5.5rem}.agl.mini .mut{font-size:.85rem}
.grid{grid-auto-flow:row dense}

/* ruang agen AI */
.hqh{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;font-size:.95rem;color:var(--mut)}
.hqs{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;letter-spacing:.06em;font-size:.8rem;padding:.2rem .6rem;border-radius:1rem;background:#1f3530;color:#6fd3a8}.hqs.off{background:#3a2328;color:#ff8a8a}
.hqk b{color:var(--text);font-size:1.15rem;margin-right:.2rem}.hqk.bad b{color:#ff8a8a}
.dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(111,211,168,.6)}100%{box-shadow:0 0 0 .6rem rgba(111,211,168,0)}}
.hqs.off .dot{animation:none}
.room{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.5rem;flex:1;min-height:0;align-content:stretch}
.room.big{grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.ag{position:relative;display:grid;grid-template-columns:auto 1fr;grid-auto-rows:auto;gap:.1rem .6rem;align-items:center;padding:.5rem .6rem;border-radius:.7rem;background:linear-gradient(135deg,#232233,#1a1a19);border:1px solid #2d2c3e;min-width:0;overflow:hidden}
.ag.on{border-color:#4a4780;box-shadow:inset 0 0 0 1px rgba(144,133,233,.25),0 0 14px rgba(144,133,233,.15)}
.ag.err{border-color:#7a2f2f;box-shadow:inset 0 0 0 1px rgba(208,59,59,.3),0 0 14px rgba(208,59,59,.15)}
.ag .av{position:relative;width:2.6rem;height:2.6rem;border-radius:50%;background:#2b2a45;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:1.3rem}
.ag .av .dot{position:absolute;right:-.05rem;bottom:-.05rem;width:.7rem;height:.7rem;background:#6fd3a8;border:2px solid #1a1a19;color:#6fd3a8}
.ag.err .av .dot{background:#ff8a8a;color:#ff8a8a}.ag:not(.on) .av .dot{background:#555;animation:none}
.ag .ai{min-width:0}.ag .ai b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1rem}.ag .ai em{font-style:normal;font-size:.75rem;color:#9085e9;text-transform:uppercase;letter-spacing:.05em}
.ag .an{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;font-size:.8rem;color:var(--mut)}.ag .an b{font-size:1.2rem;color:var(--text)}.ag .an.bad b{color:#ff8a8a}
.ag{grid-template-columns:auto 1fr auto auto auto}
.room.big{grid-template-columns:repeat(4,minmax(0,1fr));align-content:start}
.room.big .ag{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;padding:1rem .8rem}
.room.big .ag .av{width:4.2rem;height:4.2rem;font-size:2.2rem;margin-bottom:.2rem}.room.big .ag .av .dot{width:.95rem;height:.95rem;right:.1rem;bottom:.1rem}
.room.big .ag .ai b{font-size:1.25rem;white-space:normal}.room.big .ag .ai em{font-size:.8rem}
.room.big .ag .an{flex-direction:row;align-items:baseline;gap:.3rem;padding:.15rem .6rem;border-radius:1rem;background:rgba(255,255,255,.05)}.room.big .ag .an b{font-size:1.4rem}.room.big .ag .an span{font-size:.8rem}
.feed{display:flex;flex-direction:column;gap:.15rem;font-size:.85rem;color:var(--text-2);margin-top:.2rem}.feed span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feed em{font-style:normal;color:var(--gold-2)}.feed b{color:#9085e9}
.gg{display:flex;flex-direction:column;align-items:center;gap:.2rem;color:var(--mut);font-size:.9rem}.gg svg{width:62%;max-width:14rem}

/* sosmed */
.qg.sosg{grid-template-rows:repeat(3,minmax(0,1fr))}.qc.w3{grid-column:span 3}.plan{grid-template-columns:repeat(2,minmax(0,1fr))}
.hm{display:flex;flex-direction:column;gap:.15rem;margin-top:.3rem;flex:1;min-height:0}.hm>b{font-size:.8rem;color:var(--mut);font-weight:600}
.hmg{display:grid;gap:2px;align-items:stretch;flex:1;min-height:0;grid-auto-rows:minmax(0,1fr)}.hmg i{display:block;min-height:.9rem;font-style:normal;font-size:.65rem;color:var(--mut);line-height:.9rem;text-align:center}.hmg .hd{text-align:left}.hmg .hc{border-radius:2px}
.bul{list-style:disc;padding-left:1.2rem;font-size:.95rem;line-height:1.35;color:var(--text-2);display:flex;flex-direction:column;gap:.3rem}
.plan{list-style:none;counter-reset:p;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem .9rem}
.plan li{counter-increment:p;display:grid;grid-template-columns:auto 1fr;gap:.1rem .6rem;padding:.5rem .7rem;border-radius:.6rem;background:var(--surface-2);border-left:.3rem solid var(--gold-2);font-size:.95rem;line-height:1.3}
.plan li::before{content:counter(p);grid-row:span 2;align-self:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--gold-2);color:#1a1a19;font-weight:700;display:flex;align-items:center;justify-content:center}
.plan li b{color:var(--gold-2);font-size:.85rem}.plan li em{font-style:normal;color:#9085e9;font-size:.8rem;margin-left:.5rem}.plan li span{grid-column:2;color:var(--text)}
.tile .inl{display:inline;white-space:nowrap}.tile .inl span{display:inline}
.hmg i{min-height:.8rem;line-height:.8rem}
.hmg i{min-height:0;line-height:1}
/* ---- Jam Kerja KJG ---- */
.jkg{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr);gap:.8rem}
.jkl{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.jkf{display:flex;flex-direction:column;gap:.1rem;line-height:1.15}
.jkf>b{font-size:1.75rem;font-weight:800;letter-spacing:-.01em}
.jkf>span{font-size:1rem;color:var(--mut)}
.jkf>em{font-style:normal;font-size:.95rem;margin-top:.25rem;color:var(--text)}
.jkf>em b{color:var(--gold)}
.jkf>em small{color:var(--mut)}
.cdn{font-variant-numeric:tabular-nums;color:var(--gold);font-weight:700}
.jkc{display:flex;flex-wrap:wrap;gap:.35rem .5rem}
.jkc span{font-size:.8rem;color:var(--mut);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:.5rem;padding:.2rem .55rem;white-space:nowrap}
.jkc span b{color:var(--text);margin-right:.25rem}
.jkc span.ok b{color:var(--good)}.jkc span.wn b{color:#c98500}.jkc span.bd b{color:var(--serious)}
.ann{background:rgba(201,133,0,.08);border:1px solid rgba(201,133,0,.35);border-left:.3rem solid var(--gold);border-radius:.6rem;padding:.45rem .7rem;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.ann b{font-size:1rem}.ann small{color:var(--mut)}
.ann q{quotes:"“" "”";font-style:italic;color:var(--text);font-size:.95rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ann.mini{padding:.3rem .6rem}.ann.mini b{font-size:.9rem}.ann.mini q{-webkit-line-clamp:1;font-size:.85rem}
.ann.ls{border-left-color:var(--mut);background:rgba(255,255,255,.03);border-color:var(--line)}
.ann2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.5rem}
.ann2 .ann q{-webkit-line-clamp:3}
.annl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.25rem .8rem;overflow:hidden;flex:1;min-height:0}
.annl li{display:flex;flex-direction:column;gap:.05rem;padding:.3rem .5rem;border-radius:.4rem;border:1px solid transparent;min-width:0}
.annl li b{font-size:.9rem}.annl li span{font-size:.8rem;color:var(--mut);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.annl li.off{opacity:.55}.annl li.nx{border-color:rgba(201,133,0,.5);background:rgba(201,133,0,.06)}
.annl li .st{align-self:flex-start;font-size:.75rem;padding:.05rem .4rem}
.jks{display:flex;flex-direction:column}
.jkrt{min-width:0;min-height:0;display:flex;flex-direction:column}
.jkw{position:relative;display:flex;flex-direction:column;gap:.35rem;flex:1;min-height:0;justify-content:center}
.jkw.big{gap:.9rem;padding:.4rem 0 1.3rem}
.jkr,.jkh{display:grid;grid-template-columns:8.2rem 1fr;gap:.6rem;align-items:center}
.jkw.big .jkr,.jkw.big .jkh{grid-template-columns:11rem 1fr}
.jkn{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.jkn b{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.jkn small{font-size:.75rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.jkn small i{font-style:normal;font-weight:700}
.jkw.big .jkn b{font-size:1.2rem}.jkw.big .jkn small{font-size:.9rem}
.jkt{position:relative;height:1.1rem;background:rgba(255,255,255,.05);border-radius:.3rem}
.jkw.big .jkt{height:1.8rem;border-radius:.4rem}
.jkt.tk{background:none;height:1rem}
.jkt.tk i{position:absolute;top:0;transform:translateX(-50%);font-size:.7rem;color:var(--mut);font-style:normal}
.jkt .sg{position:absolute;top:0;bottom:0;border-radius:.25rem;opacity:.95}
.jkt .sg.past{opacity:.35}
.jkt em{position:absolute;top:100%;transform:translateX(-50%);font-style:normal;font-size:.72rem;color:var(--mut);white-space:nowrap;line-height:1.1;text-align:center;padding-top:.15rem}
.jkt em b{display:block;color:var(--text);font-size:.78rem}
.jkt em.past{opacity:.5}.jkt em.nx b{color:var(--gold)}
.jkt em::before{content:"";position:absolute;left:50%;top:-1.8rem;height:1.8rem;border-left:1px solid rgba(255,255,255,.35)}
.jkr.big{margin-bottom:2.9rem}
.jkt em.alt{padding-top:1.55rem}.jkt em.alt::before{top:-1.8rem;height:3.2rem}
.tvl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem;overflow:hidden}
.tvl li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.5rem;align-items:center;padding:.3rem .5rem;border:1px solid var(--line);border-radius:.5rem}
.tvl li .dot{grid-row:span 2;width:.7rem;height:.7rem;border-radius:50%;background:var(--mut)}
.tvl li.on .dot{background:var(--good);box-shadow:0 0 .6rem var(--good);animation:pulse 2s infinite}
.tvl li.dead .dot{background:var(--serious)}.tvl li.off{opacity:.55}
.tvl li b{font-size:.95rem}.tvl li span{font-size:.78rem;color:var(--mut);grid-column:2}.tvl li em{font-style:normal;font-size:.8rem;grid-column:2;color:var(--text)}
.tvl li.dead em{color:var(--serious)}
.shl{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}
.shl div{display:flex;flex-direction:column;align-items:center;padding:.4rem .2rem;border:1px solid var(--line);border-radius:.5rem;line-height:1.1}
.shl div b{font-size:.75rem;letter-spacing:.05em;color:var(--mut)}.shl div span{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}
.shl div.past{opacity:.45}.shl div.nx{border-color:var(--gold);background:rgba(201,133,0,.08)}.shl div.nx span{color:var(--gold)}
.shl div.now{border-color:var(--good);background:rgba(25,158,112,.1)}
.sm{font-size:.85rem;margin:.4rem 0 0}
.legend.inl{display:inline-flex;margin-left:.4rem;vertical-align:middle}
.qg.jkq{grid-auto-flow:row dense}
.jkt .nw{position:absolute;top:-.15rem;bottom:-.15rem;border-left:2px solid var(--gold);z-index:3;pointer-events:none}
.jkt.tk .nwl{color:#111;background:var(--gold);font-weight:700;border-radius:.25rem;padding:0 .3rem;z-index:3}
/* ---- Mode tata letak (drag & resize) ---- */
.edt{display:flex;gap:.4rem;align-items:center}
.edt button{font:inherit;font-size:.85rem;font-weight:600;color:var(--mut);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:.5rem;padding:.3rem .7rem;cursor:pointer}
.edt button:hover{color:var(--text);border-color:var(--gold)}
.edt button.on{color:#111;background:var(--gold);border-color:var(--gold)}
body.editing .cd{cursor:grab;outline:2px dashed rgba(201,133,0,.55);outline-offset:-2px}
body.editing .cd:hover{transform:none;box-shadow:0 0 0 .2rem var(--gold)}
.cd .rz{position:absolute;right:.15rem;bottom:.15rem;width:1.4rem;height:1.4rem;cursor:nwse-resize;z-index:5;border-right:.3rem solid var(--gold);border-bottom:.3rem solid var(--gold);border-radius:0 0 .4rem 0;opacity:.85}
.cd .mv{position:absolute;right:.6rem;top:.45rem;font-style:normal;font-size:1.1rem;color:var(--gold);z-index:5;cursor:grab;line-height:1}
.cd.src{opacity:.25}
.cd.rzing{box-shadow:0 0 0 .25rem var(--gold)!important}
.cd.over-l{box-shadow:-.5rem 0 0 0 var(--gold)!important}
.cd.over-r{box-shadow:.5rem 0 0 0 var(--gold)!important}
.cd.ghost{position:fixed;z-index:50;pointer-events:none;opacity:.85;transform:scale(.98);box-shadow:0 1.5rem 4rem rgba(0,0,0,.7);margin:0}
#toast{position:fixed;left:50%;bottom:4.2rem;transform:translateX(-50%);background:var(--gold);color:#111;font-weight:700;padding:.5rem 1rem;border-radius:.6rem;z-index:60;box-shadow:0 .5rem 2rem rgba(0,0,0,.5)}