/* ==========================================================================
   TEAM INDONESIA ORGANIK — Design System
   Modern, profesional, ringan. Tanpa framework.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS */
:root{
  /* brand — indigo tenang, bukan hijau.
     Hijau dipertahankan hanya sebagai warna makna "baik/tercapai" (--ok),
     supaya angka yang bagus tetap terbaca hijau dan tidak tertukar dengan
     warna identitas. Seluruh tampilan mengambil warnanya dari sini saja:
     mengganti delapan baris ini mengganti warna seluruh aplikasi. */
  --brand-900:#1E1B4B; --brand-800:#312E81; --brand-700:#4338CA;
  --brand-600:#4F46E5; --brand-500:#6366F1; --brand-300:#A5B4FC;
  --brand-100:#E0E7FF; --brand-50:#F4F6FF;

  /* menu samping — gelap netral, aksen indigo */
  --side-900:#0E1525; --side-800:#141C2E; --side-line:rgba(148,163,184,.14);
  --side-ink:#94A3B8; --side-ink-kuat:#F1F5F9; --side-aksen:#818CF8;

  /* netral */
  --ink-900:#0F172A; --ink-700:#334155; --ink-500:#64748B; --ink-400:#94A3B8;
  --line:#E6EAF0; --line-soft:#F1F4F8;
  --bg:#F7F9FB; --surface:#FFFFFF; --surface-2:#FBFCFE;

  /* semantik */
  --ok:#15803D; --ok-bg:#E9F8EF; --ok-line:#BBE9CD;
  --warn:#B45309; --warn-bg:#FEF6E7; --warn-line:#F5D9A8;
  --bad:#BE123C; --bad-bg:#FEF0F3; --bad-line:#F7C6D2;
  --info:#1D4ED8; --info-bg:#EEF3FF; --info-line:#C7D7FE;

  /* bentuk */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --sh-1:0 1px 2px rgba(15,23,42,.05);
  --sh-2:0 1px 3px rgba(15,23,42,.07), 0 6px 16px -6px rgba(15,23,42,.10);
  --sh-3:0 10px 30px -10px rgba(15,23,42,.22);

  --sidebar:256px;
  --topbar:60px;
  --font:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink-900);
  font-family:var(--font); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--brand-700); text-decoration:none}
a:hover{color:var(--brand-800)}
h1,h2,h3,h4{margin:0; line-height:1.3; letter-spacing:-.011em; font-weight:650}
h1{font-size:1.25rem} h2{font-size:1rem} h3{font-size:.86rem}
p{margin:0}
small{font-size:.78rem}
.muted{color:var(--ink-500)}
.tabular{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--brand-500); outline-offset:2px; border-radius:6px}

/* ---------------------------------------------------------------- SHELL */
.shell{display:flex; min-height:100vh}

.sidebar{
  width:var(--sidebar); flex:0 0 var(--sidebar);
  background:linear-gradient(180deg,var(--side-800) 0%, var(--side-900) 100%);
  color:var(--side-ink); display:flex; flex-direction:column;
  border-right:1px solid rgba(0,0,0,.4);
  position:fixed; inset:0 auto 0 0; z-index:40; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent;
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18); border-radius:99px}

.brand{
  display:flex; gap:.7rem; align-items:center; padding:1.05rem 1.15rem;
  border-bottom:1px solid var(--side-line);
}
.brand-mark{
  width:34px; height:34px; border-radius:10px; flex:0 0 34px;
  background:linear-gradient(140deg,var(--brand-500),var(--brand-300));
  display:grid; place-items:center; color:#1E1B4B;
  box-shadow:0 4px 14px rgba(99,102,241,.4);
}
.brand-mark svg{width:19px; height:19px}
.brand strong{display:block; font-size:.9rem; letter-spacing:.02em; color:#fff; font-weight:650}
.brand small{display:block; color:var(--side-aksen); font-size:.64rem; letter-spacing:.13em; font-weight:600}

.nav{padding:.7rem .6rem; flex:1}
.nav-group{
  font-size:.63rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(148,163,184,.58); padding:1rem .55rem .35rem; font-weight:700;
  display:flex; align-items:center; gap:.5rem;
}
/* garis tipis setelah judul grup — memisahkan bagian tanpa menambah jarak */
.nav-group::after{content:""; flex:1; height:1px; background:var(--side-line)}
.nav-item{
  display:flex; gap:.65rem; align-items:center; position:relative;
  padding:.52rem .6rem; margin:1px 0; border-radius:9px;
  color:var(--side-ink); font-size:.845rem; font-weight:500;
  transition:background .13s, color .13s;
}
.nav-item svg{width:17px; height:17px; flex:0 0 17px; opacity:.7}
.nav-item:hover{background:rgba(148,163,184,.10); color:var(--side-ink-kuat)}
.nav-item:hover svg{opacity:1}
.nav-item.active{
  background:linear-gradient(90deg, rgba(99,102,241,.28), rgba(99,102,241,.10));
  color:#fff; font-weight:600;
}
/* penanda tegas di tepi kiri: posisi sekarang terbaca sekilas */
.nav-item.active::before{
  content:""; position:absolute; left:-.6rem; top:50%; transform:translateY(-50%);
  width:3px; height:19px; border-radius:0 3px 3px 0; background:var(--side-aksen);
}
.nav-item.active svg{opacity:1; color:var(--side-aksen)}
.nav-badge{
  margin-left:auto; background:var(--bad); color:#fff; font-size:.62rem;
  font-weight:700; padding:1px 6px; border-radius:99px;
}
.subnav{display:flex; flex-direction:column; margin:.15rem 0 .45rem 1.95rem;
  padding-left:.7rem; border-left:1px solid var(--side-line)}
.subnav a{
  color:rgba(148,163,184,.85); font-size:.775rem; padding:.3rem .45rem;
  border-radius:6px; position:relative; transition:background .12s, color .12s;
}
.subnav a:hover{color:var(--side-ink-kuat); background:rgba(148,163,184,.08)}
.subnav a.on{color:#fff; font-weight:600; background:rgba(99,102,241,.16)}
/* titik pada butir yang sedang dibuka, menyambung ke garis kiri */
.subnav a.on::before{
  content:""; position:absolute; left:-.76rem; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--side-aksen);
}
/* butir langkah bernomor ditulis agak menjorok lewat kelas, bukan spasi */
.subnav a.langkah{padding-left:1.15rem}

.side-foot{padding:.85rem 1.15rem; border-top:1px solid var(--side-line);
  display:flex; flex-direction:column; gap:.3rem}
.side-foot a{color:rgba(148,163,184,.75); font-size:.76rem}
.side-foot a:hover{color:var(--side-ink-kuat)}
.backdrop{display:none}

.main{flex:1; margin-left:var(--sidebar); display:flex; flex-direction:column; min-width:0}

/* ---------------------------------------------------------------- TOPBAR */
.topbar{
  position:sticky; top:0; z-index:30; min-height:var(--topbar);
  background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:.85rem; padding:.6rem 1.4rem;
}
.topbar-title{flex:1; min-width:0}
.crumb{display:flex; gap:.35rem; align-items:center; font-size:.7rem; color:var(--ink-400); margin-bottom:.1rem}
.crumb a{color:var(--ink-500)}
.topbar-title h1{font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar-actions{display:flex; align-items:center; gap:.45rem}

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-700); cursor:pointer; position:relative;
  transition:background .13s, border-color .13s, color .13s;
}
.icon-btn svg{width:17px; height:17px}
.icon-btn:hover{background:var(--brand-50); border-color:var(--brand-300); color:var(--brand-700)}
.dot{
  position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px;
  background:var(--bad); color:#fff; font-size:.6rem; font-weight:700;
  border-radius:99px; display:grid; place-items:center; border:2px solid #fff;
}
.user-chip{display:flex; align-items:center; gap:.55rem; padding-left:.35rem}
.user-chip strong{display:block; font-size:.8rem; line-height:1.2; font-weight:600}
.user-chip small{display:block; color:var(--ink-500); font-size:.68rem}
.avatar{
  width:34px; height:34px; border-radius:50%; color:#fff; display:grid; place-items:center;
  font-weight:700; font-size:.82rem; letter-spacing:.02em; box-shadow:var(--sh-1);
}

