/* Kulit komik untuk /app, /docs, /agents, /receipts — memetakan ulang token gelap ke kertas & tinta,
   lalu memberi panel bertinta + bayangan offset seperti halaman komik. Dimuat SETELAH app.css/pool.css/docs.css. */

body.comic.app, body.comic.doc {
  --g0: #efe7d6; --g1: #fbf7ee; --g2: #fffdf6; --g3: #ebe2cf; --g4: #ddd1b8; --g5: #bfb196;
  --g6: #8d836f; --g7: #5f574b; --g8: #3b342c; --g9: #17130f; --g10: #17130f;
  --bg: #efe7d6; --panel: #fbf7ee; --panel-2: #fffdf6;
  --line: rgba(23, 19, 15, 0.16); --line-2: rgba(23, 19, 15, 0.38);
  --text: #17130f; --muted: #5f574b; --faint: #8d836f;
  --accent: #1e3a2a; --accent-ink: #f4ead2; --accent-soft: rgba(232, 191, 62, 0.38);
  --ok: #2c5a3c; --warn: #b8860b; --bad: #a8262b;
  color-scheme: light;
  background: var(--g0); color: var(--ink);
}
body.comic.app ::selection, body.comic.doc ::selection { background: #dcb153; color: #17130f; }

/* bilah atas */
.comic .top, .comic .doc-top { background: #efe7d6; border-bottom: 3px solid #17130f; backdrop-filter: none; -webkit-backdrop-filter: none; }
.comic .brand { font-family: var(--f-title); font-weight: 400; letter-spacing: 0.04em; font-size: 20px; }
.comic .brand .nz { width: 34px; height: 34px; }
.comic .top-chain .dot { background: #2c5a3c; box-shadow: none; }
.comic .ca-chip { border: 2.5px dashed #17130f; background: #fbf7ee; color: #17130f; border-radius: 8px; }
.comic .ca-chip.live { border-style: solid; background: #dcb153; }

/* tombol */
.comic .btn { border: 3px solid #17130f; border-radius: 12px; font-family: var(--f-hand); font-weight: 800; box-shadow: 3px 3px 0 #17130f; transition: transform 0.15s, box-shadow 0.15s; }
.comic .btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #17130f; }
.comic .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #17130f; }
.comic .btn-primary { background: #dcb153; color: #17130f; }
.comic .btn-primary:hover { background: #e6bf63; }
.comic .btn-ghost { background: #fbf7ee; color: #17130f; border-color: #17130f; }
.comic .btn-accent { background: #1e3a2a; color: #f4ead2; }
.comic #walletBtn.on { background: #dcb153; }

/* rel bab */
.comic .rail { border-right: 3px solid #17130f; background: #efe7d6; }
.comic .rail > a { border: 2.5px solid transparent; }
.comic .rail > a span { font-family: var(--f-title); font-weight: 400; font-size: 16px; letter-spacing: 0.01em; }
.comic .rail > a b { font-family: var(--f-title); font-size: 13px; color: #a8262b; padding-top: 2px; }
.comic .rail > a em { font-family: var(--f-hand); font-size: 12.5px; }
.comic .rail > a:hover { background: #fbf7ee; border-color: #17130f; }
.comic .rail > a.on { background: #dcb153; border-color: #17130f; box-shadow: 4px 4px 0 #17130f; color: #17130f; }
.comic .rail > a.on b { color: #a8262b; }
.comic .rail-foot { border-top: 2.5px solid #17130f; font-family: var(--f-hand); font-weight: 700; }

/* kepala panel */
.comic .ph h1 { font-family: var(--f-title); font-weight: 400; letter-spacing: 0.005em; line-height: 1.12; }
.comic .ph h1 .dim { color: #8d836f; }
.comic .eyebrow { font-family: var(--f-hand); font-weight: 800; color: #a8262b; letter-spacing: 0.12em; }
.comic .nezi-says { display: flex; align-items: flex-end; gap: 12px; margin-top: 14px; max-width: 640px; }
.comic .nezi-says .nz { flex: 0 0 auto; width: 74px; height: 74px; }
.comic .nezi-says .bubble { font-size: 14.5px; }

/* blok = panel komik */
.comic .blk { background: #fbf7ee; border: 3.5px solid #17130f; border-radius: 4px; box-shadow: 6px 6px 0 #17130f; }
.comic .blk + .blk { margin-top: 20px; }
.comic .grid2, .comic .grid3 { gap: 20px; }
.comic .blk-h { border-bottom: 2.5px solid #17130f; background: #dcb153; }
.comic .blk-h h3 { font-family: var(--f-hand); font-weight: 800; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.comic .blk-h .src { color: #3b342c; font-family: var(--f-hand); }
.comic .dial { border-right: 3px solid #17130f; background: radial-gradient(rgba(23,19,15,.12) 1.1px, transparent 1.3px) 0 0 / 9px 9px; }
.comic .dial circle:first-child { stroke: #ddd1b8; }
.comic .v-tag { border: 2.5px solid #17130f; font-family: var(--f-hand); font-weight: 800; }
.comic .v-tag.open { background: #a8262b; color: #fff; }
.comic .v-tag.traceable { background: #dcb153; color: #17130f; }
.comic .v-tag.quiet { background: #2c5a3c; color: #fff; }
.comic .v-body h2 { font-family: var(--f-title); font-weight: 400; }
.comic .reasons li { border-bottom: 2px dashed rgba(23,19,15,.25); }
.comic .reasons .pts { font-family: var(--f-title); font-size: 15px; color: #a8262b; }
.comic .reasons .pts.neg { color: #2c5a3c; }
.comic .reasons .fix { color: #1e3a2a; font-family: var(--f-hand); font-weight: 700; }
.comic .node { background: #fffdf6; border: 2.5px solid #17130f; box-shadow: 3px 3px 0 #17130f; }
.comic .node.you { background: #dcb153; border-color: #17130f; }
.comic .link::before { height: 3px; background: #17130f; }
.comic .link span { background: #fbf7ee; font-family: var(--f-hand); font-weight: 700; color: #17130f; }
.comic .hours i { border: 1.5px solid #17130f; }
.comic .hours i.peak { outline: 3px solid #a8262b; }
.comic .rcpt { border: 2px solid #17130f; background: #fffdf6; }
.comic .rcpt b { color: #a8262b; }
.comic .err { color: #8a2414; border: 2.5px solid #a8262b; background: #fbe3d9; }
.comic .table td, .comic .table th { border-bottom-color: rgba(23,19,15,.18); }

/* masukan */
.comic .cmd, .comic .field { background: #fffdf6; border: 3px solid #17130f; box-shadow: 4px 4px 0 #17130f; }
.comic .cmd:focus-within { border-color: #17130f; background: #fffbe6; }
.comic .cmd .k { font-family: var(--f-hand); font-weight: 800; color: #a8262b; }
.comic .quick button, .comic .suggest button { border: 2.5px solid #17130f; background: #fbf7ee; color: #17130f; font-family: var(--f-hand); font-weight: 700; }
.comic .quick button:hover, .comic .suggest button:hover { background: #dcb153; }
.comic .sel, .comic .inp { background: #fffdf6; border: 2.5px solid #17130f; }
.comic .spin { border-color: #ddd1b8; border-top-color: #a8262b; }

/* desk */
.comic .price th { color: #3b342c; font-family: var(--f-hand); }
.comic .price td, .comic .price th { border-bottom: 2px dashed rgba(23,19,15,.22); }
.comic .price .p { font-family: var(--f-title); font-size: 14px; }
.comic .flow { border: 3px solid #17130f; border-radius: 4px; }
.comic .flow > div { border-right: 2.5px solid #17130f; }
.comic .flow > div b { font-family: var(--f-title); font-size: 14px; color: #8d836f; }
.comic .flow > div.on { background: #dcb153; color: #17130f; }
.comic .flow > div.done b { color: #2c5a3c; }
.comic pre.code { background: #fbf3df; border: 3px solid #17130f; color: #17130f; }
.comic pre.code .c { color: #8d836f; }
.comic .tabs { border: 2.5px solid #17130f; background: #fbf7ee; }
.comic .tabs button.on { background: #17130f; color: #dcb153; }
.comic .pill { background: #fbf7ee; border: 2px solid #17130f; color: #17130f; font-family: var(--f-hand); font-weight: 700; }
.comic .pill.live .dot { background: #2c5a3c; box-shadow: none; }

/* ask */
.comic .msg.me { background: #fff7d6; border: 3px solid #17130f; box-shadow: 3px 3px 0 #17130f; font-family: var(--f-hand); font-weight: 600; }
.comic .msg.nz .av { background: none; width: 44px; height: 44px; }
.comic .msg.nz { grid-template-columns: 44px minmax(0, 1fr); }
.comic .msg.nz .txt { background: #fff; border: 3px solid #17130f; border-radius: 20px; padding: 12px 16px; font-family: var(--f-hand); font-weight: 500; box-shadow: 3px 3px 0 rgba(23,19,15,.18); }
.comic .msg.nz .txt .ref { background: #dcb153; color: #17130f; border: 1.5px solid #17130f; }
.comic .composer { border-top: 3px solid #17130f; }
.comic .composer textarea { background: #fffdf6; border: 3px solid #17130f; font-family: var(--f-hand); }
.comic .meter i { background: #ddd1b8; border: 1.5px solid #17130f; height: 8px; }
.comic .meter i::after { background: #2c5a3c; }

/* dialog dompet */
.comic .sheet { background: #fbf7ee; border: 4px solid #17130f; border-radius: 6px; box-shadow: 8px 8px 0 #17130f; color: #17130f; }
.comic .sheet-body button { background: #fffdf6; border: 2.5px solid #17130f; }
.comic .sheet-body button:hover { background: #dcb153; }

/* toast */
.comic .toast { background: #fbf7ee; color: #17130f; border: 3px solid #17130f; box-shadow: 4px 4px 0 #17130f; font-family: var(--f-hand); font-weight: 700; }

/* dokumen */
.comic .prose h1 { font-family: var(--f-title); font-weight: 400; letter-spacing: 0.005em; line-height: 1.1; }
.comic .prose h1 .dim { color: #8d836f; }
.comic .prose h2 { font-family: var(--f-title); font-weight: 400; letter-spacing: 0.005em; }
.comic .prose h2 small { font-family: var(--f-title); font-size: 13px; color: #a8262b; }
.comic .prose p, .comic .prose li { color: #2a241e; }
.comic .prose code { background: #fbf3df; border: 1.5px solid rgba(23,19,15,.35); color: #17130f; }
.comic .prose pre { background: #fbf3df; border: 3px solid #17130f; box-shadow: 5px 5px 0 #17130f; color: #17130f; }
.comic .prose table { background: #fbf7ee; border: 3px solid #17130f; }
.comic .prose th { color: #3b342c; border-bottom: 2.5px solid #17130f; font-family: var(--f-hand); }
.comic .prose td { border-bottom: 1.5px dashed rgba(23,19,15,.25); color: #2a241e; }
.comic .prose td:first-child { color: #17130f; font-weight: 600; }
.comic .prose .note { border-left: 5px solid #a8262b; background: #fbf3df; padding: 10px 14px; }
.comic .prose .live { color: #1e3a2a; font-weight: 600; }
.comic .toc a:hover { background: #dcb153; color: #17130f; }
.comic .toc b { font-family: var(--f-hand); color: #a8262b; }
.comic .doc-foot { background: #17130f; color: #e9dfc8; border-top: 0; font-family: var(--f-hand); }

/* panel kolam & burner (pool.css) */
.comic .pz-card, .comic [class*="pz-panel"], .comic .pz-box { background: #fbf7ee !important; border: 3px solid #17130f !important; box-shadow: 5px 5px 0 #17130f; border-radius: 4px !important; }

@media (max-width: 900px) {
  .comic .rail { border-right: 0; border-bottom: 3px solid #17130f; background: #efe7d6; }
  .comic .rail > a.on { box-shadow: 3px 3px 0 #17130f; }
  .comic .dial { border-right: 0; border-bottom: 3px solid #17130f; }
}

/* ── Pool & Burner (kelas pz-/bz-) ──────────────────────── */
.comic .pz-title, .comic .bz .pz-title { font-family: var(--f-title); font-weight: 400; letter-spacing: 0.005em; }
.comic .pz-bar { border-bottom: 3px solid #17130f; }
.comic .pz-tab { font-family: var(--f-hand); font-weight: 800; color: #5f574b; border-bottom-width: 4px; }
.comic .pz-tab[aria-selected='true'] { color: #17130f; border-bottom-color: #a8262b; }
.comic .pz-seg { background: #fbf7ee; border: 2.5px solid #17130f; }
.comic .pz-seg-btn { font-family: var(--f-hand); font-weight: 800; color: #5f574b; }
.comic .pz-seg-btn[aria-selected='true'] { background: #17130f; color: #dcb153; }
.comic .pz-card, .comic .bz-step, .comic .bz-status, .comic .bz-lines, .comic .pz-crowd, .comic .pz-account, .comic .pz-public { background: #fbf7ee !important; border: 3px solid #17130f !important; border-radius: 4px !important; box-shadow: 5px 5px 0 #17130f; }
.comic .pz-chip { background: #fffdf6; border: 2.5px solid #17130f; color: #17130f; }
.comic .pz-chip:hover { background: #dcb153; }
.comic .pz-field, .comic .bz-keybox, .comic .bz-select { background: #fffdf6; border: 2.5px solid #17130f; }
.comic .pz-sizebar::after { background: #2c5a3c; }
.comic .pz-warn, .comic .bz-danger { background: #fbe3d9; border: 2.5px solid #a8262b; color: #8a2414; }
.comic .bz-n { background: #dcb153; border: 2.5px solid #17130f; color: #17130f; font-family: var(--f-title); }
.comic .pz-sheet { background: rgba(23, 19, 15, 0.55); backdrop-filter: none; -webkit-backdrop-filter: none; }
.comic .pz-sheet-card { background: #fbf7ee; border: 4px solid #17130f; border-radius: 6px; box-shadow: 8px 8px 0 #17130f; }
.comic .pz-sheet-card h3 { font-family: var(--f-title); font-weight: 400; }

/* avatar Nezi (gambar) di kepala panel & obrolan */
.comic .nz-av { flex: 0 0 auto; width: 74px; height: 74px; border-radius: 50%; border: 3px solid #17130f; box-shadow: 3px 3px 0 #17130f; object-fit: cover; background: #1e3a2a; }
.comic .msg.nz .av { background: url(/art/nezi-face.jpg) center / cover; border-radius: 50%; border: 2.5px solid #17130f; }
.comic .brand .nz-logo { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid #17130f; object-fit: contain; background: #f3e7cf; padding: 3px; }