/* ═══════════ NEORP · halaman demo untuk tim penjualan ═══════════
   Memakai ulang app.css: panel modulnya berkas yang sama persis dengan
   yang ada di landing. Di sini cuma cangkangnya yang diganti jadi
   aplikasi layar penuh, bukan section pemasaran. */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
/* Kanvas app memakai --bg, bukan --soft. Di kertas hangat, --soft lebih
   gelap satu tingkat sehingga --dim jatuh ke 4,38:1 dan aksen ke 4,21:1,
   dua-duanya di bawah ambang WCAG AA. Panel putih tetap memberi lapisan. */
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--body);
  display:flex;flex-direction:column;overflow:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ── bilah atas ── */
.dm-top{display:flex;align-items:center;gap:16px;padding:0 20px;height:60px;flex:none;
  background:var(--ink);color:#fff;position:relative;z-index:20}
.dm-top::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 260% at 8% 50%,rgba(var(--glow),.22),transparent 58%)}
.dm-brand{display:flex;align-items:center;gap:9px;position:relative;z-index:2}
.dm-brand svg{width:26px;height:26px;color:var(--accl)}
.dm-brand b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.03em}
.dm-tenant{display:flex;align-items:center;gap:9px;padding:6px 13px;border-radius:100px;position:relative;z-index:2;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:13px}
.dm-tenant i{width:7px;height:7px;border-radius:50%;background:var(--accl);flex:none}
.dm-sp{flex:1}
.dm-peran{display:flex;align-items:center;gap:8px;position:relative;z-index:2}
.dm-peran > span{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.dm-sel{display:flex;gap:3px;padding:3px;border-radius:100px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);min-width:0}
.dm-r{padding:7px 14px;border-radius:100px;cursor:pointer;border:0;background:transparent;
  font-family:'Inter',sans-serif;font-size:12.5px;color:rgba(255,255,255,.66);transition:.25s;min-height:32px}
.dm-r:hover{color:#fff}
.dm-r.on{background:var(--accl);color:#06201D;font-weight:700}
.dm-demo{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:9px;letter-spacing:.13em;
  color:#A16207;background:#FDE9C8;padding:5px 10px;border-radius:100px;position:relative;z-index:2;white-space:nowrap}

/* ── kerangka ── */
.dm-shell{flex:1;display:grid;grid-template-columns:236px 1fr;min-height:0}
.dm-side{background:#fff;border-right:1px solid var(--line);padding:16px 12px;overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;min-width:0}
.dm-lab{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);padding:0 6px}
.dm-main{overflow-y:auto;padding:20px 24px 32px;min-width:0}

/* rail dipakai ulang, tapi jadi menu samping aplikasi */
.dm-side .nx-rail{display:flex;flex-direction:column;gap:4px;overflow:visible;min-width:0}
.dm-side .nx-tab{border:0;background:transparent;border-radius:9px;padding:9px 10px;font-size:13.5px;
  color:var(--body);box-shadow:none}
.dm-side .nx-tab:hover{background:var(--soft);transform:none;color:var(--ink)}
.dm-side .nx-tab.active{background:rgba(var(--glow),.13);color:var(--acc);box-shadow:none}
.dm-side .nx-tab[hidden]{display:none !important}
.dm-side .nx-ti{width:26px;height:26px;flex:0 0 26px;border-radius:7px}
.dm-side .nx-ti svg{width:14px;height:14px}

/* panel dipakai apa adanya, cuma cangkangnya yang dilepas */
.dm-main .nx-body{min-height:0;padding:0;background:transparent}
.dm-main .nx-panel{max-width:1060px}
.dm-main .nx-h{font-size:11px;margin-bottom:18px}

.dm-tutup{padding:10px 6px 0;border-top:1px solid var(--line);margin-top:auto}
.dm-tutup a{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim);padding:8px 4px;
  transition:color .2s}
.dm-tutup a:hover{color:var(--acc)}
.dm-tutup svg{width:14px;height:14px;flex:none}
.dm-kunci{margin-top:10px;padding:11px 12px;border-radius:11px;background:var(--soft);
  border:1px dashed var(--line2);font-size:11.5px;line-height:1.55;color:var(--dim)}
.dm-kunci b{display:block;color:var(--ink);font-weight:700;font-size:12px;margin-bottom:3px}
.dm-kunci em{font-style:normal;color:var(--acc);font-weight:600}

@media(max-width:900px){
  body{overflow:auto}
  .dm-top{flex-wrap:wrap;height:auto;padding:12px 16px;gap:10px}
  .dm-sp{display:none}
  .dm-peran{order:3;flex:1 0 100%;min-width:0}
  .dm-sel{flex:1;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .dm-sel::-webkit-scrollbar{display:none}
  .dm-r{flex:0 0 auto}
  .dm-shell{grid-template-columns:1fr}
  .dm-side{border-right:0;border-bottom:1px solid var(--line);padding:12px}
  .dm-side .nx-rail{flex-direction:row;overflow-x:auto;gap:6px;min-width:0;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .dm-side .nx-rail::-webkit-scrollbar{display:none}
  .dm-side .nx-tab{flex:0 0 auto}
  .dm-tutup,.dm-kunci{display:none}
  .dm-main{padding:16px 16px 96px}
}

/* peran tanpa modul: layar kosong yang menjelaskan, bukan panel sisa */
.dm-nol{max-width:460px;margin:clamp(40px,9vh,90px) auto;text-align:center;padding:34px 30px;
  border-radius:18px;background:#fff;border:1px dashed var(--line2)}
.dm-nol[hidden]{display:none !important}
.dm-nol svg{width:38px;height:38px;margin:0 auto 16px;color:var(--dim);opacity:.6}
.dm-nol b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:18px;
  color:var(--ink);letter-spacing:-.02em;margin-bottom:9px}
.dm-nol p{font-size:14px;line-height:1.72;color:var(--body);margin:0}
.dm-nol em{font-style:normal;font-weight:700;color:var(--acc)}


/* ── sticky CTA, hanya di layar kecil ── */
.dm-smob{position:fixed;left:12px;right:12px;bottom:12px;z-index:80;display:none;
  align-items:center;justify-content:space-between;gap:12px;padding:9px 9px 9px 17px;border-radius:14px;
  background:#fff;border:1px solid var(--line);box-shadow:0 14px 36px -10px rgba(11,17,32,.32)}
.dm-smob > span:first-child{display:flex;flex-direction:column;gap:1px;min-width:0}
.dm-smob small{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.13em;color:var(--dim)}
.dm-smob b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:14.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-smob .dm-chat{display:inline-flex;align-items:center;gap:7px;flex:none;padding:11px 18px;border-radius:10px;
  background:var(--acc);color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;
  min-height:44px}
.dm-smob .dm-chat svg{width:15px;height:15px}
@media(max-width:900px){.dm-smob{display:flex}}

/* Akhiran domain di lockup demo, disamakan dengan landing: subordinat
   lewat berat dan opasitas supaya nama brand tetap dominan. */
.dm-dom{font-weight:600;opacity:.55;letter-spacing:-.01em}