.content{padding:1.4rem; flex:1; max-width:1560px; width:100%}
.foot{
  padding:1rem 1.4rem; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.72rem; color:var(--ink-400);
}

/* ---------------------------------------------------------------- CARD */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1); margin-bottom:1.1rem; overflow:hidden;
}
.card-head{
  padding:.95rem 1.15rem; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  border-bottom:1px solid var(--line-soft); background:var(--surface);
}
.card-head h2{flex:1; min-width:150px; font-size:.95rem}
.card-head p{width:100%; font-size:.755rem; color:var(--ink-500); margin-top:.1rem}
.card-body{padding:1.15rem}
.card-body.tight{padding:.8rem 1.15rem}

/* ---------------------------------------------------------------- GRID */
.grid{display:grid; gap:1.1rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g23{grid-template-columns:2fr 1fr}

/* ---------------------------------------------------------------- KPI */
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1rem 1.1rem; box-shadow:var(--sh-1); position:relative; overflow:hidden;
  transition:box-shadow .16s, transform .16s;
}
.kpi:hover{box-shadow:var(--sh-2); transform:translateY(-1px)}
.kpi::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--line)}
.kpi.ok::before{background:var(--ok)} .kpi.warn::before{background:var(--warn)} .kpi.bad::before{background:var(--bad)}
.kpi .label{
  font-size:.685rem; color:var(--ink-500); text-transform:uppercase;
  letter-spacing:.075em; font-weight:650;
}
.kpi .value{
  font-size:1.62rem; font-weight:700; margin:.3rem 0 .1rem;
  letter-spacing:-.025em; font-variant-numeric:tabular-nums; color:var(--ink-900);
}
.kpi .sub{font-size:.745rem; color:var(--ink-500)}

