:root{--biru:#1e3a8a;--biru2:#2563eb;--oranye:#f97316;--bg:#f1f5f9;--kartu:#fff;--teks:#0f172a;--redup:#64748b;--garis:#e2e8f0;--hijau:#16a34a;--merah:#dc2626;--kuning:#d97706;--r:12px;--bayang:0 1px 2px rgba(15,23,42,.06),0 2px 8px rgba(15,23,42,.05)}
*{box-sizing:border-box}
html,body{margin:0}
body{font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--teks);background:var(--bg);-webkit-text-size-adjust:100%}
a{color:var(--biru2);text-decoration:none}
h1,h2,h3{margin:0;line-height:1.25}
h1{font-size:20px}h2{font-size:16px}h3{font-size:15px}
.redup{color:var(--redup)}.kecil{font-size:13px}.tebal{font-weight:600}.kanan{text-align:right}.tengah{text-align:center}
.angka{font-variant-numeric:tabular-nums;white-space:nowrap}
.sembunyi{display:none!important}
/* tombol & form */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--garis);background:#fff;color:var(--teks);border-radius:10px;padding:9px 14px;font:inherit;font-weight:600;cursor:pointer;min-height:40px;white-space:nowrap}
.btn:hover{border-color:#cbd5e1;background:#f8fafc}
.btn.utama{background:var(--biru2);border-color:var(--biru2);color:#fff}.btn.utama:hover{background:#1d4ed8}
.btn.bahaya{color:var(--merah);border-color:#fecaca}.btn.bahaya:hover{background:#fef2f2}
.btn.kecil{min-height:32px;padding:5px 10px;font-size:13px;border-radius:8px}
.btn.ikon{min-height:32px;width:32px;padding:0}
.btn.lebar{width:100%}
.btn:disabled{opacity:.45;cursor:default}
input,select,textarea{font:inherit;color:inherit;width:100%;padding:9px 11px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;min-height:40px}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid #93c5fd;border-color:var(--biru2)}
label{display:block;font-size:13px;font-weight:600;color:#334155}
label>input,label>select,label>textarea{margin-top:4px;font-weight:400}
.form{display:grid;gap:12px}
.form .dua{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.galat{background:#fef2f2;color:var(--merah);border:1px solid #fecaca;padding:9px 12px;border-radius:10px;font-size:14px}
/* login */
.hal-login{min-height:100vh;display:grid;place-items:center;padding:16px;background:linear-gradient(160deg,#1e3a8a,#1e40af 55%,#f97316 160%)}
.kotak-login{background:#fff;border-radius:18px;padding:26px 22px;width:100%;max-width:380px;box-shadow:0 20px 50px rgba(0,0,0,.25);display:grid;gap:14px}
.kotak-login form{display:grid;gap:12px}
.merek{display:flex;gap:10px;align-items:center}.merek b{display:block}.merek small{color:var(--redup)}
/* kerangka */
.atas{position:sticky;top:0;z-index:20;background:var(--biru);color:#fff;display:flex;align-items:center;gap:10px;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top))}
.atas .judul{font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atas img{border-radius:8px}
.atas .peran{font-size:11px;background:rgba(255,255,255,.15);padding:2px 8px;border-radius:999px}
.isi{padding:14px;padding-bottom:90px;max-width:1200px;margin:0 auto}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--garis);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}
.nav a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px 7px;color:var(--redup);font-size:11px;font-weight:600}
.nav a .i{font-size:19px;line-height:1}
.nav a.aktif{color:var(--biru2)}
.nav .hanya-desk{display:none}
.kepala{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 12px}
.kepala h1{flex:1;min-width:140px}
/* kartu */
.kartu{background:var(--kartu);border-radius:var(--r);box-shadow:var(--bayang);padding:14px;border:1px solid #eef2f7}
.kartu+.kartu{margin-top:12px}
.kartu h2{margin-bottom:10px}.kepala h2{flex:1;margin:0}.dua-kolom>.kartu,.dua-kolom>div>.kartu:first-child{margin-top:0}
.grid-stat{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.stat{background:#fff;border-radius:var(--r);padding:12px;box-shadow:var(--bayang);border:1px solid #eef2f7;display:block;color:inherit}
.stat .l{font-size:12px;color:var(--redup);font-weight:600}
.stat .v{font-size:19px;font-weight:700;margin-top:2px}
.stat .s{font-size:12px;color:var(--redup)}
.stat.peringatan .v{color:var(--merah)}
.dua-kolom{display:grid;gap:12px}
.bar-baris{display:grid;grid-template-columns:92px 1fr auto;gap:8px;align-items:center;font-size:13px;padding:4px 0}
.bar{height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:var(--biru2);border-radius:99px;width:0}
.bar.t-Deal i{background:var(--hijau)}.bar.t-Kalah i{background:#94a3b8}
/* daftar */
.daftar{display:grid;gap:8px}
.item{background:#fff;border:1px solid #eef2f7;border-radius:var(--r);padding:11px 12px;box-shadow:var(--bayang);display:flex;gap:10px;align-items:flex-start;color:inherit}
a.item:hover{border-color:#bfdbfe}
.item .utama-i{flex:1;min-width:0}
.item .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.item .sub{font-size:13px;color:var(--redup);overflow:hidden;text-overflow:ellipsis}
.item.selesai .nm{text-decoration:line-through;color:var(--redup)}
.cek{width:22px;height:22px;min-height:0;margin:1px 0 0;flex:none;accent-color:var(--hijau)}
.lencana{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:#e2e8f0;color:#334155;white-space:nowrap;vertical-align:middle}
.lencana.biru{background:#dbeafe;color:#1e40af}.lencana.hijau{background:#dcfce7;color:#166534}.lencana.merah{background:#fee2e2;color:#991b1b}.lencana.kuning{background:#fef3c7;color:#92400e}.lencana.oranye{background:#ffedd5;color:#9a3412}.lencana.abu{background:#f1f5f9;color:#475569}
.tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.filter{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:12px}
.filter .baris{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tab{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding-bottom:2px}
.tab button{border:1px solid var(--garis);background:#fff;border-radius:999px;padding:7px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;color:#334155}
.tab button.aktif{background:var(--biru);border-color:var(--biru);color:#fff}
.kosong{text-align:center;color:var(--redup);padding:22px 10px;font-size:14px}
.aksi{display:flex;gap:6px;flex-wrap:wrap}
/* tabel */
.tabel-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:8px 8px;border-bottom:1px solid var(--garis);text-align:left;vertical-align:top}
th{font-size:12px;color:var(--redup);font-weight:700;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
td.angka,th.angka{text-align:right}
/* kanban */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.kolom{background:#e8eef6;border-radius:var(--r);padding:8px;scroll-snap-align:start;min-height:200px;display:flex;flex-direction:column;gap:8px}
.kolom.drop{outline:2px dashed var(--biru2);background:#dbeafe}
.kolom-kepala{display:flex;flex-direction:column;padding:2px 4px}
.kolom-kepala b{font-size:14px}.kolom-kepala span{font-size:12px;color:var(--redup)}
.kartu-deal{background:#fff;border-radius:10px;padding:10px;box-shadow:var(--bayang);border-left:4px solid var(--biru2);cursor:grab}
.kartu-deal.t-Deal{border-left-color:var(--hijau)}.kartu-deal.t-Kalah{border-left-color:#94a3b8}.kartu-deal.t-Negosiasi{border-left-color:var(--oranye)}
.kartu-deal .nm{font-weight:600}.kartu-deal .nilai{font-weight:700;margin-top:6px}
.kartu-deal .bawah{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:6px}
.kartu-deal.seret{opacity:.4}
/* timeline */
.timeline{display:grid;gap:10px;margin-top:10px}
.timeline .ev{border-left:3px solid var(--garis);padding:2px 0 2px 10px;font-size:14px}
.timeline .ev.catatan,.timeline .ev.telepon,.timeline .ev.wa,.timeline .ev.meeting,.timeline .ev.email{border-left-color:var(--oranye)}
.timeline .ev small{display:block;color:var(--redup);font-size:12px}
.info-kontak{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px}
.info-kontak dt{color:var(--redup)}.info-kontak dd{margin:0;word-break:break-word}
/* dialog */
dialog{border:0;border-radius:16px;padding:0;width:min(560px,calc(100vw - 20px));max-height:calc(100vh - 30px);box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(15,23,42,.5)}
dialog .dk{padding:16px;overflow:auto;max-height:calc(100vh - 30px)}
dialog .dk-kepala{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
dialog .dk-bawah{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;position:sticky;bottom:-16px;background:#fff;padding:10px 0 4px}
/* invoice editor */
.baris-item{display:grid;grid-template-columns:1fr 70px 1fr 32px;gap:6px;align-items:center;margin-bottom:6px}
.baris-item .st{grid-column:1/-1;font-size:12px;color:var(--redup);text-align:right;margin-top:-4px}
.total-inv{display:grid;grid-template-columns:1fr auto;gap:4px 16px;font-size:14px;justify-content:end;max-width:320px;margin-left:auto}
.total-inv .besar{font-size:18px;font-weight:700}
/* toast */
#toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);background:#0f172a;color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;z-index:100;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw}
#toast.ada{opacity:1}#toast.galat{background:var(--merah)}
.menu-list{display:grid;gap:8px}
.menu-list a{display:flex;align-items:center;gap:12px;padding:14px;background:#fff;border-radius:var(--r);box-shadow:var(--bayang);color:inherit;font-weight:600}
.menu-list a .i{font-size:20px}
body.viewer .tulis{display:none!important}
@media (min-width:640px){
  .grid-stat{grid-template-columns:repeat(4,1fr)}
  .filter{grid-template-columns:2fr 1fr 1fr}.filter .baris{display:contents}
  .kanban{grid-auto-columns:260px}
}
@media (min-width:960px){
  body{padding-left:220px}
  .atas{position:fixed;left:0;right:auto;top:0;bottom:0;width:220px;flex-direction:column;align-items:flex-start;padding:16px 14px;gap:14px}
  .atas .judul{flex:none;white-space:normal}
  .nav{position:fixed;top:118px;left:0;bottom:auto;right:auto;width:220px;background:transparent;border:0;display:flex;flex-direction:column;gap:2px;padding:0 10px}
  .nav a{flex-direction:row;gap:10px;font-size:14px;color:#cbd5e1;padding:9px 12px;border-radius:10px}
  .nav a.aktif{background:rgba(255,255,255,.12);color:#fff}
  .nav a:hover{color:#fff}
  .nav .hanya-hp{display:none}.nav .hanya-desk{display:flex}
  .isi{padding:22px 26px 40px}
  .dua-kolom{grid-template-columns:1fr 1fr}
  .dua-kolom.lebar-kiri{grid-template-columns:3fr 2fr}
  .daftar.grid{grid-template-columns:1fr 1fr}
  #toast{bottom:24px}
  .kanban{grid-auto-flow:row;grid-template-columns:repeat(6,minmax(140px,1fr));overflow-x:auto}
}
@media print{.atas,.nav,#toast{display:none}body{padding:0;background:#fff}}
.kartu-deal .bawah .btn{flex:1;min-width:0;padding:0 4px}.aksi+.aksi{margin-top:10px}.kartu>.aksi{margin-top:12px}
@media (max-width:639px){.tabel-kartu thead{display:none}.tabel-kartu,.tabel-kartu tbody,.tabel-kartu tr,.tabel-kartu td{display:block;width:100%}.tabel-kartu tr{border-bottom:1px solid var(--garis);padding:8px 0}.tabel-kartu td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:12px;text-align:right}.tabel-kartu td::before{content:attr(data-l);color:var(--redup);font-size:12px;font-weight:600;text-align:left;flex:none}.tabel-kartu td.judul-baris{display:block;text-align:left;font-weight:600}.tabel-kartu td.judul-baris::before{display:none}.tabel-kartu td select{max-width:65%}}
@media (max-width:639px){.baris-item{grid-template-columns:80px 1fr 32px;padding:8px;background:#f8fafc;border-radius:10px}.baris-item>[data-f=nama]{grid-column:1/-1}.kepala-item{display:none}}