/* Laporan Profil SME — tool dalaman RCG */

:root{
  --brand:#be1e2d; --brand-dark:#8f121f; --brand-soft:#fdecee;
  --ink:#0e1116; --ink2:#39424f; --muted:#6b7484;
  --line:#e1e5eb; --bg:#eef1f5; --card:#fff;
  --ok:#0f7a56; --warn:#a1620a; --danger:#be1e2d;
  --r:14px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
img{max-width:100%}
.wrap{width:100%;max-width:1000px;margin:0 auto;padding:0 18px}
code{background:#f1f3f6;padding:1px 5px;border-radius:5px;font-size:13px}

.top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.bar{display:flex;align-items:center;gap:14px;padding:11px 18px}
.logo{height:27px}
.bar-txt{display:flex;flex-direction:column;line-height:1.2;margin-right:auto}
.bar-txt strong{font-size:15px}
.bar-txt span{font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.pill{
  font-size:11.5px;font-weight:600;color:var(--ok);background:#e9f6f1;
  border:1px solid #c8e8dd;border-radius:99px;padding:5px 11px;white-space:nowrap;
}

.steps-nav{display:flex;gap:8px;padding:14px 18px 0}
.sn{
  font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:99px;
  padding:8px 14px;display:flex;align-items:center;gap:8px;cursor:pointer;
}
.sn i{
  font-style:normal;width:20px;height:20px;border-radius:50%;background:#e4e8ee;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;
}
.sn.is-on{border-color:var(--brand);color:var(--brand-dark);background:var(--brand-soft)}
.sn.is-on i{background:var(--brand);color:#fff}
.sn[disabled]{opacity:.5;pointer-events:none}

main{padding:14px 0 30px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;margin:0 0 14px;
}
h1{font-size:21px;margin:0 0 8px;letter-spacing:-.01em}
h2{font-size:16.5px;margin:0 0 10px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
h2 .tag{font-size:11px;font-weight:600;color:var(--muted);background:#f1f3f6;border-radius:99px;padding:3px 9px;letter-spacing:.02em}
.muted{color:var(--muted);font-size:13.5px;margin:0 0 12px}
.warn{background:#fff8e8;border:1px solid #f2e0b8;color:var(--warn);font-size:13.5px;border-radius:10px;padding:10px 12px;margin:0 0 14px}

.drops{display:grid;grid-template-columns:1fr;gap:12px}
.drop{
  border:1.5px dashed #cfd6df;border-radius:12px;padding:14px;cursor:pointer;
  display:flex;flex-direction:column;gap:3px;background:#fafbfc;
}
.drop:hover{border-color:var(--brand);background:var(--brand-soft)}
.drop.is-set{border-style:solid;border-color:var(--ok);background:#f2faf7}
.drop-t{font-size:14.5px;font-weight:700}
.drop-s{font-size:12.5px;color:var(--muted)}
.drop-st{font-size:12.5px;font-weight:600;color:var(--brand-dark);margin-top:4px}
.drop.is-set .drop-st{color:var(--ok)}

.grid2{display:grid;grid-template-columns:1fr;gap:0 16px}
.f{display:block;margin:0 0 12px;font-size:13.5px;font-weight:600;color:var(--ink2)}
input[type=text],input[type=number],select,textarea{
  display:block;width:100%;margin-top:5px;font:inherit;font-size:14.5px;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:10px 11px;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.hint{display:block;margin-top:5px;font-size:12px;font-weight:400;color:var(--muted)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}

.btn{
  font:inherit;font-size:14.5px;font-weight:600;color:var(--ink2);background:#fff;
  border:1.5px solid var(--line);border-radius:10px;padding:11px 16px;cursor:pointer;
}
.btn:hover{border-color:#b9c2ce}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-dark)}
.btn.big{width:100%;font-size:15px;padding:13px}
.btn[disabled]{opacity:.5;pointer-events:none}

.map{display:grid;grid-template-columns:1fr;gap:10px 16px}
.map .f{margin:0}
.preview{margin-top:6px;overflow:auto;max-height:230px;border:1px solid var(--line);border-radius:10px}
.preview table{border-collapse:collapse;font-size:12px;white-space:nowrap}
.preview th,.preview td{border-bottom:1px solid var(--line);padding:5px 9px;text-align:left}
.preview th{background:#f5f7f9;font-weight:600;position:sticky;top:0}
details summary{cursor:pointer;font-size:13px;color:var(--ink2);font-weight:600}

.list{margin:0 0 14px;padding:0;list-style:none}
.list li{
  display:flex;gap:10px;align-items:flex-start;
  padding:9px 11px;border:1px solid var(--line);border-radius:10px;margin:0 0 7px;font-size:13.5px;
}
.list li.ok{border-color:#c8e8dd;background:#f4fbf8}
.list li.warn-li{border-color:#f2e0b8;background:#fffaf0}
.list li.bad{border-color:#f3cdd2;background:#fdf5f6}
.list li b{flex:0 0 auto}
.badge{font-size:11px;font-weight:700;border-radius:99px;padding:2px 8px;letter-spacing:.02em}
.badge.hot{background:#fdecee;color:var(--brand-dark)}
.badge.warm{background:#fff4e2;color:#96590a}
.badge.nurture{background:#eef1f5;color:var(--ink2)}
.badge.none{background:#f3f4f6;color:var(--muted)}
.badge.ok{background:#e9f6f1;color:var(--ok)}
.badge.bad{background:#fdecee;color:var(--brand-dark)}

.scroll{overflow:auto;border:1px solid var(--line);border-radius:10px}
table.data{border-collapse:collapse;width:100%;font-size:12.5px}
table.data th,table.data td{border-bottom:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
table.data th{background:#f5f7f9;font-weight:600;position:sticky;top:0;white-space:nowrap}
table.data tr:last-child td{border-bottom:0}
td.num{text-align:right;font-variant-numeric:tabular-nums}
.counts{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--ink2)}
.counts b{font-size:17px;display:block}

.dl{display:grid;grid-template-columns:1fr;gap:10px}
.foot{padding:8px 18px 34px;color:var(--muted);font-size:12px}

@media (min-width:760px){
  .drops{grid-template-columns:repeat(3,1fr)}
  .grid2{grid-template-columns:1fr 1fr}
  .map{grid-template-columns:1fr 1fr}
  .dl{grid-template-columns:repeat(3,1fr)}
}