.bar{height:5px; background:var(--line-soft); border-radius:99px; overflow:hidden; margin-top:.55rem}
.bar span{display:block; height:100%; border-radius:99px; background:var(--brand-600); transition:width .5s ease}
.bar.warn span{background:#D97706} .bar.bad span{background:#E11D48}

.trend{display:inline-flex; align-items:center; gap:.2rem; font-weight:650; font-size:.74rem}
.trend.up{color:var(--ok)} .trend.down{color:var(--bad)}

/* ---------------------------------------------------------------- TABEL */
.table-wrap{overflow-x:auto}
.table-wrap table{min-width:640px}
table{width:100%; border-collapse:separate; border-spacing:0; font-size:.83rem}
thead th{
  position:sticky; top:0; z-index:1; background:var(--surface-2);
  font-size:.665rem; font-weight:700; color:var(--ink-500);
  text-transform:uppercase; letter-spacing:.075em; white-space:nowrap;
  padding:.65rem .85rem; text-align:left; border-bottom:1px solid var(--line);
}
tbody td{padding:.72rem .85rem; border-bottom:1px solid var(--line-soft); vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .1s}
tbody tr:hover{background:var(--brand-50)}
td.num,th.num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
td.num.neg{color:var(--bad); font-weight:600}
tfoot td{
  font-weight:700; background:var(--surface-2); padding:.72rem .85rem;
  border-top:1px solid var(--line); font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------- BADGE */
.badge{
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.18rem .55rem; border-radius:99px; font-size:.68rem; font-weight:650;
  background:var(--line-soft); color:var(--ink-700); border:1px solid var(--line);
  white-space:nowrap; line-height:1.5;
}
.badge.ok{background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line)}
.badge.warn{background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line)}
.badge.bad{background:var(--bad-bg); color:var(--bad); border-color:var(--bad-line)}
.badge.info{background:var(--info-bg); color:var(--info); border-color:var(--info-line)}
.badge.solid{background:var(--brand-700); color:#fff; border-color:var(--brand-700)}

/* ---------------------------------------------------------------- BUTTON */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.38rem;
  padding:.5rem .85rem; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-700); font-size:.8rem; font-weight:600;
  cursor:pointer; font-family:inherit; transition:background .13s,border-color .13s,color .13s,box-shadow .13s;
  white-space:nowrap;
}
.btn svg{width:15px; height:15px}
.btn:hover{background:var(--surface-2); border-color:var(--ink-400); color:var(--ink-900)}
.btn.primary{
  background:var(--brand-700); border-color:var(--brand-700); color:#fff;
  box-shadow:0 1px 2px rgba(67,56,202,.25);
}
.btn.primary:hover{background:var(--brand-800); border-color:var(--brand-800); color:#fff}
.btn.ghost{background:transparent; border-color:transparent; color:var(--ink-500)}
.btn.ghost:hover{background:var(--line-soft); color:var(--ink-900)}
.btn.danger{color:var(--bad); border-color:var(--bad-line); background:var(--bad-bg)}
.btn.danger:hover{background:#FCE3E9; border-color:var(--bad); color:var(--bad)}
.btn.sm{padding:.3rem .6rem; font-size:.735rem; border-radius:8px}
.btn.sm svg{width:13px; height:13px}
.btn[disabled]{opacity:.5; pointer-events:none}

.btn-row{display:flex; gap:.4rem; flex-wrap:wrap}

/* grup tombol export (Excel / PDF / CSV) */
.export-group{
  display:inline-flex; align-items:center; gap:.3rem;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:11px; padding:.22rem .3rem .22rem .55rem;
}
.export-group .export-label{
  display:inline-flex; align-items:center; gap:.32rem;
  font-size:.72rem; font-weight:600; color:var(--ink-500);
  letter-spacing:.02em; white-space:nowrap;
}
.export-group .export-label svg{width:14px; height:14px}
.export-group .btn{background:var(--surface); min-height:30px}
@media (max-width:780px){
  .export-group{width:100%; justify-content:space-between; padding:.3rem}
  .export-group .btn{flex:1; justify-content:center; min-height:38px}
}
@media print{ .export-group{display:none} }


/* segmented control */
.seg{display:inline-flex; background:var(--line-soft); padding:3px; border-radius:11px; gap:2px}
.seg a{
  padding:.36rem .8rem; border-radius:8px; font-size:.78rem; font-weight:600;
  color:var(--ink-500);
}
.seg a:hover{color:var(--ink-900)}
.seg a.on{background:var(--surface); color:var(--brand-700); box-shadow:var(--sh-1)}

/* ---------------------------------------------------------------- ALERT */
/* Alert sengaja BUKAN flex: teksnya sering bercampur <strong>, <em>, <code>,
   dan flex akan memecah tiap potongan itu jadi kolom sendiri-sendiri. */
.alert{
  padding:.75rem 1rem; border-radius:var(--r); margin-bottom:1rem; font-size:.82rem;
  display:block; border:1px solid transparent; line-height:1.5;
}
.alert svg{width:17px; height:17px; display:inline-block; vertical-align:-4px; margin-right:.45rem}

.alert.ok{background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line)}
.alert.bad{background:var(--bad-bg); color:var(--bad); border-color:var(--bad-line)}
.alert.warn{background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line)}
.alert.info{background:var(--info-bg); color:var(--info); border-color:var(--info-line)}
.alert strong{font-weight:700}
.alert em{font-style:italic}

/* daftar fakta ringkas pada kartu integrasi */
/* ikon inline di judul kartu — tanpa ini SVG memenuhi seluruh kartu */
.card-head h2 svg,.card-head h3 svg{
  width:18px; height:18px; flex:0 0 18px; vertical-align:-3px; color:var(--brand-700);
}
.card-head h3{display:flex; align-items:center; gap:.45rem}

.fakta{display:grid; gap:.5rem; font-size:.8rem}
.fakta > div{display:flex; gap:.5rem; flex-wrap:wrap; align-items:baseline}
.fakta > div > span.muted:first-child{flex:0 0 138px; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em}
@media (max-width:520px){ .fakta > div > span.muted:first-child{flex:1 0 100%} }

.insight-box,.problem-box{
  padding:.85rem 1rem; border-radius:var(--r); font-size:.825rem; margin-bottom:.7rem;
  border:1px solid transparent; border-left-width:3px;
}
.insight-box{background:var(--brand-50); border-color:var(--brand-100); border-left-color:var(--brand-600); color:#134E3A}
.problem-box{background:var(--warn-bg); border-color:var(--warn-line); border-left-color:var(--warn); color:#7C4310}

/* ---------------------------------------------------------------- FORM */
.form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem}
.field{display:flex; flex-direction:column; gap:.32rem}
.field.full{grid-column:1 / -1}
label{font-size:.755rem; font-weight:650; color:var(--ink-700)}
input,select,textarea{
  font:inherit; font-size:.84rem; padding:.55rem .7rem; width:100%;
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  color:var(--ink-900); transition:border-color .13s, box-shadow .13s;
}
input::placeholder,textarea::placeholder{color:var(--ink-400)}
input:hover,select:hover,textarea:hover{border-color:var(--ink-400)}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(99,102,241,.16);
}
textarea{min-height:88px; resize:vertical; line-height:1.6}
input[type=checkbox]{width:16px; height:16px; accent-color:var(--brand-600)}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748B' stroke-width='1.8'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6rem center; background-size:15px; padding-right:2rem}
.hint{font-size:.7rem; color:var(--ink-400)}
.form-actions{display:flex; gap:.5rem; padding-top:.9rem; margin-top:.3rem; border-top:1px solid var(--line-soft); flex-wrap:wrap}

.filters{display:flex; gap:.7rem; flex-wrap:wrap; align-items:flex-end}
.filters .field{min-width:150px; flex:1 1 150px}
.filters .actions{display:flex; gap:.4rem}

/* ---------------------------------------------------------------- MISC */
.pager{
  display:flex; gap:.5rem; align-items:center; justify-content:space-between;
  padding:.85rem 1.15rem; border-top:1px solid var(--line-soft);
  font-size:.78rem; color:var(--ink-500); flex-wrap:wrap;
}
.pager a{padding:.3rem .65rem; border:1px solid var(--line); border-radius:8px; color:var(--ink-700); font-weight:600}
.pager a:hover{background:var(--brand-50); border-color:var(--brand-300)}

