:root{
  color-scheme:light;
  --desk:#e6dfcc;        /* lantai kantor krem */
  --desk-2:#ddd5bf;
  --cover:#3b3d52;       /* garis luar piksel */
  --stitch:#d9d1bb;
  --paper:#fdfbf6;
  --paper-2:#f4efe3;
  --line:#ddd6c4;
  --ink:#2e2f3c;
  --muted:#7d7a70;
  --title:#4a6a95;       /* biru monitor */
  --tab:#6d7d98;         /* sekat kubikel */
  --tab-2:#56657f;
  --wood:#c9a46a;        /* meja kayu */
  --wood-ink:#7a5a2c;
  --khaki:#b9a571;       /* seragam staf */
  --today:#a23040;       /* merah sasirangan */
  --kerja:#3f8a55; --kerja-bg:#e2f1e6;
  --santai:#4a78b0; --santai-bg:#e3ecf7;
  --galat:#c2412f; --galat-bg:#fbe4df;
  --f-dot:"DotGothic16", "MS Gothic", ui-monospace, monospace;
  --f-body:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0}
body{
  background-color:var(--desk);
  background-image:
    linear-gradient(45deg, var(--desk-2) 25%, transparent 25%, transparent 75%, var(--desk-2) 75%),
    linear-gradient(45deg, var(--desk-2) 25%, transparent 25%, transparent 75%, var(--desk-2) 75%);
  background-size:32px 32px; background-position:0 0,16px 16px;
  color:var(--ink); font-family:var(--f-body); font-size:13px;
  padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:20px 28px;
}
.wrap{max-width:1180px;margin:0 auto;display:grid;gap:12px}
.book{display:grid;grid-template-columns:minmax(0,1fr) 78px;align-items:start}
.cover{background:var(--cover);border-radius:18px;padding:10px;box-shadow:0 6px 0 rgba(46,47,60,.25)}
.stitchbox{border:2px dashed var(--stitch);border-radius:12px;padding:10px 12px 12px}
.topline{display:grid;grid-template-columns:270px 28px minmax(0,1fr);align-items:end;color:var(--stitch);margin:0 0 8px}
.counter{font-family:var(--f-dot);font-size:12px;letter-spacing:.04em;padding-left:6px}
.counter b{font-weight:400;color:#fff;font-variant-numeric:tabular-nums}
.counter b.today{color:#ff9d8f}
.counter .sep{opacity:.5;margin:0 6px}
.titlebar{grid-column:3;display:flex;justify-content:space-between;align-items:end;gap:10px;padding:0 6px;min-width:0}
.titlebar h1{font-family:var(--f-dot);font-weight:400;font-size:24px;color:#fff;margin:0;line-height:1.1;letter-spacing:.02em}
.titlebar .url{font-size:11px;color:var(--stitch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.spread{display:grid;grid-template-columns:270px 28px minmax(0,1fr);align-items:stretch}
.page{background:var(--paper);border-radius:10px;border:1px solid var(--line);min-width:0}
.page.left{padding:14px;display:flex;flex-direction:column;gap:12px}
.page.right{padding:14px 16px 16px}
.rings{position:relative}
.rings i{position:absolute;left:-6px;right:-6px;height:9px;border-radius:6px;background:linear-gradient(#f2f2f4,#b9bcc6 60%,#8e92a0);border:1px solid #6e7282}
.rings i:nth-child(1){top:90px}.rings i:nth-child(2){top:118px}
.rings i:nth-child(3){bottom:118px}.rings i:nth-child(4){bottom:90px}

/* Halaman kiri: profil */
.mood{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:4px;padding:5px 8px;background:#fff}
.mood .lbl{font-family:var(--f-dot);font-size:11px;color:var(--title);letter-spacing:.06em}
.mood #mood{font-weight:700;font-size:13px}
.mood .ic{width:10px;height:10px;border-radius:2px;display:inline-block}
.frame{border:1px solid var(--line);border-radius:6px;background:linear-gradient(var(--paper-2),#fff 70%);display:grid;place-items:center;padding:10px 0 6px;position:relative}
#av{width:96px;height:192px;image-rendering:pixelated}
.frame .floorline{position:absolute;left:18%;right:18%;bottom:10px;height:6px;border-radius:50%;background:rgba(46,47,60,.12)}
.prof{display:grid;gap:4px;text-align:center}
.prof h2{font-family:var(--f-dot);font-weight:400;font-size:22px;color:var(--title);margin:0;line-height:1}
.prof .code{color:var(--muted);font-size:12px}
.chip{font-size:11px;font-weight:700;padding:2px 7px;border-radius:3px;white-space:nowrap;display:inline-block;line-height:1.4}
.chip.bekerja{background:var(--kerja);color:#fff}
.chip.santai{background:var(--santai);color:#fff}
.chip.galat{background:var(--galat);color:#fff}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;margin:0;font-size:12px;text-align:left;border-top:1px dotted var(--line);padding-top:8px}
.kv dt{color:var(--muted)} .kv dd{margin:0;overflow-wrap:anywhere}
.kv dd.err{color:var(--galat)}
.links{display:flex;flex-wrap:wrap;gap:4px 12px;border-bottom:1px solid var(--line);padding-bottom:6px;align-items:center}
.links .cap{font-family:var(--f-dot);font-size:11px;color:var(--muted);letter-spacing:.04em;width:100%}
.lk{appearance:none;background:none;border:0;padding:2px 0;font:inherit;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer}
.lk::before{content:"▸";color:var(--title);margin-right:3px;font-size:10px}
.lk[aria-pressed="true"]{color:var(--title);text-decoration:underline;text-underline-offset:3px}
.lk:focus-visible,.tabx:focus-visible,.sub:focus-visible,.say li button:focus-visible,.card:focus-visible{outline:2px solid var(--title);outline-offset:2px;border-radius:3px}
.owner{margin-top:auto;display:grid;gap:2px}
.owner b{font-family:var(--f-dot);font-weight:400;font-size:15px}
.owner span{color:var(--wood-ink);font-size:12px}

/* Halaman kanan */
h3.sec{font-size:13px;font-weight:700;color:var(--title);margin:0 0 6px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.top2{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:18px;margin-bottom:14px}
.news{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.news li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px;align-items:baseline;font-size:13px}
.news .txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.news time{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.stats{display:grid;grid-template-columns:1fr 1fr;align-content:start}
.stats div{display:flex;justify-content:space-between;gap:6px;padding:5px 2px;border-bottom:1px dotted var(--line);font-size:13px}
.stats div:nth-child(odd){margin-right:10px}
.stats b{font-weight:600;font-variant-numeric:tabular-nums}
.stats .k{color:var(--kerja)} .stats .s{color:var(--santai)} .stats .g{color:var(--galat)} .stats .w{color:var(--wood-ink)}

.subs{display:flex;align-items:center;gap:4px;margin-bottom:6px;flex-wrap:wrap}
.sub{appearance:none;background:none;border:0;font:inherit;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer;padding:2px 2px}
.sub[aria-selected="true"]{color:var(--title)}
.subs .bar{color:var(--line)}
.sub small{font-weight:500;font-size:11px;color:var(--muted);margin-left:4px;font-variant-numeric:tabular-nums}
.sub .al{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:3px;background:var(--galat);color:#fff;font-family:var(--f-dot);font-size:11px;margin-left:4px;vertical-align:1px}
#view-beranda{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}
.roomcol{display:flex;flex-direction:column;min-width:0}
.infocol{display:flex;flex-direction:column;gap:14px;min-width:0}
.top2{margin-bottom:0}
.room{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#2b2a35}
.viewport{position:relative}
canvas#cv{display:block;width:100%;height:100%;image-rendering:pixelated;cursor:pointer;touch-action:manipulation}
.tags{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tag{position:absolute;transform:translate(-50%,-100%);font-family:var(--f-dot);font-size:11px;line-height:1;color:#fff;background:rgba(46,47,60,.82);padding:2px 4px 3px;border-radius:3px;white-space:nowrap}
.tag.sel{background:var(--wood);color:#2b2010}
.tag .dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:3px;vertical-align:1px}
.bang{position:absolute;transform:translate(-50%,-100%);width:16px;height:18px;background:#d8402c;color:#fff;font-family:var(--f-dot);font-size:14px;display:grid;place-items:center;border:2px solid #fff;border-radius:4px;box-shadow:0 2px 0 rgba(0,0,0,.35);animation:hop .9s steps(2) infinite}
@keyframes hop{50%{margin-top:-3px}}
@media (prefers-reduced-motion:reduce){.bang{animation:none}}
.roombar{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--paper-2);border:1px solid var(--line);border-top:0;padding:4px 8px;flex-wrap:wrap}
.roombar .gray{font-size:11px;background:#a9a69c;color:#fff;border-radius:3px;padding:1px 6px}
.say ul{list-style:none;margin:0;padding:0}
.say li button{appearance:none;background:none;border:0;border-bottom:1px dashed var(--line);font:inherit;color:inherit;text-align:left;width:100%;padding:6px 2px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start;cursor:pointer}
.say li button:hover{background:var(--paper-2)}
.say li button[aria-current="true"]{background:#f3ead2}
.say canvas{width:16px;height:32px;image-rendering:pixelated}
.say .q{font-size:13px;line-height:1.35}
.say .q::before{content:"– "}
.say .by{display:block;color:var(--muted);font-size:11px;margin-top:1px}
.say .by b{color:var(--title);font-weight:600}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.card{appearance:none;font:inherit;color:inherit;text-align:left;border:1px solid var(--line);background:#fff;border-radius:6px;padding:10px;display:grid;grid-template-columns:32px minmax(0,1fr);gap:4px 10px;cursor:pointer}
.card[aria-current="true"]{border-color:var(--wood);background:#fbf4e2}
.card canvas{grid-row:span 3;width:32px;height:64px;image-rendering:pixelated}
.card .nm{font-family:var(--f-dot);font-size:16px;color:var(--title)}
.card .rl{font-size:11px;color:var(--muted)}
.card .loc{grid-column:1/-1;font-size:11px;color:var(--muted);border-top:1px dotted var(--line);padding-top:4px;margin-top:2px}
.loglist{list-style:none;margin:0;padding:0;display:grid}
.loglist li{display:grid;grid-template-columns:44px auto minmax(0,1fr);gap:8px;align-items:baseline;padding:6px 0;border-bottom:1px dotted var(--line)}
.loglist time{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.note{color:var(--muted);font-size:12px;margin:10px 0 0}

/* Tab indeks kanan */
.index{display:flex;flex-direction:column;gap:3px;padding-top:92px;margin-left:-6px}
.tabx{appearance:none;font:inherit;font-family:var(--f-dot);font-size:14px;border:0;background:var(--tab);color:#fff;padding:9px 8px 9px 12px;border-radius:0 8px 8px 0;cursor:pointer;text-align:center;box-shadow:inset 3px 0 0 rgba(0,0,0,.12)}
.tabx:hover{background:var(--tab-2)}
.tabx[aria-selected="true"]{background:var(--paper);color:var(--ink);box-shadow:none;border:1px solid var(--line);border-left:0}
.credit{color:var(--wood-ink);font-size:11px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:0 4px}
.credit a{color:inherit}


/* ---------- Desktop 16:9: buku pas satu layar, tanpa gulir halaman ---------- */
@media (min-width:1000px) and (min-height:600px){
  html,body{height:100%}
  body{padding-block:14px;box-sizing:border-box}
  .wrap{height:100%;max-width:1560px;grid-template-rows:minmax(0,1fr) auto;gap:8px}
  .book{height:100%;min-height:0;grid-template-rows:minmax(0,1fr)}
  .cover{height:100%;box-sizing:border-box;display:flex;min-height:0}
  .stitchbox{flex:1;display:flex;flex-direction:column;min-height:0}
  .spread{flex:1;min-height:0}
  .page{min-height:0}
  .page.left{overflow:auto}
  .page.right{display:flex;flex-direction:column;overflow:hidden}
  #view-beranda{flex:1;min-height:0;grid-template-rows:minmax(0,1fr);align-items:stretch}
  .roomcol{min-height:0}
  .infocol{min-height:0}
  .top2{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(3,1fr)}
  .stats div:nth-child(odd){margin-right:0}.stats div{margin-right:10px}
  .say{flex:1;min-height:0;display:flex;flex-direction:column}
  .say ul{overflow:auto;min-height:0;flex:1;padding-right:4px}
  #view-staf,#view-kabar{flex:1;min-height:0;overflow:auto}
}
@media (min-width:1400px) and (min-height:600px){
  .top2{grid-template-columns:minmax(0,1fr) 250px}
  .stats{grid-template-columns:1fr}
  .stats div{margin-right:0}
}

/* ---------- Ponsel ---------- */
@media (max-width:860px){
  .topline,.spread{grid-template-columns:230px 24px minmax(0,1fr)}
  .top2{grid-template-columns:1fr}
  #view-beranda{grid-template-columns:1fr}
}
@media (max-width:680px){
  body{padding-block:10px 20px}
  .book{grid-template-columns:1fr}
  .index{order:-1;flex-direction:row;padding:0 12px;margin:0 0 -4px;gap:3px;overflow-x:auto;scrollbar-width:none}
  .tabx{border-radius:8px 8px 0 0;padding:7px 14px 10px;flex:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
  .tabx[aria-selected="true"]{border:1px solid var(--line);border-bottom:0;background:var(--cover);color:#fff}
  .cover{border-radius:14px;padding:6px}
  .stitchbox{padding:8px;border-radius:10px}
  .topline{grid-template-columns:1fr;gap:4px;margin-bottom:6px}
  .titlebar{grid-column:1;padding:0 2px;order:-1}
  .titlebar h1{font-size:20px}
  .counter{padding-left:2px}
  .spread{grid-template-columns:1fr}
  .rings{height:20px;display:flex;justify-content:space-around;align-items:center;padding:0 22px}
  .rings i{position:static;width:9px;height:26px;margin:-3px 0}
  .page.left{display:grid;grid-template-columns:84px minmax(0,1fr);gap:8px 12px;padding:10px;border-radius:8px;background:var(--paper-2)}
  .rings{display:none}
  .subs .bar{display:none}
  .subs{gap:2px 14px}
  .page.right{border-radius:10px}
  .mood{grid-column:1/-1}
  .frame{grid-row:span 2;align-self:start;padding:6px 0 4px}
  #av{width:64px;height:128px}
  .prof{text-align:left;align-content:start}
  .prof h2{font-size:20px}
  .kv{grid-column:1/-1}
  .links{grid-column:1/-1}
  .owner{grid-column:1/-1}
  .page.right{padding:10px}
  .stats{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Status langsung dari bot (Fase 16a) ---------- */
.chip.menunggu{background:var(--wood);color:#2b2010}
.chip.selesai{background:var(--kerja-bg);color:var(--kerja);box-shadow:inset 0 0 0 1px var(--kerja)}
.stats .m{color:var(--wood-ink)}
/* Balon kata (Fase 16c): HTML di atas kanvas, tajam di semua skala; teks dari config/kantor-balon.json lewat server. */
.bub{position:absolute;transform:translate(-50%,-100%);width:max-content;max-width:236px;min-height:18px;padding:3px 6px 4px;box-sizing:border-box;color:#fff;font-family:var(--f-dot);font-size:11px;line-height:1.25;display:flex;align-items:center;gap:5px;border:2px solid #fff;border-radius:4px;box-shadow:0 2px 0 rgba(0,0,0,.35);text-align:left}
.bub .ik{flex:none;font-size:13px;line-height:1}
.bub .tx{white-space:pre-line}
.bub::after{content:"";position:absolute;left:var(--ex,50%);bottom:-7px;margin-left:-4px;width:0;height:0;border:4px solid transparent;border-top:5px solid #fff;border-bottom:0}
.bub.geser::after{display:none}
.bub.mini{min-height:0;width:18px;height:18px;padding:0;justify-content:center;max-width:none}
.bub.mini::after{display:none}
.bub.k-dipanggil{background:var(--santai)}
.bub.k-mulai{background:var(--kerja)}
.bub.k-menunggu{background:#d49a1f;color:#2b2010}
.bub.k-selesai{background:var(--kerja)}
.bub.k-galat{background:#d8402c;animation:hop .9s steps(2) infinite}
@media (prefers-reduced-motion:reduce){.bub.k-galat{animation:none}}
.roombar .gray.putus{background:var(--galat)}
.luar{max-width:420px;margin:12vh auto 0;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:20px 22px;text-align:center;box-shadow:0 6px 0 rgba(46,47,60,.25)}
.luar h1{font-family:var(--f-dot);font-weight:400;font-size:22px;color:var(--title);margin:0 0 8px}
.luar p{margin:0;line-height:1.5}
.masuk-tombol{margin-top:16px;min-height:40px;display:flex;justify-content:center}
.credit .keluar{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}