.chartbox{position:relative; height:280px}
.chartbox.sm{height:210px}

.list-plain{list-style:none; margin:0; padding:0}
.list-plain li{padding:.7rem 0; border-bottom:1px solid var(--line-soft); font-size:.83rem}
.list-plain li:last-child{border-bottom:0}

.tag-row{display:flex; gap:.4rem; flex-wrap:wrap}
.clip{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:300px}

.empty{text-align:center; padding:2.6rem 1.2rem; color:var(--ink-400)}
.empty svg{width:36px; height:36px; opacity:.35; margin-bottom:.6rem}
.empty p{font-size:.84rem}

.only-mobile{display:none}
.print-only{display:none}

/* ---------------------------------------------------------------- LOGIN */
.login-wrap{
  min-height:100vh; display:grid; place-items:center; padding:1.5rem;
  background:
    radial-gradient(1000px 520px at 12% -10%, rgba(99,102,241,.45), transparent 60%),
    radial-gradient(900px 480px at 92% 108%, rgba(67,56,202,.55), transparent 60%),
    linear-gradient(150deg,var(--side-800) 0%, var(--side-900) 100%);
}
.login-card{
  background:var(--surface); border-radius:var(--r-xl); padding:2.2rem;
  width:100%; max-width:400px; box-shadow:var(--sh-3);
}
.login-card .brand-mark{width:44px; height:44px; border-radius:13px; margin-bottom:1rem}
.login-card .brand-mark svg{width:24px; height:24px}
.login-card h1{font-size:1.18rem; margin-bottom:.15rem}
.login-card .sub{color:var(--ink-500); font-size:.79rem; margin-bottom:1.5rem}
.login-card .field{margin-bottom:.9rem}
.login-card .btn{width:100%; padding:.65rem; font-size:.86rem}
.demo-hint{
  margin-top:1.3rem; padding-top:.95rem; border-top:1px solid var(--line);
  font-size:.72rem; color:var(--ink-400); line-height:1.65;
}

/* ---------------------------------------------------------------- PERAN */
.role-card{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  overflow:hidden; box-shadow:var(--sh-1); display:flex; flex-direction:column;
}
.role-head{padding:1rem 1.15rem; border-bottom:1px solid var(--line-soft); display:flex; gap:.75rem; align-items:flex-start}
.role-ico{
  width:38px; height:38px; border-radius:11px; flex:0 0 38px; display:grid; place-items:center;
  background:var(--brand-100); color:var(--brand-700);
}
.role-ico svg{width:19px; height:19px}
.role-head h3{font-size:.9rem; margin-bottom:.1rem}
.role-body{padding:1rem 1.15rem; flex:1}
.tugas{list-style:none; margin:0; padding:0; counter-reset:t}
.tugas li{
  position:relative; padding:.4rem 0 .4rem 1.75rem; font-size:.815rem;
  color:var(--ink-700); counter-increment:t;
}
.tugas li::before{
  content:counter(t); position:absolute; left:0; top:.45rem;
  width:19px; height:19px; border-radius:50%; background:var(--brand-100); color:var(--brand-700);
  font-size:.63rem; font-weight:700; display:grid; place-items:center;
}
.anggota{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.2rem}
.anggota .avatar{width:27px; height:27px; font-size:.68rem}

/* ---------------------------------------------------------------- RESPONSIF */
@media (max-width:1200px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g23{grid-template-columns:1fr}
}
@media (max-width:780px){
  .only-mobile{display:inline-flex}
  .only-desktop{display:none}

  /* sidebar geser dari kiri, lebar mengikuti layar */
  .sidebar{
    width:min(84vw,300px); flex-basis:min(84vw,300px);
    transform:translateX(-100%); transition:transform .24s cubic-bezier(.4,0,.2,1);
    box-shadow:var(--sh-3); padding-bottom:env(safe-area-inset-bottom);
  }
  body.nav-open{overflow:hidden}
  body.nav-open .sidebar{transform:none}
  body.nav-open .backdrop{
    display:block; position:fixed; inset:0; z-index:35;
    background:rgba(15,23,42,.5); backdrop-filter:blur(2px);
  }
  .nav-item{padding:.68rem .7rem; font-size:.88rem}      /* target sentuh lebih besar */
  .subnav a{padding:.42rem 0; font-size:.8rem}
  .main{margin-left:0}

  /* KPI tetap 2 kolom supaya tidak perlu scroll panjang */
  .g4{grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem}
  .g2,.g3,.g23{grid-template-columns:1fr; gap:.75rem}
  .grid{gap:.75rem}
  .form-grid{grid-template-columns:1fr; gap:.8rem}

  .content{padding:.75rem}
  .card{border-radius:var(--r); margin-bottom:.75rem}
  .card-head{padding:.8rem .9rem; gap:.5rem}
  .card-head h2{font-size:.9rem; min-width:0}
  .card-body{padding:.9rem}
  .card-body.tight{padding:.65rem .9rem}

  .topbar{padding:.5rem .75rem; gap:.5rem; min-height:56px}
  .crumb{display:none}                                    /* hemat ruang, judul saja */
  .topbar-title h1{font-size:.95rem}

  .kpi{padding:.75rem .8rem; border-radius:var(--r)}
  .kpi .label{font-size:.63rem; letter-spacing:.05em}
  .kpi .value{font-size:1.18rem; margin:.2rem 0 .05rem}
  .kpi .sub{font-size:.68rem}

  /* tombol lebih mudah disentuh, dan filter penuh selebar layar */
  .btn{min-height:40px; padding:.5rem .8rem}
  .btn.sm{min-height:32px}
  .filters{gap:.5rem}
  .filters .field{flex:1 1 100%; min-width:0}
  .filters .actions{width:100%}
  .filters .actions .btn{flex:1}
  .card-head .btn{flex:1 1 auto}

  .chartbox{height:220px}
  .chartbox.sm{height:180px}
  .table-wrap table{min-width:560px}
  .clip{max-width:190px}
  .role-head{padding:.85rem .9rem}
  .role-body{padding:.85rem .9rem}
  .foot{padding:.85rem .75rem; font-size:.68rem}
}

/* layar sangat kecil: KPI kembali satu kolom agar angka tidak terpotong */
@media (max-width:359px){
  .g4{grid-template-columns:1fr}
  .kpi .value{font-size:1.3rem}
}

@media print{
  .sidebar,.topbar,.foot,.btn,.filters,.pager,.no-print,.icon-btn{display:none !important}
  .main{margin-left:0}
  .print-only{display:block}
  .card{box-shadow:none; border:1px solid #D6DBE3; break-inside:avoid; margin-bottom:.7rem}
  body{background:#fff; font-size:11px}
  thead th{position:static}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* ==================== KALENDER ==================== */
/* Warna sumber acara. Tiap sumber punya satu warna tetap supaya mata
   bisa mengenali jenis agenda tanpa membaca labelnya. */
.warna-ungu   { --kal:#7C3AED; --kal-bg:#F3EEFF; --kal-line:#DDD0FB }
.warna-biru   { --kal:#1D4ED8; --kal-bg:#EEF3FF; --kal-line:#C7D7FE }
.warna-oranye { --kal:#C2410C; --kal-bg:#FFF1E9; --kal-line:#FBD4BC }
.warna-merah  { --kal:#BE123C; --kal-bg:#FEF0F3; --kal-line:#F7C6D2 }
.warna-kuning { --kal:#B45309; --kal-bg:#FEF6E7; --kal-line:#F5D9A8 }
.warna-hijau  { --kal:#15803D; --kal-bg:#E9F8EF; --kal-line:#BBE9CD }

.kal-nav{display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin-bottom:.6rem}
.kal-bulan{flex:1; min-width:130px; text-align:center; font-size:.9rem}

.kal-filter{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.kal-cek{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; padding:.3rem .65rem;
  font-size:.75rem; background:var(--surface); user-select:none;
}
.kal-cek input{position:absolute; opacity:0; width:0; height:0}
.kal-cek .titik{width:9px; height:9px; border-radius:50%; background:var(--kal,var(--ink-400)); flex:0 0 9px}
.kal-cek .jml{color:var(--ink-500); font-variant-numeric:tabular-nums}
.kal-cek.on{background:var(--kal-bg); border-color:var(--kal-line); color:var(--kal); font-weight:600}
.kal-cek.on .jml{color:inherit; opacity:.75}
.kal-cek:hover{border-color:var(--ink-400)}

.kal-wrap{padding:0 1rem 1rem}
.kal-kepala,.kal-kisi{display:grid; grid-template-columns:repeat(7,minmax(0,1fr))}
.kal-kepala{
  gap:4px; margin-bottom:4px; font-size:.68rem; font-weight:700;
  letter-spacing:.06em; color:var(--ink-500); text-transform:uppercase;
}
.kal-kepala div{text-align:center; padding:.3rem 0}
.kal-kisi{gap:4px}
.kal-sel{
  min-height:104px; border:1px solid var(--line); border-radius:9px;
  padding:.3rem; background:var(--surface); display:flex; flex-direction:column; gap:2px;
}
.kal-sel.luar{background:var(--surface-2); opacity:.55}
.kal-sel.pekan{background:var(--line-soft)}
.kal-sel.luar.pekan{background:var(--surface-2)}
.kal-sel.kini{border-color:var(--brand-600); box-shadow:0 0 0 1px var(--brand-600) inset}
.kal-tgl{font-size:.72rem; font-weight:700; color:var(--ink-500); padding:0 .1rem .1rem}
.kal-sel.kini .kal-tgl{color:var(--brand-700)}

.kal-acara{
  display:block; font-size:.68rem; line-height:1.25; padding:.16rem .32rem;
  border-radius:5px; background:var(--kal-bg); color:var(--kal);
  border-left:3px solid var(--kal); text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kal-acara:hover{filter:brightness(.96)}
.kal-acara b{font-variant-numeric:tabular-nums}
/* hari lanjutan sebuah campaign: garis kiri dilepas supaya terbaca menyambung */
.kal-acara.lanjut{border-left-color:transparent; opacity:.8}
.kal-lagi{font-size:.65rem; color:var(--ink-500); padding:.1rem .3rem}

/* agenda untuk layar kecil */
.kal-agenda{padding:0 1rem 1rem; display:flex; flex-direction:column; gap:.8rem}
.kal-hari{border:1px solid var(--line); border-radius:11px; overflow:hidden}
.kal-hari.kini{border-color:var(--brand-600)}
.kal-hari-kepala{
  display:flex; align-items:center; gap:.5rem; padding:.45rem .7rem;
  background:var(--line-soft); font-size:.78rem;
}
.kal-hari-kepala .jml{
  margin-left:auto; background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:0 .45rem; font-size:.7rem; color:var(--ink-500);
}
.kal-baris{
  display:flex; align-items:flex-start; gap:.55rem; padding:.5rem .7rem;
  border-top:1px solid var(--line-soft); text-decoration:none; color:inherit;
}
.kal-baris .titik{width:9px; height:9px; border-radius:50%; background:var(--kal); flex:0 0 9px; margin-top:.32rem}
.kal-baris .isi{flex:1; min-width:0; display:flex; flex-direction:column; gap:.1rem}
.kal-baris .isi strong{font-size:.8rem; font-weight:600}
.kal-baris .isi .muted{font-size:.71rem}
.kal-baris:hover{background:var(--surface-2)}

@media (max-width:780px){
  .kal-wrap{display:none}
  .kal-bulan{order:-1; flex-basis:100%}
  .kal-cek{flex:1 1 calc(50% - .4rem); justify-content:flex-start}
}
@media print{
  .kal-agenda{display:none}
  .kal-wrap{display:block}
  .kal-sel{min-height:80px; break-inside:avoid}
}

/* ============ IDENTITAS WARNA MARKETPLACE ============ */
/* Warna diambil dari src/utils/marketplace.js lewat atribut style,
   supaya satu daftar warna dipakai bersama oleh tabel dan grafik. */
.mp-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:600; font-size:.78rem; white-space:nowrap;
}
.mp-chip::before{
  content:''; width:10px; height:10px; border-radius:3px;
  background:var(--mp,var(--ink-400)); flex:0 0 10px;
}
.mp-pil{
  display:inline-block; padding:.12rem .5rem; border-radius:999px;
  background:var(--mp,var(--ink-400)); color:#fff;
  font-size:.68rem; font-weight:700; letter-spacing:.02em;
}
/* baris tabel diberi garis tepi berwarna marketplace-nya */
tr.mp-baris > td:first-child{
  border-left:3px solid var(--mp,transparent);
  padding-left:.65rem;
}
.mp-bar{
  height:6px; border-radius:999px; background:var(--line-soft);
  overflow:hidden; min-width:60px;
}
.mp-bar > span{display:block; height:100%; background:var(--mp,var(--brand-600))}

/* ============ IDENTITAS WARNA PLATFORM MEDIA SOSIAL ============ */
/* TikTok hitam, YouTube merah, Instagram pink, Facebook biru —
   ditetapkan tim konten. Sumber warna: src/utils/platform.js */
.plat{
  display:inline-block; padding:.14rem .5rem; border-radius:999px;
  background:var(--pl,var(--ink-400)); color:#fff;
  font-size:.66rem; font-weight:700; letter-spacing:.03em; white-space:nowrap;
}
.plat-titik{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--pl,var(--ink-400)); margin-right:.35rem; vertical-align:-1px;
}
tr.plat-baris > td:first-child{border-left:3px solid var(--pl,transparent); padding-left:.65rem}


/* ==================== SOP & SISTEM KERJA ==================== */
/* Warna tim datang dari src/config/sop.js lewat --sop, jadi satu daftar
   warna dipakai bersama oleh kartu, hero, rel langkah, dan tab. */

.sop-hero{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:1.15rem 1.35rem; border-radius:16px; margin-bottom:1rem;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--sop,var(--brand-700)) 38%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, var(--sop,var(--brand-700)) 0%, color-mix(in srgb, var(--sop,var(--brand-700)) 72%, #0B1220) 100%);
  color:#fff; box-shadow:var(--sh-2);
}
.sop-hero h2{margin:0; color:#fff; font-size:1.12rem; letter-spacing:-.01em}
.sop-hero p{margin:.22rem 0 0; color:rgba(255,255,255,.86); font-size:.82rem; max-width:64ch}
.sop-hero-isi{flex:1; min-width:210px}
.sop-hero .btn{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); color:#fff}
.sop-hero .btn:hover{background:rgba(255,255,255,.26); border-color:rgba(255,255,255,.5); color:#fff}
.sop-hero-angka{display:flex; gap:1.1rem; flex-wrap:wrap; margin-top:.6rem; font-size:.75rem}
.sop-hero-angka span{color:rgba(255,255,255,.82)}
.sop-hero-angka strong{
  display:block; font-size:1.15rem; font-weight:800; color:#fff; line-height:1.15;
  font-variant-numeric:tabular-nums;
}

.sop-ikon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:0 0 40px; border-radius:12px;
  background:var(--sop,var(--brand-700)); color:#fff;
}
.sop-ikon svg{width:20px; height:20px}
.sop-ikon.besar{
  width:52px; height:52px; flex-basis:52px; border-radius:15px;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28);
}
.sop-ikon.besar svg{width:25px; height:25px}

.sop-kartu{
  position:relative; display:block; text-decoration:none; color:inherit; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--sh-1); transition:box-shadow .16s, transform .16s, border-color .16s;
}
.sop-kartu:hover{box-shadow:var(--sh-3); transform:translateY(-2px); border-color:var(--sop)}
.sop-kartu.belum{background:var(--surface-2)}
.sop-kartu-pita{height:4px; background:linear-gradient(90deg, var(--sop) 0%, color-mix(in srgb, var(--sop) 45%, #fff) 100%)}
.sop-kartu-isi{padding:1rem 1.1rem 1.15rem}

.sop-kepala{display:flex; align-items:flex-start; gap:.75rem}
.sop-kepala h3{font-size:.95rem; margin:0; color:var(--ink-900)}
.sop-kepala p{font-size:.775rem; margin:.18rem 0 0; color:var(--ink-500)}

.sop-lencana{
  padding:.2rem .55rem; border-radius:999px; font-size:.66rem; font-weight:700;
  background:var(--line-soft); color:var(--ink-500); white-space:nowrap; letter-spacing:.02em;
}
.sop-lencana.siap{background:color-mix(in srgb, var(--sop) 14%, #fff); color:var(--sop)}

.sop-ringkas{list-style:none; margin:.85rem 0 0; padding:0; display:grid; gap:.3rem}
.sop-ringkas li{display:flex; align-items:center; gap:.5rem; font-size:.775rem; color:var(--ink-600)}
.sop-ringkas .n{
  flex:0 0 19px; height:19px; border-radius:6px; display:inline-flex;
  align-items:center; justify-content:center; font-size:.63rem; font-weight:800;
  background:color-mix(in srgb, var(--sop) 13%, #fff); color:var(--sop);
}
.sop-modul{margin-top:.85rem; font-size:.75rem}
.sop-modul-pil{display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.4rem}
.sop-modul-pil span{padding:.18rem .5rem; border-radius:7px; background:var(--line-soft); color:var(--ink-600); font-size:.7rem}

.sop-tab{display:flex; gap:.35rem; flex-wrap:wrap}
.sop-tab a{
  padding:.36rem .75rem; border-radius:999px; font-size:.765rem; text-decoration:none;
  border:1px solid var(--line); color:var(--ink-600); background:var(--surface); white-space:nowrap;
  transition:border-color .14s, color .14s, background .14s;
}
.sop-tab a:hover{border-color:var(--sop); color:var(--sop)}
.sop-tab a.on{background:var(--sop); border-color:var(--sop); color:#fff; font-weight:600}

.sop-pic{
  display:flex; flex-direction:column; gap:.15rem; padding:.7rem .85rem;
  border:1px solid var(--line); border-left:3px solid var(--sop,var(--brand-700));
  border-radius:10px; background:var(--surface-2);
}
.sop-pic strong{font-size:.86rem}
.sop-pic .muted{font-size:.75rem}
.sop-pic-blok{margin-bottom:1.1rem}
.sop-pic-judul{display:flex; gap:.6rem; align-items:baseline; margin-bottom:.5rem; font-size:.85rem}
.sop-plat{border:1px solid var(--line); border-top:3px solid var(--pl); border-radius:11px; overflow:hidden; background:var(--surface)}
.sop-plat-kepala{
  display:flex; align-items:center; justify-content:space-between; gap:.4rem;
  padding:.45rem .6rem; background:color-mix(in srgb, var(--pl) 7%, #fff); font-size:.7rem;
}
.sop-plat ul{margin:0; padding:.5rem .6rem .6rem 1.5rem; font-size:.745rem; line-height:1.5}
.sop-plat li{margin:.1rem 0; word-break:break-word}

.sop-langkah{
  display:flex; gap:.9rem; padding:1rem .2rem 1rem .9rem; margin-bottom:.5rem;
  border:1px solid var(--line); border-left:4px solid var(--sop,var(--brand-700));
  border-radius:12px; background:var(--surface);
}
.sop-no{
  flex:0 0 32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--sop) 0%, color-mix(in srgb, var(--sop) 68%, #0B1220) 100%);
  color:#fff; font-weight:800; font-size:.85rem;
}
.sop-isi{flex:1; min-width:0}
.sop-isi h4{margin:.3rem 0 .3rem; font-size:.9rem; color:var(--ink-900)}
.sop-isi p{margin:0 0 .45rem; font-size:.82rem; color:var(--ink-600)}
.sop-kolom{display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; margin:.4rem 0}
.sop-kolom .muted{font-size:.72rem}
.sop-kolom code{
  font-size:.7rem; padding:.14rem .45rem; border-radius:6px;
  background:color-mix(in srgb, var(--sop) 9%, #fff); color:var(--sop); font-weight:600;
}
.sop-tujuan{margin:.4rem 0; padding-left:1.1rem; font-size:.79rem; color:var(--ink-600)}
.sop-tujuan li{margin:.14rem 0}
.sop-tambahan{font-size:.76rem; margin:.35rem 0 .5rem}

.sop-alur{display:flex; flex-direction:column; gap:.45rem}
.sop-alur-item{
  display:flex; align-items:center; gap:.9rem; padding:.6rem .85rem; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-left:4px solid var(--sop,var(--brand-700)); border-radius:10px;
  background:var(--surface); transition:background .14s, transform .14s;
}
.sop-alur-item:hover{background:color-mix(in srgb, var(--sop) 5%, #fff); transform:translateX(2px)}
.sop-alur-item .jam{
  flex:0 0 116px; font-weight:800; font-size:.78rem; color:var(--sop,var(--brand-700));
  font-variant-numeric:tabular-nums;
}
.sop-alur-item .judul{font-size:.83rem}

.sop-kesimpulan{margin:0; padding-left:1.15rem; font-size:.82rem; color:var(--ink-600)}
.sop-kesimpulan li{margin:.25rem 0}

/* bantuan kecil di bawah dropdown akun yang menyaring menurut PIC */
.bantuan-saring{display:block; margin-top:.3rem; font-size:.72rem}

@media (max-width:780px){
  .sop-hero{padding:1rem}
  .sop-hero .btn{width:100%; justify-content:center}
  .sop-alur-item{flex-direction:column; align-items:flex-start; gap:.15rem}
  .sop-alur-item .jam{flex:none}
  .sop-langkah{gap:.65rem; padding:.85rem .2rem .85rem .7rem}
}
@media print{
  .sop-hero{background:none; color:#000; border:1px solid #ccc; box-shadow:none}
  .sop-hero h2,.sop-hero-angka strong{color:#000}
  .sop-hero p,.sop-hero-angka span{color:#444}
  .sop-langkah{break-inside:avoid}
}

/* ============ INPUT HARIAN TIM KONTEN ============ */
/* Tabel kerja: sel berisi input, jadi paddingnya dirapatkan dan
   kontrolnya dibuat selebar selnya supaya mudah ditekan. */
table.harian td{padding:.45rem .5rem; vertical-align:top}
table.harian input,
table.harian select{
  width:100%; min-height:34px; padding:.3rem .45rem; font-size:.78rem;
  border:1px solid var(--line); border-radius:7px; background:var(--surface);
}
table.harian input:focus,
table.harian select:focus{border-color:var(--brand-600); outline:2px solid var(--brand-100)}
table.harian select.tahap-selesai{background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line); font-weight:600}
table.harian select.tahap-proses{background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line); font-weight:600}
table.harian select:disabled,
table.harian input[readonly]{background:var(--surface-2); color:var(--ink-500)}

/* batang kemajuan pengisian slot harian */
.maju{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-top:.65rem}
.maju-bar{
  flex:1; min-width:150px; height:8px; border-radius:999px;
  background:var(--line-soft); overflow:hidden;
}
.maju-bar > span{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--brand-600), var(--brand-500, #2E9E76));
}
.maju .muted{font-size:.78rem}

@media (max-width:780px){
  table.harian td{padding:.35rem .35rem}
  table.harian input, table.harian select{font-size:.74rem; min-height:38px}
}

/* bagian opsional pada form input manual konten */
.field.lengkap > summary{
  cursor:pointer; font-size:.78rem; font-weight:600; color:var(--ink-600);
  padding:.45rem .6rem; border:1px dashed var(--line); border-radius:9px;
  list-style:none; user-select:none;
}
.field.lengkap > summary::-webkit-details-marker{display:none}
.field.lengkap > summary::before{content:'＋ '; color:var(--brand-600); font-weight:700}
.field.lengkap[open] > summary::before{content:'－ '}
.field.lengkap > summary:hover{border-color:var(--brand-600); color:var(--brand-700)}
.field small.muted{display:block; margin-top:.22rem; font-size:.7rem; line-height:1.35}
.field input[readonly]{background:var(--surface-2); color:var(--ink-600)}

/* ============ LENCANA PLATFORM DENGAN LAMBANG ============ */
.plat{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.16rem .5rem .16rem .35rem; border-radius:999px;
  background:color-mix(in srgb, var(--pl,var(--ink-400)) 11%, #fff);
  color:var(--pl,var(--ink-500));
  font-size:.68rem; font-weight:700; letter-spacing:.01em; white-space:nowrap;
  border:1px solid color-mix(in srgb, var(--pl,var(--ink-400)) 22%, #fff);
}
.plat.pekat{background:var(--pl); color:#fff; border-color:var(--pl)}
.plat-logo{width:13px; height:13px; flex:0 0 13px}
.plat-titik{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--pl,var(--ink-400)); margin-right:.35rem; vertical-align:-1px;
}
tr.plat-baris > td:first-child{border-left:3px solid var(--pl,transparent); padding-left:.65rem}

/* ============ LINGKARAN CAPAIAN PER MEDIA ============ */
.cincin-baris{display:flex; gap:1rem; flex-wrap:wrap}
.cincin{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:.15rem; padding:.7rem .9rem; min-width:118px; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:13px; background:var(--surface);
  transition:border-color .15s, transform .15s;
}
.cincin:hover{border-color:var(--pl); transform:translateY(-2px)}
.cincin-svg{width:64px; height:64px; transform:rotate(-90deg)}
.cincin-alas{fill:none; stroke:var(--line-soft); stroke-width:7}
.cincin-isi{
  fill:none; stroke:var(--pl); stroke-width:7; stroke-linecap:round;
  transition:stroke-dashoffset .4s ease;
}
.cincin-angka{
  position:absolute; top:1.72rem; font-size:.92rem; font-weight:800;
  color:var(--pl); font-variant-numeric:tabular-nums;
}
.cincin-nama{
  display:inline-flex; align-items:center; gap:.28rem;
  font-size:.76rem; font-weight:700; color:var(--ink-900); margin-top:.15rem;
}
.cincin-nama .plat-logo{color:var(--pl); width:14px; height:14px}
.cincin-ket{font-size:.68rem; color:var(--ink-500); font-variant-numeric:tabular-nums}

/* ==================== PAPAN KANBAN ==================== */
.papan-saring{display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; margin-top:.6rem}
.papan-saring .pisah{width:1px; height:20px; background:var(--line); margin:0 .3rem}
.pil{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.3rem .65rem; border-radius:999px; font-size:.74rem; text-decoration:none;
  border:1px solid var(--line); color:var(--ink-600); background:var(--surface); white-space:nowrap;
}
.pil:hover{border-color:var(--ink-400)}
.pil.on{background:var(--brand-700); border-color:var(--brand-700); color:#fff; font-weight:600}
.pil.plat-pil .plat-logo{width:13px; height:13px; color:var(--pl)}
.pil.plat-pil:hover{border-color:var(--pl); color:var(--pl)}
.pil.plat-pil.on{background:var(--pl); border-color:var(--pl); color:#fff}
.pil.plat-pil.on .plat-logo{color:#fff}

.papan{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px, 1fr);
  gap:.7rem; overflow-x:auto; padding-bottom:.6rem; margin-bottom:1rem;
  scroll-snap-type:x proximity;
}
.papan-kolom{
  scroll-snap-align:start;
  background:var(--surface-2); border:1px solid var(--line);
  border-top:3px solid var(--kol); border-radius:13px;
  display:flex; flex-direction:column; min-height:170px;
}
.papan-kolom > header{
  display:flex; align-items:center; gap:.45rem;
  padding:.65rem .75rem .25rem; font-size:.82rem;
}
.papan-kolom > header .titik{width:9px; height:9px; border-radius:50%; background:var(--kol); flex:0 0 9px}
.papan-kolom > header .jml{
  margin-left:auto; background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:0 .45rem; font-size:.7rem; color:var(--ink-500);
  font-variant-numeric:tabular-nums;
}
.papan-ket{margin:0; padding:0 .75rem .5rem; font-size:.68rem; color:var(--ink-500)}
.papan-isi{display:flex; flex-direction:column; gap:.45rem; padding:0 .55rem .6rem; flex:1}
.papan-kosong{text-align:center; color:var(--ink-400); padding:.9rem 0; font-size:.8rem}

.kartu{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--pl); border-radius:10px; padding:.55rem .6rem;
  display:flex; flex-direction:column; gap:.3rem; box-shadow:var(--sh-1);
}
.kartu-atas{display:flex; align-items:center; justify-content:space-between; gap:.4rem}
.kartu-tgl{font-size:.68rem; color:var(--ink-500); font-variant-numeric:tabular-nums}
.kartu-judul{font-size:.79rem; font-weight:600; line-height:1.35; color:var(--ink-900)}
.kartu-kaki{display:flex; gap:.4rem; flex-wrap:wrap; font-size:.69rem; color:var(--ink-500)}
.kartu-akun{font-weight:600}
.kartu-pic::before{content:'· '}
.kartu-jenis{
  align-self:flex-start; font-size:.63rem; font-weight:700; letter-spacing:.02em;
  padding:.1rem .4rem; border-radius:5px; background:var(--line-soft); color:var(--ink-600);
}
.kartu-pindah select{
  width:100%; font-size:.7rem; padding:.22rem .35rem; border-radius:7px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-600);
}
.kartu-pindah select:hover{border-color:var(--pl); color:var(--pl)}
.kartu-link{font-size:.69rem; color:var(--pl); text-decoration:none}
.kartu-link:hover{text-decoration:underline}

@media (max-width:780px){
  .papan{grid-auto-columns:minmax(78vw, 1fr)}
  .cincin{flex:1 1 calc(50% - 1rem); min-width:0}
}
@media print{
  .papan{grid-auto-flow:row; grid-auto-columns:auto; overflow:visible}
  .papan-kolom{break-inside:avoid}
}

/* ---- kolom Platform di Input Harian: lencana, bukan kolom teks ---- */
.plat-tampil{
  display:flex; align-items:center; min-height:38px;
  padding:.3rem .55rem; border-radius:var(--radius, 8px);
  background:var(--surface-2); border:1px solid var(--line);
}
.plat-tampil .plat{font-size:.74rem; padding:.24rem .6rem .24rem .45rem}
.plat-tampil .plat-logo{width:15px; height:15px; flex:0 0 15px}
.plat-tampil .plat-kosong{font-size:.78rem}
.plat-tampil [hidden]{display:none}