@font-face { font-family:'Fraunces'; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/fraunces.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/inter.woff2') format('woff2'); }

:root {
  --paper:#f7f5f1;
  --surface:#ffffff;
  --ink:#17181c;
  --muted:#6b7280;
  --faint:#6a707c;
  --navy:#16243d;
  --navy-2:#22355a;
  --noir:#191a1f;
  --noir-2:#0c0d11;
  --noir-3:#23252c;
  --accent:#a8823e;
  --accent-2:#8a6a34;
  --line:#e4e0d9;
  --line-2:#efebe4;
  --green:#2f7a54;
  --red:#b3424e;
  --blue:#3a5b8f;
  --radius:16px;
  --shadow: 0 1px 2px rgba(23,24,28,.04), 0 10px 30px rgba(23,24,28,.05);
  --shadow-lg: 0 24px 50px rgba(23,24,28,.12);
  --font-display:'Fraunces', Georgia, serif;
  --head: var(--font-display);
  --font-body:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Menlo', monospace;
  /* Skala tipografi kanonik (presisi & konsisten di seluruh sistem) */
  --fs-micro:10.5px;   /* label mikro UPPERCASE (th tabel, label field, .k) */
  --fs-xs:0.78rem;     /* teks tersier (waktu, keterangan kecil) */
  --fs-sm:0.85rem;     /* teks sekunder (meta, nama kecil) */
  --fs-base:0.9rem;    /* teks isi utama (paragraf, pesan diskusi, sel tabel) */
  --fs-md:0.95rem;     /* teks data menonjol (nama, judul kartu) */
  --fs-lg:1.05rem;     /* judul kartu / panel kecil */
  --fs-title:16px;     /* judul panel/widget */
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; overflow-x:hidden; max-width:100%; }
body.overlay-open { overflow:hidden; }
/* Jaring pengaman anti-luber horizontal (semua ukuran layar) */
img, video, iframe { max-width:100%; }
pre, code { overflow-wrap:anywhere; }
.modal, .modal-body, .panel, .widget, .mon-panel, .content, .main-col { min-width:0; }
body { font-family:var(--font-body); color:var(--ink); background:var(--paper); font-size:14.5px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--ink); text-decoration:none; }
a:hover { color:var(--accent-2); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--ink); line-height:1.2; margin:0 0 .5rem; }
p { margin:0 0 1rem; }
img { max-width:100%; }
[x-cloak] { display:none !important; }

.container { max-width:1160px; margin:0 auto; padding:0 24px; }

/* ===== BUTTONS ===== */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:10px; border:1px solid transparent; font-weight:600; font-size:13.5px; cursor:pointer; line-height:1.2; transition:transform .18s cubic-bezier(.22,1,.36,1), background .18s, color .18s, border-color .18s; background:var(--noir); color:#fff; }
.btn:active { transform:scale(.98); }
.btn:hover { background:var(--noir-2); color:#fff; }
.btn-gold { background:var(--accent); color:#fff; }
.btn-gold:hover { background:var(--accent-2); color:#fff; }
.btn-outline { background:transparent; border:1px solid var(--line); color:var(--ink); }
.btn-outline:hover { border-color:var(--ink); color:var(--ink); }
.btn-ghost { background:transparent; color:var(--ink); }
.btn-ghost:hover { background:rgba(25,26,31,.06); }

.btn-back { display:inline-flex; align-items:center; gap:8px; padding:5px 16px 5px 5px; border:1px solid var(--accent); background:linear-gradient(135deg, #c99d5e 0%, var(--accent) 55%, var(--accent-2) 100%); border-radius:999px; cursor:pointer; font-family:var(--font-body); font-weight:600; font-size:12.5px; color:#fff; box-shadow:0 2px 10px rgba(181,138,76,.32); transition:all .22s cubic-bezier(.22,1,.36,1); }
.btn-back-ico { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(2px); transition:transform .22s cubic-bezier(.22,1,.36,1), background .2s; box-shadow:inset 0 1px 2px rgba(255,255,255,.25); }
.btn-back-ico i { transition:transform .22s cubic-bezier(.22,1,.36,1); }
.btn-back-txt { padding-right:2px; letter-spacing:.02em; text-shadow:0 1px 2px rgba(120,84,32,.25); }
.btn-back:hover { background:linear-gradient(135deg, #d4a968 0%, var(--accent) 55%, #a87d3f 100%); transform:translateY(-1px); box-shadow:0 5px 16px rgba(181,138,76,.42); color:#fff; border-color:#c99d5e; }
.btn-back:hover .btn-back-ico { background:rgba(255,255,255,.28); }
.btn-back:hover .btn-back-ico i { transform:translateX(-2px); }
.btn-back:active { transform:translateY(0) scale(.97); box-shadow:0 1px 5px rgba(181,138,76,.3); }
.btn-sm { padding:6px 12px; font-size:12.5px; }
.btn-danger { background:var(--red); color:#fff; }
.btn-wa { background:#1f9d55; color:#fff; }
.btn-wa:hover { background:#187a42; color:#fff; }
.btn[disabled] { opacity:.55; cursor:not-allowed; }

.alert { padding:12px 16px; border-radius:12px; font-size:13.5px; margin-bottom:16px; }
.alert-error { background:#fbf1f2; color:var(--red); border:1px solid #f2d7da; }
.alert-success { background:#eef7f0; color:var(--green); border:1px solid #d2e8d9; }

.field { margin-bottom:16px; }
.field label { display:block; font-weight:600; font-size:var(--fs-micro); margin-bottom:6px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }

/* ===== STANDAR FORM CONTROL (seragam & presisi — berlaku semua form) ===== */
.field input, .field textarea, .field select,
.input, .toolbar input, .toolbar select,
.search-box input, .kanban-person, .multi-users select,
.chat-input .input, .disc-input .input, .pesan-reply-form textarea {
  font-family:var(--font-body); font-size:14px; line-height:1.45; font-weight:400;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:10px; padding:10px 13px;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.field input, .field textarea, .field select { width:100%; }
.field input::placeholder, .field textarea::placeholder, .input::placeholder,
.toolbar input::placeholder, .search-box input::placeholder { color:var(--faint); opacity:1; }
.field input:focus, .field textarea:focus, .field select:focus,
.input:focus, .toolbar input:focus, .toolbar select:focus,
.kanban-person:focus, .multi-users select:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(181,138,76,.15);
}
.field select, .input, .toolbar select, .kanban-person, .multi-users select { -webkit-appearance:none; appearance:none; }
.field select, .toolbar select, .multi-users select, select.input, select.kanban-person {
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:34px;
}
/* checkbox/radio tetap native (tidak memakai gaya kotak form) */
input[type=checkbox], input[type=radio] {
  width:auto; padding:0; border:none; border-radius:0; background:none; box-shadow:none; accent-color:var(--accent);
}
/* Varian resmi standar form (bukan gaya ad-hoc) */
.input-mono, .field input.input-mono, .field textarea.input-mono, .field select.input-mono { font-family:var(--font-mono); }
.input-sm, .field input.input-sm, .field select.input-sm, select.input.input-sm { font-size:.8rem; padding:6px 9px; border-radius:8px; }
select.input-sm { padding-right:28px; background-position:right 8px center; }
.multi-users .multi-users-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.multi-chip {
  display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:999px;
  background:rgba(181,138,76,.12); border:1px solid #eee4cf; color:var(--accent-2); font-size:.8rem; font-weight:600;
}
.multi-chip button { background:none; border:none; cursor:pointer; color:#9a7030; font-size:14px; line-height:1; padding:0 2px; }
.multi-chip button:hover { color:var(--red); }
.multi-users select { width:100%; }
.ref-add-wrap { display:flex; gap:8px; align-items:stretch; }
.ref-add-wrap select { flex:1; min-width:0; }
.ref-add-btn { flex:none; white-space:nowrap; }
.ref-locked { display:flex; align-items:center; gap:8px; flex:1; min-width:0; background:var(--paper); color:var(--muted); cursor:not-allowed; }
.ref-locked svg { color:var(--accent-2); flex:none; }
.ref-locked span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:520px) {
  .ref-add-wrap { flex-direction:column; }
  .ref-add-btn { width:100%; justify-content:center; }
}
.form-2col { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
/* iOS: kontrol form WAJIB >=16px di HP agar Safari tidak auto-zoom saat fokus (penyebab layar "goyang") */
@media (max-width:720px) {
  .field input:not([type="checkbox"]):not([type="radio"]),
  .field textarea,
  .input:not(select):not(.input-sm),
  .ksheet-ta,
  .search-box input,
  .chat-input .input,
  .disc-input .input,
  .pesan-reply-form textarea { font-size:16px; }
}

/* ===== LOGIN ===== */
.login-screen { min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; background:
  radial-gradient(800px 380px at 8% -8%, rgba(181,138,76,.38), transparent 62%),
  radial-gradient(700px 380px at 100% 110%, rgba(58,91,143,.30), transparent 60%),
  radial-gradient(460px 280px at 70% 12%, rgba(181,138,76,.22), transparent 62%),
  linear-gradient(180deg, #fdfcf9, #eee9dd); padding:24px; position:relative; overflow:hidden; }
.login-screen::before {
  content:''; position:absolute; inset:0; opacity:.7; pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(181,138,76,.26) 1px, transparent 1.4px);
  background-size: 26px 26px;
}
.login-screen::after {
  content:''; position:absolute; left:50%; top:50%; width:860px; height:860px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(181,138,76,.10), transparent 62%);
  pointer-events:none; z-index:0;
}
.login-wrap { position:relative; z-index:1; width:100%; max-width:460px; display:flex; flex-direction:column; align-items:center; }
.login-card {
  position:relative; width:100%;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:26px;
  box-shadow:0 24px 60px rgba(25,26,31,.12), 0 2px 8px rgba(25,26,31,.05);
  padding:46px 42px 30px; overflow:hidden;
}
.login-accent {
  position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.login-brand { display:flex; justify-content:center; margin-bottom:18px; }
.login-logo-full {
  max-width:280px; width:100%; height:auto; display:block;
  filter:drop-shadow(0 8px 18px rgba(25,26,31,.12));
}
.login-title { font-family:var(--head); font-size:1.5rem; font-weight:700; color:var(--ink); text-align:center; line-height:1.3; }
.login-sub { text-align:center; color:var(--muted); font-size:12.5px; letter-spacing:.06em; margin:8px 0 26px; }
.login-alert { margin-bottom:18px; }
.login-field { margin-bottom:16px; }
.login-field label { display:block; font-size:12px; font-weight:600; color:var(--ink); margin-bottom:7px; letter-spacing:.02em; }
.login-input {
  display:flex; align-items:center; gap:10px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:0 14px; transition:border-color .2s, box-shadow .2s;
}
.login-input i { color:var(--faint); flex:none; }
.login-input input { flex:1; border:none; background:transparent; padding:13px 0; font-size:14px; color:var(--ink); outline:none; min-width:0; }
.login-input input::placeholder { color:var(--faint); }
.login-input:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px rgba(181,138,76,.15); }
.login-btn {
  width:100%; justify-content:center; gap:10px;
  background:linear-gradient(135deg,#c99d5e,#b58a4c 55%,#966f35);
  border:none; color:#fff; font-family:var(--font-body); font-weight:700; font-size:14.5px;
  padding:14px 20px; border-radius:12px; cursor:pointer; margin-top:8px;
  box-shadow:0 10px 24px rgba(181,138,76,.35); transition:transform .15s, box-shadow .15s;
}
.login-btn:hover { transform:translateY(-1px); box-shadow:0 14px 30px rgba(181,138,76,.45); }
.login-foot { margin-top:20px; text-align:center; font-size:12.5px; }
.login-foot a { color:var(--muted); text-decoration:none; }
.login-foot a:hover { color:var(--accent); }
.login-lupa { text-align:center; margin-top:14px; }
.login-lupa button {
  background:none; border:none; cursor:pointer; color:var(--muted);
  font-size:12.5px; text-decoration:underline; text-underline-offset:3px;
}
.login-lupa button:hover { color:var(--accent-2); }
.login-lupa-sep { color:var(--line); margin:0 4px; }
.logout-ico {
  width:64px; height:64px; border-radius:50%; margin:0 auto 16px;
  background:linear-gradient(135deg,#d4ab6a,#b58a4c 55%,#8f6a2f); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(181,138,76,.35);
}
.modal-logout { max-width:420px; }
.modal-konfirmasi { max-width:420px; }
.konfirmasi-ico {
  width:56px; height:56px; border-radius:16px; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
}
.konfirmasi-ico.danger { background:#fbeced; border:1px solid #f2d3d6; color:#b3424e; }
.konfirmasi-ico.danger i { stroke-width:2; }
.konfirmasi-ico.netral { background:#faf4e6; border:1px solid #eee0c6; color:var(--accent-2); }
.btn-logout { background:var(--red); color:#fff; }
.btn-logout:hover { background:#a33a44; color:#fff; }
.lupa-box { margin-top:16px; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.lupa-head { font-weight:700; font-size:.95rem; color:var(--ink); margin-bottom:2px; }
.lupa-sub { font-size:.78rem; color:var(--muted); margin-bottom:16px; line-height:1.5; }
.lupa-msg { margin-top:10px; font-size:.8rem; display:none; line-height:1.5; }
.lupa-back {
  background:none; border:none; cursor:pointer; color:var(--muted);
  font-size:12px; font-weight:600; padding:0; margin-bottom:10px;
  display:inline-flex; align-items:center; gap:5px;
}
.lupa-back:hover { color:var(--accent-2); }
.lupa-mini { font-size:.78rem; color:var(--faint); margin-top:4px; line-height:1.4; }
.lupa-passnote {
  display:flex; align-items:flex-start; gap:7px; margin-top:8px;
  font-size:.78rem; color:var(--faint); line-height:1.55; background:var(--surface);
  border:1px dashed var(--line); border-radius:9px; padding:9px 11px;
}
.lupa-passnote i { color:var(--accent-2); margin-top:1px; }
.login-site-chip {
  display:inline-flex; align-items:center; gap:7px;
  color:var(--muted); font-size:12.5px; font-weight:600;
  border:1px solid var(--line); border-radius:999px; padding:7px 15px;
  background:var(--surface); transition:.15s; text-decoration:none;
}
.login-site-chip i { color:var(--accent-2); }
.login-site-chip:hover { border-color:var(--accent); color:var(--accent-2); box-shadow:0 4px 12px rgba(181,138,76,.15); }
.login-foot { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.login-input-pass input { padding-right:36px; }
.pw-toggle {
  background:none; border:none; cursor:pointer; color:var(--faint);
  display:flex; align-items:center; padding:0 6px;
}
.pw-toggle:hover { color:var(--accent-2); }
.login-copy { margin-top:18px; color:var(--faint); font-size:11px; letter-spacing:.05em; }

/* ===== SHELL / RAIL ===== */
.shell { display:flex; min-height:100vh; min-height:100dvh; }
.main-col { display:flex; flex-direction:column; flex:1; min-width:0; max-width:100%; }
.rail { width:252px; flex:none; background:var(--paper); color:var(--ink); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; transition:width .28s cubic-bezier(.22,1,.36,1); border-right:1px solid var(--line); }
.rail-brand { display:flex; align-items:center; justify-content:center; padding:20px 12px 16px; border-bottom:1px solid var(--line); position:relative; }
.rail-logo-img { width:100%; max-width:214px; height:auto; display:block; background:#fff; border-radius:10px; padding:7px; box-shadow:0 6px 18px rgba(12,13,17,.10); }
.rail-mark { display:none; width:44px; height:44px; border-radius:12px; background:var(--accent); color:#0c0d11; object-fit:contain; padding:4px; box-shadow:0 6px 18px rgba(12,13,17,.12); }
.rail-logo { width:40px; height:40px; flex:none; }
.rail-logo svg { width:100%; height:100%; }
.rail-brand-txt { display:flex; flex-direction:column; line-height:1.15; }
.rail-brand-txt span { font-size:9px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }
.rail-brand-txt strong { font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--ink); letter-spacing:.02em; }
.rail-nav { flex:1; overflow-y:auto; padding:16px 12px; display:flex; flex-direction:column; gap:2px; }
.rail-nav::-webkit-scrollbar { width:0; }
.rail-item { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px; color:var(--muted); font-size:13.5px; font-weight:500; border:0; background:none; cursor:pointer; text-align:left; width:100%; transition:.15s; font-family:var(--font-body); }
.rail-badge { margin-left:auto; background:var(--accent); color:#0c0d11; font-size:.68rem; font-weight:700; min-width:18px; height:18px; padding:0 5px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; }
.rail.collapsed .rail-badge { display:none; }
.rail-item i, .rail-item svg { width:20px; height:20px; flex:none; opacity:.9; }
.rail-item:hover { background:rgba(25,26,31,.06); color:var(--ink); }
.rail-item.active { background:var(--accent); color:#0c0d11; font-weight:700; }
.rail-group { display:flex; flex-direction:column; gap:2px; }
.rail-parent { color:var(--ink); font-weight:600; }
.rail-parent .rail-caret { transition:transform .2s; color:var(--faint); }
.rail-parent.open .rail-caret { transform:rotate(90deg); color:var(--accent); }
.rail-parent.open { background:rgba(25,26,31,.06); }
.rail-children { display:flex; flex-direction:column; gap:2px; margin:2px 0 4px; padding-left:12px; border-left:1px solid var(--line); margin-left:15px; }
.rail-child { font-size:13px; padding:8px 12px; }
.rail-user { display:flex; align-items:center; gap:10px; }
.rail-avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex:none; }
.rail-user-txt { flex:1; min-width:0; }
.rail-user-txt strong { display:block; color:var(--ink); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail-user-txt span { font-size:11px; color:var(--muted); text-transform:capitalize; }
.rail-logout { border:0; background:rgba(25,26,31,.06); color:var(--muted); border-radius:8px; padding:7px; cursor:pointer; display:flex; align-items:center; transition:.15s; }
.rail-logout:hover { background:var(--red); color:#fff; }

/* ===== RAIL COLLAPSED (icon rail, desktop) ===== */
.rail.collapsed { width:74px; overflow:hidden; }
.rail.collapsed .rail-brand { padding:18px 0; justify-content:center; border-bottom:1px solid var(--line); }
.rail.collapsed .rail-logo-img { display:none; }
.rail.collapsed .rail-mark { display:block; }
.rail.collapsed .rail-nav { padding:14px 10px; align-items:center; gap:8px; overflow:hidden; }
.rail.collapsed .rail-item { justify-content:center; padding:10px 0; width:44px; white-space:nowrap; overflow:hidden; text-overflow:clip; }
.rail.collapsed .rail-item span { display:none; }
.rail.collapsed .rail-section { display:none; }
.rail.collapsed .rail-children { display:none; }
.rail.collapsed .rail-item i, .rail.collapsed .rail-item svg { width:20px; height:20px; flex:none; }
.rail.collapsed .rail-user { justify-content:center; }
.rail.collapsed .rail-user-txt { display:none; }

.content { flex:1; min-width:0; max-width:100%; padding:28px 44px 52px; }

/* ===== APP BAR ===== */
.appbar { display:flex; align-items:center; gap:12px; padding:12px 40px 14px; position:sticky; top:0; z-index:40; background:#fff; color:var(--ink); border-bottom:1px solid var(--line); pointer-events:auto; }
.icon-btn { padding:9px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(12,13,17,.08); flex:none; }
.icon-btn:hover { background:var(--paper); border-color:var(--accent); color:var(--ink); }
.icon-btn i { width:20px; height:20px; display:block; }
.appbar-title { font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--navy); letter-spacing:-.01em; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appbar-brand { display:none; align-items:center; gap:8px; text-decoration:none; color:#fff; }
.brand-logo { height:30px; width:auto; background:#fff; border-radius:5px; padding:2px 6px; }

/* ===== PROFILE (kanan appbar) ===== */
.appbar-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.profile-chip { display:flex; align-items:center; gap:9px; padding:5px 6px; border:1px solid var(--line); border-radius:999px; background:var(--paper); box-shadow:0 2px 6px rgba(12,13,17,.05); flex:none; }
.profile-avatar-img { width:30px; height:30px; border-radius:50%; object-fit:cover; flex:none; }
.profile-avatar { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--accent); color:#fff; font-size:12.5px; font-weight:700; flex:none; }
.profile-meta { display:flex; flex-direction:column; line-height:1.1; text-align:left; padding-right:6px; }
.profile-meta strong { font-size:12.5px; font-weight:600; color:var(--ink); }
.profile-meta em { font-size:11px; font-style:normal; color:var(--muted); }
@media (max-width:560px) { .profile-meta { display:none; } }
.appbar-logout { color:#dc2626; }
.appbar-logout:hover { border-color:#fecaca; background:#fef2f2; color:#b91c1c; }
.profile-chip { cursor:pointer; transition:.15s; }
.profile-chip:hover, .profile-chip.open { border-color:var(--accent); box-shadow:0 2px 8px rgba(181,138,76,.2); }
.acct-wrap { position:relative; }
.acct-menu {
  position:absolute; top:calc(100% + 10px); right:0; z-index:130;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-lg); min-width:250px; padding:10px;
}
.acct-head { display:flex; align-items:center; gap:11px; padding:6px 8px 10px; }
.acct-av { width:40px; height:40px; font-size:15px; object-fit:cover; }
.acct-name { font-weight:700; font-size:.9rem; color:var(--ink); line-height:1.3; }
.acct-role { font-size:.78rem; color:var(--muted); margin-top:1px; }
.acct-divider { height:1px; background:var(--line); margin:4px 6px 6px; }
.acct-item {
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 12px; background:none; border:none; border-radius:9px;
  cursor:pointer; font-size:.85rem; color:var(--ink); font-weight:500;
}
.acct-item:hover { background:var(--paper); }
.acct-item i { color:var(--accent-2); }
.acct-logout { color:var(--red); }
.acct-logout i { color:var(--red); }
.acct-logout:hover { background:#fdf1f2; }
.ps-avatar-row { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:16px; }
.ps-avatar { width:76px; height:76px; border-radius:50%; object-fit:cover; box-shadow:0 6px 18px rgba(23,24,28,.15); }
.ps-hint { font-size:.78rem; color:var(--green); font-weight:600; }
.ps-upload {
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:.78rem; font-weight:600; color:var(--accent-2);
  border:1px solid rgba(181,138,76,.4); border-radius:999px; padding:6px 14px;
  transition:.15s;
}
.ps-upload:hover { background:rgba(181,138,76,.12); }
.ps-input { display:none; }
.ps-crop-area { width:100%; max-width:340px; height:300px; background:#111; border-radius:12px; overflow:hidden; }
.ps-crop-img { display:block; max-width:100%; }
.ps-crop-actions { display:flex; gap:8px; justify-content:center; }

/* ===== MOBILE OVERLAY ===== */
.rail-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:55; backdrop-filter:blur(2px); }

/* ===== HERO BAND (stat ringkas) ===== */
.hero-band { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:24px; }
.hb-item { flex:1; min-width:150px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 20px; box-shadow:var(--shadow); border-left:3px solid var(--line); }
.hb-gold { border-left-color:var(--accent); }
.hb-blue { border-left-color:#3b82f6; }
.hb-green { border-left-color:#22c55e; }
.hb-val { font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--ink); line-height:1.1; }
.hb-lbl { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; margin-top:4px; }

/* ===== PAGE HEAD ===== */
.page-head { margin-bottom:24px; }
.page-head-with-back { display:flex; flex-direction:column; gap:0; }
.page-head-with-back .btn-back { align-self:flex-start; margin-bottom:10px; }
.page-head h1 { font-family:var(--font-display); font-size:30px; font-weight:700; letter-spacing:0; margin:0; color:var(--navy); }
.page-head .kick { font-size:12px; letter-spacing:.04em; color:var(--muted); font-weight:500; margin-top:6px; }

/* ===== SECTION TITLE ===== */
.section-title { display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--navy); }
.section-title .ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; }

/* ===== BROADCAST ===== */
.broadcast { position:relative; overflow:hidden; height:270px; display:flex; flex-direction:column; background:linear-gradient(135deg,#f8f5f0,#efeae0); border:1px solid rgba(168,130,62,.26); border-radius:20px; color:var(--ink); padding:28px 32px; box-shadow:var(--shadow-lg); }
.broadcast-pengumuman { height:auto; min-height:0; padding:20px 24px; }
.pu-news { display:flex; flex-direction:column; }
.pu-news-row {
  display:flex; align-items:center; gap:12px; padding:11px 6px;
  border-bottom:1px solid rgba(255,255,255,.07); transition:.15s;
}
.pu-news-row:last-child { border-bottom:none; }
.pu-news-row:hover { background:rgba(150,111,53,.08); padding-left:12px; border-radius:10px; }
.pu-news-idx { font-family:var(--font-mono); font-size:12px; color:var(--accent); font-weight:700; flex:none; width:22px; }
.pu-news-body { flex:1; min-width:0; }
.pu-news-judul { font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.pu-news-meta { display:flex; gap:4px; font-size:11px; color:var(--faint); margin-top:2px; }
.pu-news-cat { color:var(--accent); font-weight:600; }
.pu-ticker { height:176px; overflow:hidden; position:relative; }
.pu-ticker-track { display:flex; flex-direction:column; animation:puScroll 18s linear infinite; }
.pu-ticker-track.paused { animation-play-state:paused; }
@keyframes puScroll {
  0% { transform:translateY(0); }
  100% { transform:translateY(-50%); }
}
.pu-ticker:hover { cursor:pointer; }
.bl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; margin:0 0 24px; }
.bl-card {
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px; transition:.18s; position:relative; overflow:hidden;
}
.bl-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#c99d5e,#966f35,transparent); }
.bl-card:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:0 12px 26px rgba(181,138,76,.14); }
.bl-card-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.bl-cat { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2); background:#f6f1e6; border:1px solid rgba(181,138,76,.3); padding:3px 10px; border-radius:999px; }
.bl-actions { display:flex; gap:6px; }
.bl-actions button { background:none; border:1px solid var(--line); border-radius:8px; cursor:pointer; color:var(--muted); padding:4px; display:flex; }
.bl-actions button:hover { border-color:var(--accent); color:var(--accent-2); }
.bl-judul { font-family:var(--font-display); font-weight:700; font-size:1rem; line-height:1.3; }
.bl-isi { font-size:.85rem; color:var(--muted); line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bl-meta { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; font-size:.78rem; color:var(--faint); margin-top:auto; padding-top:6px; border-top:1px solid var(--line-2); }
.bl-target { font-weight:600; color:var(--accent-2); }
.modal-buletin { max-width:560px; }
.bl-detail-isi { font-size:.95rem; color:var(--ink); line-height:1.75; white-space:pre-wrap; }
.kal-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:16px; margin:0 0 24px; }
.kal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.kal-title { font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--ink); }
.kal-nav { background:none; border:1px solid var(--line); border-radius:9px; cursor:pointer; width:32px; height:32px; display:flex; align-items:center; justify-content:center; color:var(--muted); }
.kal-nav:hover { border-color:var(--accent); color:var(--accent-2); }
.kal-week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin-bottom:6px; }
.kal-week span { text-align:center; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; }
.kal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.kal-day {
  position:relative; height:52px; border:1px solid var(--line-2); border-radius:10px;
  background:var(--paper); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; transition:.15s;
}
.kal-day:hover { border-color:var(--accent); }
.kal-day.empty { background:transparent; border-color:transparent; cursor:default; }
.kal-day.today { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.kal-day.sel { background:linear-gradient(135deg,#c99d5e,#966f35); border-color:transparent; }
.kal-day.sel .kal-day-num { color:#fff; font-weight:700; }
.kal-day-num { font-size:13px; font-weight:600; color:var(--ink); }
.kal-day-flag { color:#b3424e; font-size:8px; line-height:1; }
.kal-day.sel .kal-day-flag { color:#fff; }
.kal-day-dot { width:6px; height:6px; border-radius:50%; background:var(--green); }
.kal-day.sel .kal-day-dot { background:#fff; }
.kal-legend { display:flex; gap:16px; margin-top:10px; font-size:11px; color:var(--muted); align-items:center; }
.kal-legend-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); margin-right:5px; }
.kal-legend-flag { color:#b3424e; margin-right:3px; }
.agenda-filters { display:inline-flex; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:4px; gap:4px; }
.agenda-filter { border:1px solid var(--line); background:var(--surface); color:var(--muted); font-weight:600; font-size:.8rem; padding:6px 14px; border-radius:8px; cursor:pointer; transition:all .18s ease; box-shadow:0 1px 2px rgba(23,24,28,.04); }
.agenda-filter:hover { background:#fbf7ec; color:var(--ink); }
.agenda-filter.active { background:linear-gradient(135deg,#c99d5e,#b58a4c 55%,#966f35); color:#fff; border-color:transparent; box-shadow:0 2px 8px rgba(181,138,76,.28); }
.agenda-card.is-open { border-color:var(--accent); box-shadow:0 0 0 2px rgba(181,138,76,.25); }
.modal-agenda { max-width:520px; }
.agenda-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.agenda-detail-grid .detail-item:nth-child(n+4) { grid-column:1/-1; }
.agenda-flag-important { color:#c98a2d; }
.pesan-grid { display:flex; flex-direction:column; gap:10px; }
.pesan-card { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px 16px; transition:box-shadow .18s ease, border-color .18s ease; }
.pesan-card:hover { box-shadow:0 4px 14px rgba(12,13,17,.07); }
.pesan-card.is-new { border-color:#d4b106; box-shadow:inset 3px 0 0 0 #d4b106; }
.pesan-card.is-open { border-color:var(--accent); box-shadow:0 0 0 2px rgba(181,138,76,.25); }
.pesan-card-top { display:flex; align-items:center; gap:10px; }
.pesan-av { width:38px; height:38px; border-radius:50%; background:var(--accent); color:#0c0d11; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.95rem; flex-shrink:0; }
.pesan-card-info { flex:1; min-width:0; }
.pesan-card-nama { font-weight:700; font-size:var(--fs-md); }
.pesan-card-meta { font-size:var(--fs-xs); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pesan-card-right { text-align:right; flex-shrink:0; }
.pesan-card-tgl { font-size:var(--fs-xs); color:var(--faint); display:block; margin-top:3px; }
.pesan-card-subjek { font-weight:600; font-size:var(--fs-base); margin-top:10px; }
.pesan-card-isi { font-size:var(--fs-sm); color:#64748b; line-height:1.55; margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pesan-card-balas { margin-top:10px; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:10px; padding:10px 12px; }
.pesan-card-balas-head { font-size:var(--fs-xs); font-weight:700; color:#15803d; display:flex; align-items:center; gap:5px; }
.pesan-card-balas-isi { font-size:var(--fs-sm); color:#166534; margin-top:4px; line-height:1.55; }
.pesan-card-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.modal-pesan { max-width:560px; }
.pesan-reply-form textarea { width:100%; box-sizing:border-box; }
@media (max-width:640px){ .smtp-grid { grid-template-columns:1fr; } }
.kal-head-day { font-size:.95rem; font-weight:700; color:var(--ink); margin-bottom:12px; }
.kal-day-list { display:flex; flex-direction:column; gap:8px; max-height:280px; overflow-y:auto; }
.kal-day-item { display:flex; gap:12px; align-items:flex-start; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.kal-day-item-jam { font-family:var(--font-mono); font-size:.8rem; font-weight:700; color:var(--accent-2); flex:none; min-width:54px; }
.kal-day-item-judul { font-size:.85rem; font-weight:600; }
.kal-day-item-meta { display:flex; gap:8px; align-items:center; margin-top:3px; }
.kal-empty { color:var(--muted); font-size:.85rem; padding:14px; text-align:center; }
.kal-week-row { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.kal-week-col { background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:8px; min-height:120px; }
.kal-week-col.today { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.kal-week-col-head { display:flex; justify-content:space-between; font-size:.78rem; font-weight:700; color:var(--muted); margin-bottom:6px; }
.kal-week-col-num { font-size:1rem; color:var(--ink); }
.kal-week-col-items { display:flex; flex-direction:column; gap:4px; }
.kal-week-item { font-size:.68rem; background:rgba(181,138,76,.12); color:var(--accent-2); border-radius:6px; padding:3px 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kal-week-more { font-size:.65rem; color:var(--muted); }
.kal-year { display:flex; gap:6px; align-items:flex-end; height:90px; padding-top:6px; }
.kal-year-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; }
.kal-year-bar { width:100%; max-width:22px; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#c99d5e,#966f35); min-height:4px; }
.kal-year-m { font-size:.65rem; color:var(--muted); }
.kal-year-n { font-size:.7rem; font-weight:700; color:var(--accent-2); }
.op-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; margin-top:12px; }
.op-card {
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px;
  box-shadow:var(--shadow); transition:.18s;
}
.op-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 20px rgba(181,138,76,.12); }
.op-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.op-judul { font-family:var(--font-display); font-weight:700; font-size:1rem; line-height:1.3; word-break:break-word; overflow-wrap:anywhere; }
.op-actions { display:flex; align-items:center; gap:6px; flex:none; }
.op-actions button { background:none; border:1px solid var(--line); border-radius:8px; cursor:pointer; color:var(--muted); padding:4px; display:flex; }
.op-actions button:hover { border-color:var(--accent); color:var(--accent-2); }
.op-isi { font-size:.85rem; color:var(--muted); line-height:1.65; white-space:pre-wrap; }
.broadcast-klien { height:300px; }
.broadcast-klien .broadcast-slide .j { font-size:22px; -webkit-line-clamp:1; }
.broadcast-klien .broadcast-slide .i { font-size:14px; -webkit-line-clamp:3; line-height:1.6; }
.broadcast::before { content:''; position:absolute; top:-80px; right:-50px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(181,138,76,.30), transparent 70%); pointer-events:none; }
.broadcast::after { content:''; position:absolute; bottom:-60px; left:15%; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, rgba(181,138,76,.15), transparent 70%); pointer-events:none; }
.broadcast-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid rgba(181,138,76,.22); position:relative; z-index:1; }
.broadcast-title { display:flex; align-items:center; gap:10px; font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); }
.broadcast-stage { flex:1; display:flex; align-items:center; position:relative; z-index:1; min-height:0; overflow:hidden; }
.broadcast-slide { width:100%; min-height:0; animation:bcFade .55s cubic-bezier(.22,1,.36,1) both; }
.broadcast-slide .j { font-family:var(--font-display); font-size:26px; font-weight:600; color:var(--ink); margin-bottom:8px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.broadcast-slide .i { color:var(--muted); font-size:15px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.broadcast-slide .meta { color:var(--faint); font-size:12px; margin-top:10px; }
@keyframes bcFade {
  0% { opacity:0; transform:translateX(16px); }
  100% { opacity:1; transform:translateX(0); }
}
.bc-click { cursor:pointer; transition:.18s; }
.bc-click:hover .j { color:var(--accent); }
.bc-click:hover .i { color:rgba(255,255,255,.92); }

/* ===== Widget timeline (Agenda) & daftar tugas ===== */
.bc-timeline { flex:1; display:flex; flex-direction:column; gap:4px; min-height:0; overflow-y:auto; padding-right:4px; }
.bc-timeline::-webkit-scrollbar { width:6px; }
.bc-timeline::-webkit-scrollbar-thumb { background:rgba(150,111,53,.30); border-radius:99px; }
.bc-timeline::-webkit-scrollbar-thumb:hover { background:rgba(150,111,53,.45); }
.bc-timeline::after { content:''; position:sticky; bottom:0; left:0; right:0; height:18px; background:linear-gradient(180deg, transparent, rgba(241,233,212,.75)); pointer-events:none; border-radius:0 0 14px 14px; }
.bc-tl-item {
  display:flex; align-items:center; gap:13px; padding:9px 8px; border-radius:12px;
  border-bottom:1px solid rgba(255,255,255,.08); transition:.18s;
}
.bc-tl-item:last-child { border-bottom:none; }
.bc-tl-item:hover { background:rgba(150,111,53,.08); }
.bc-tl-date {
  width:48px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(150,111,53,.10); border:1px solid rgba(181,138,76,.28); border-radius:11px; padding:5px 4px;
}
.bc-tl-d { font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--accent-2); line-height:1; }
.bc-tl-m { font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-top:2px; }
.bc-tl-body { flex:1; min-width:0; }
.bc-tl-t { font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bc-tl-s { font-size:11px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bc-timeline .agenda-badge { flex:none; }
.bc-tasks { flex:1; display:flex; flex-direction:column; gap:3px; min-height:0; overflow-y:auto; padding-right:4px; }
.bc-rows { flex:1; display:flex; flex-direction:column; gap:3px; min-height:0; overflow-y:auto; padding-right:4px; }
.bc-tasks::-webkit-scrollbar, .bc-rows::-webkit-scrollbar { width:6px; }
.bc-tasks::-webkit-scrollbar-thumb, .bc-rows::-webkit-scrollbar-thumb { background:rgba(150,111,53,.30); border-radius:99px; }
.bc-tasks::-webkit-scrollbar-thumb:hover, .bc-rows::-webkit-scrollbar-thumb:hover { background:rgba(150,111,53,.45); }
.bc-tasks::after { content:''; position:sticky; bottom:0; left:0; right:0; height:18px; background:linear-gradient(180deg, transparent, rgba(241,233,212,.75)); pointer-events:none; border-radius:0 0 14px 14px; }
.bc-rows::after { content:''; position:sticky; bottom:0; left:0; right:0; height:18px; background:linear-gradient(180deg, transparent, rgba(241,233,212,.75)); pointer-events:none; border-radius:0 0 14px 14px; }
.bc-row {
  display:flex; align-items:center; gap:11px; padding:9px 8px; border-radius:12px;
  border-bottom:1px solid rgba(255,255,255,.08); transition:.18s;
}
.bc-row:last-child { border-bottom:none; }
.bc-row:hover { background:rgba(150,111,53,.08); }
.bc-row-ico {
  width:34px; height:34px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center;
  background:rgba(150,111,53,.10); border:1px solid rgba(181,138,76,.28); color:var(--accent-2);
}
.bc-row-body { flex:1; min-width:0; }
.bc-row-t { font-size:13px; font-weight:600; color:var(--ink); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bc-row-s { font-size:10.5px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bc-row .badge { flex:none; }
.bc-task {
  display:flex; align-items:center; gap:11px; padding:8px 8px; border-radius:12px;
  border-bottom:1px solid rgba(255,255,255,.08); transition:.18s;
}
.bc-task:last-child { border-bottom:none; }
.bc-task:hover { background:rgba(150,111,53,.08); }
.bc-task-av { width:36px; height:36px; border-radius:50%; flex:none; position:relative; overflow:hidden; }
.bc-task-av-img { width:100%; height:100%; object-fit:cover; display:block; }
.bc-task-av-txt {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#d4ab6a,#966f35); color:#fff; font-size:12px; font-weight:700;
}
.bc-task-body { flex:1; min-width:0; }
.bc-task-t { font-size:13px; font-weight:600; color:var(--ink); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bc-task-m { font-size:10.5px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bc-task-bar { height:5px; border-radius:99px; background:rgba(150,111,53,.18); overflow:hidden; margin-top:6px; }
.bc-task-fill { height:100%; border-radius:99px; transition:width .5s ease; }
.bc-task .badge { flex:none; }
.bc-empty { padding:14px 0; text-align:center; font-size:.85rem; color:var(--muted); }
.broadcast-agenda { min-height:300px; height:auto; max-height:400px; }
.broadcast-penugasan { min-height:320px; height:auto; max-height:420px; }
.broadcast-action { min-height:300px; height:auto; max-height:400px; }
.broadcast-lpp { min-height:240px; height:auto; max-height:400px; }
.broadcast-dots { display:flex; gap:8px; justify-content:center; margin-top:16px; position:relative; z-index:1; }
.broadcast-dots button { width:7px; height:7px; border-radius:50%; background:rgba(150,111,53,.30); border:0; cursor:pointer; padding:0; transition:.2s; }
.broadcast-dots button.active { background:var(--accent); width:20px; border-radius:99px; }
.broadcast-nav { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:14px; position:relative; z-index:1; }
.broadcast-nav .broadcast-dots { margin-top:0; }
.bc-nav-btn {
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:rgba(150,111,53,.10); border:1px solid rgba(181,138,76,.30);
  color:var(--accent-2); cursor:pointer; transition:.18s;
}
.bc-nav-btn:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.broadcast-agenda { background:linear-gradient(135deg,#f8f5f0,#ece5d8); border-color:rgba(168,130,62,.26); }
.broadcast-agenda::before { background:radial-gradient(circle, rgba(181,138,76,.22), transparent 70%); }
.broadcast-agenda::after { background:radial-gradient(circle, rgba(150,111,53,.12), transparent 70%); }
.broadcast-action { background:linear-gradient(135deg,#f8f5f0,#eee7db); border-color:rgba(168,130,62,.26); }
.broadcast-action::before { background:radial-gradient(circle, rgba(181,138,76,.22), transparent 70%); }
.broadcast-action::after { background:radial-gradient(circle, rgba(150,111,53,.12), transparent 70%); }
.broadcast-penugasan { background:linear-gradient(135deg,#f8f5f0,#ede5d6); border-color:rgba(168,130,62,.26); }
.broadcast-penugasan::before { background:radial-gradient(circle, rgba(181,138,76,.22), transparent 70%); }
.broadcast-penugasan::after { background:radial-gradient(circle, rgba(150,111,53,.12), transparent 70%); }
.agenda-badge { display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:3px 10px; border-radius:999px; color:#fff; }

/* ===== APP ECOSYSTEM ===== */
.apps-shell { border:1px solid var(--line); background:var(--surface); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); padding:18px; }
.apps-scroll { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
.apps-scroll::-webkit-scrollbar { height:6px; }
.apps-scroll::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
.app-card { flex:0 0 232px; scroll-snap-align:start; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; cursor:pointer; transition:.16s; display:flex; flex-direction:column; gap:9px; height:172px; }
.app-card:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-lg); }
.app-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none; }
.app-card .name { font-weight:700; font-size:15px; color:var(--ink); line-height:1.2; }
.app-card .desc { font-size:12.5px; color:var(--muted); line-height:1.45; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.app-card .tag { align-self:flex-start; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-2); background:#f6f1e6; border:1px solid #eee4cf; padding:2px 8px; border-radius:999px; line-height:1.5; }
.app-hint { text-align:center; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--faint); margin-top:12px; }
.search-box { position:relative; display:inline-flex; align-items:center; }
.search-box i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--faint); width:16px; height:16px; pointer-events:none; }
.search-box input { padding:10px 34px 10px 36px; width:260px; max-width:100%; }
.search-box input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(181,138,76,.15); }
.search-box input::placeholder { color:var(--faint); }
.search-clear { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--faint); padding:3px; border-radius:6px; display:flex; align-items:center; }
.search-clear:hover { color:var(--ink); background:rgba(0,0,0,.05); }
.kanban-person { cursor:pointer; min-width:170px; }
.kanban-person:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(181,138,76,.15); }

/* tint duotone */
.grad-blue   { background:#edf1f7; color:#3a5b8f; }
.grad-indigo { background:#efeffa; color:#4f46a5; }
.grad-rose   { background:#fdf0f1; color:#b3424e; }
.grad-cyan   { background:#eaf5f5; color:#2c6e6a; }
.grad-stone  { background:#f1efec; color:#5c5348; }
.grad-amber  { background:#faf3e6; color:#a9772e; }
.grad-emerald{ background:#ecf6ef; color:#2f7a54; }
.grad-purple { background:#f4effb; color:#6d4ba0; }
.grad-teal   { background:#e6f4f1; color:#1f6f67; }

/* ===== WIDGET ===== */
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
.widget { background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:22px; }
.widget-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line-2); }
.widget-head h3 { font-family:var(--font-display); font-size:16px; font-weight:700; margin:0; display:flex; align-items:center; gap:10px; }

/* ===== TABS ===== */
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.tab { padding:8px 16px; border:1px solid var(--line); background:var(--surface); border-radius:999px; cursor:pointer; font-weight:600; font-size:13px; color:var(--muted); transition:.18s cubic-bezier(.22,1,.36,1); }
.tab.active { background:linear-gradient(135deg, #c99d5e 0%, var(--accent) 55%, var(--accent-2) 100%); color:#fff; border-color:var(--accent); box-shadow:0 2px 8px rgba(181,138,76,.35); }
.tab:hover { border-color:var(--accent); color:var(--ink); }
.tab.active:hover { color:#fff; border-color:var(--accent); }

/* ===== MANAJEMEN PERKARA GROUPS (Perkara/Kalender/Akun) ===== */
.siko-groups { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.siko-group { display:flex; align-items:center; gap:8px; padding:11px 20px; border:1px solid var(--line); background:var(--surface); border-radius:14px; cursor:pointer; font-weight:600; font-size:14px; color:var(--muted); transition:.15s; box-shadow:var(--shadow); }
.siko-group:hover { border-color:var(--accent); color:var(--ink); transform:translateY(-1px); }
.siko-group.active {
  background:linear-gradient(135deg,#c99d5e,#b58a4c 55%,#966f35);
  border-color:transparent; color:#fff;
  box-shadow:0 4px 14px rgba(181,138,76,.4);
}
.siko-group.active i { color:var(--accent); }

.siko-jenis { display:flex; gap:8px; flex-wrap:wrap; margin:-6px 0 18px; }
.siko-jenis-chip { padding:6px 14px; border:1px solid var(--line); background:var(--surface); border-radius:999px; cursor:pointer; font-weight:600; font-size:12.5px; color:var(--muted); transition:.15s; }
.siko-jenis-chip:hover { border-color:var(--accent); color:var(--ink); }
.siko-jenis-chip.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.mon-tabs {
  display:flex; gap:8px; flex-wrap:wrap; margin:0 0 20px;
  background:transparent; border:none; padding:0; box-shadow:none;
}
.mon-tab {
  flex:1 1 auto; min-width:0; justify-content:center;
  display:inline-flex; align-items:center; gap:7px; padding:10px 14px;
  border-radius:13px; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:13px;
  background:var(--surface); border:1px solid var(--line);
  color:var(--muted); box-shadow:var(--shadow);
  transition:all .25s cubic-bezier(.22,1,.36,1); white-space:nowrap;
}
.mon-tab i { transition:color .25s; flex:none; color:var(--accent); }
.mon-tab:hover { color:var(--ink); border-color:var(--accent); transform:translateY(-2px); box-shadow:0 6px 18px rgba(181,138,76,.2); }
.mon-tab.active {
  background:linear-gradient(135deg,#c99d5e,#b58a4c 55%,#966f35);
  border-color:transparent; color:#fff;
  box-shadow:0 6px 20px rgba(181,138,76,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.mon-tab.active i { color:#fff; }
.tab-count {
  min-width:20px; height:20px; padding:0 6px; border-radius:999px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-size:11px; font-weight:700; line-height:1;
  background:rgba(181,138,76,.15); color:var(--accent-2);
}
.mon-tab.active .tab-count { background:rgba(255,255,255,.25); color:#fff; }
/* Filter tab: jangan patah baris — tetap satu baris, geser halus bila sempit */
.mon-tabs-filter { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; }
.mon-tabs-filter::-webkit-scrollbar { display:none; }
.mon-tabs-filter .mon-tab { flex:0 0 auto; }
.head-count {
  font-family:var(--font-body); font-size:var(--fs-xs); font-weight:600; color:var(--muted);
  margin-left:8px; padding:2px 10px; border-radius:999px; background:var(--paper); border:1px solid var(--line);
}
.mon-tabs-dark { background:transparent; border:none; box-shadow:none; padding:0; }
.mon-tabs-dark .mon-tab { background:rgba(255,255,255,.65); border-color:rgba(181,138,76,.35); color:var(--navy); box-shadow:var(--shadow); }
.mon-tabs-dark .mon-tab i { color:var(--accent); }
.mon-tabs-dark .mon-tab:hover { color:var(--accent-2); background:#fff; border-color:var(--accent); transform:translateY(-2px); box-shadow:0 6px 18px rgba(181,138,76,.2); }
.mon-tabs-dark .mon-tab.active { background:linear-gradient(135deg,#d4ab6a,#b58a4c 55%,#8f6a2f); border-color:transparent; color:#fff; }
.mon-tabs-dark .mon-tab.active i { color:#fff; }
@media (max-width:640px) {
  .mon-tab { flex:1 1 45%; white-space:normal; justify-content:flex-start; padding:9px 12px; font-size:12px; }
}
.mon-panel { animation:monFade .3s ease both; }
@keyframes monFade { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.mon-pihak { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.mon-pihak-group {
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:12px 14px;
}
.mon-pihak-role {
  font-size:var(--fs-micro); letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin-bottom:6px;
}
.mon-pihak-nama { color:var(--ink); font-size:.9rem; line-height:1.45; }
.mon-pihak-nama + .mon-pihak-nama { margin-top:4px; }
.disc-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 18px; border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,#191a1f,#24262d);
  color:#fff;
}
.disc-head-av {
  width:38px;height:38px;border-radius:11px;flex:none;
  background:linear-gradient(135deg,#c99d5e,#966f35); color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.disc-body { padding:18px; max-height:420px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.disc-row { display:flex; gap:10px; align-items:flex-end; }
.disc-row.mine { flex-direction:row-reverse; }
.disc-av { width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none; }
.disc-av-txt {
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;font-weight:700;font-size:.8rem;
}
.disc-bubble {
  max-width:75%; padding:11px 14px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
}
.disc-row.mine .disc-bubble {
  background:linear-gradient(135deg,#c99d5e,#b58a4c); color:#fff; border-color:transparent;
  border-bottom-right-radius:4px;
}
.disc-row.theirs .disc-bubble { border-bottom-left-radius:4px; }
.disc-meta { display:flex; gap:8px; align-items:baseline; margin-bottom:4px; }
.disc-who { font-weight:700; font-size:var(--fs-sm); }
.disc-row.mine .disc-who { color:#fff; }
.disc-when { color:var(--muted); font-size:var(--fs-xs); }
.disc-row.mine .disc-when { color:rgba(255,255,255,.8); }
.disc-msg { white-space:pre-wrap; font-size:var(--fs-base); line-height:1.55; }
.disc-row.mine .disc-msg { color:#fff; }
.disc-input {
  display:flex; gap:8px; padding:14px 18px; border-top:1px solid var(--line);
  background:var(--surface);
}
.disc-file {
  display:flex; align-items:center; gap:7px; margin-top:8px;
  background:rgba(181,138,76,.12); border:1px dashed rgba(181,138,76,.5);
  color:var(--accent-2); border-radius:8px; padding:6px 10px;
  font-size:.8rem; font-weight:600; text-decoration:none; max-width:100%;
}
.disc-file span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.disc-row.mine .disc-file { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.4); color:#fff; }
.disc-attach {
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  width:40px; flex:none; border:1px solid var(--line); border-radius:10px;
  color:var(--muted); transition:.15s; background:var(--paper);
}
.disc-attach:hover { border-color:var(--accent); color:var(--accent); }
.disc-attach.has { border-color:var(--accent); color:var(--accent); background:rgba(181,138,76,.1); }
.disc-attach-name { font-size:.78rem; color:var(--muted); max-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ===== PANEL / TABLE ===== */
.panel { background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); margin-bottom:24px; overflow:hidden; }
.panel-head { padding:16px 22px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.panel-head h3 { margin:0; font-family:var(--font-display); font-size:16px; font-weight:700; }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.toolbar input { min-width:220px; }
.table-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; font-size:var(--fs-base); }
.tbl th { text-align:left; vertical-align:middle; padding:13px 16px; background:var(--paper); color:var(--faint); font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.08em; font-weight:600; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td { padding:13px 16px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:0; }
.tbl tr:hover td { background:#fcfbf8; }
.tbl .num { text-align:right; font-variant-numeric:tabular-nums; font-family:var(--font-mono); }
.tbl .actions-th { text-align:right; vertical-align:middle; }
.tbl .empty { text-align:center; color:var(--faint); padding:44px 20px; font-size:var(--fs-base); }
.tbl .empty::before { content:''; display:block; width:34px; height:34px; margin:0 auto 12px; opacity:.4; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a707c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/></svg>") center/contain no-repeat; }
.tbl .actions { text-align:right; vertical-align:middle; }
.tbl .actions-wrap { display:flex; gap:6px; justify-content:flex-end; }
.tbl .actions-wrap button { border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:6px 9px; cursor:pointer; font-size:13px; color:var(--muted); transition:.15s; }
.tbl .actions-wrap button:hover { background:var(--noir); color:#fff; border-color:var(--noir); }
/* Aksi berkas (Lihat / Unduh) */
.file-actions { display:inline-flex; align-items:center; gap:6px; }
.file-act {
  display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:9px;
  border:1px solid var(--line); background:var(--surface); color:var(--muted);
  font-size:12.5px; font-weight:600; cursor:pointer; transition:.15s; text-decoration:none; line-height:1;
}
.file-act:hover { border-color:var(--accent); color:var(--accent-2); background:rgba(181,138,76,.08); }
.file-act-view { color:var(--accent-2); border-color:#eee4cf; background:rgba(181,138,76,.08); }
.file-act-view:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
/* Modal pratinjau berkas */
.fp-modal { max-width:900px; width:100%; }
.fp-body { padding:0; }
.fp-frame { width:100%; height:min(78vh,780px); border:0; display:block; background:#fff; }
.fp-img { display:block; width:100%; max-height:min(78vh,780px); object-fit:contain; background:#0c0d11; }
.fp-nopreview { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:52px 24px; color:var(--muted); }
/* Kartu Berkas (tab Berkas detail perkara) — selaras kartu premium */
.berkas-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px; }
.berkas-card {
  position:relative; overflow:hidden;
  display:flex; align-items:flex-start; gap:14px; padding:18px;
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 4px 18px rgba(23,24,28,.07);
  transition:box-shadow .2s, transform .2s, border-color .2s;
}
.berkas-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,#c99d5e,#b58a4c,#966f35,transparent);
}
.berkas-card:hover { border-color:var(--accent); box-shadow:0 16px 34px rgba(181,138,76,.2); transform:translateY(-4px); }
.berkas-ico {
  width:48px; height:48px; border-radius:14px; flex:none;
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 4px 12px rgba(23,24,28,.18);
}
.berkas-ico.ico-pdf { background:linear-gradient(135deg,#d1554f,#a83a3a); }
.berkas-ico.ico-img { background:linear-gradient(135deg,#4a9d6f,#2f7a54); }
.berkas-ico.ico-doc { background:linear-gradient(135deg,#4a6fb0,#3a5b8f); }
.berkas-ico.ico-xls { background:linear-gradient(135deg,#4f9d86,#2f7a68); }
.berkas-ico.ico-gen { background:linear-gradient(135deg,#c99d5e,#966f35); }
.berkas-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.berkas-nama { font-family:var(--head); font-weight:700; font-size:var(--fs-lg); color:var(--noir); line-height:1.3; overflow-wrap:anywhere; }
.berkas-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--muted); }
.berkas-catatan { font-size:var(--fs-sm); color:var(--muted); line-height:1.45; overflow-wrap:anywhere; }
.berkas-foot {
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:2px; padding-top:12px; border-top:1px solid var(--line-2);
}
.berkas-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.berkas-nofile { font-size:var(--fs-xs); color:var(--faint); font-style:italic; }
.berkas-icobtn {
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border:1px solid var(--line); background:var(--surface); border-radius:9px; cursor:pointer; color:var(--muted); transition:.15s;
}
.berkas-icobtn:hover { background:var(--noir); color:#fff; border-color:var(--noir); }

/* ===== AKTIVITAS: timeline kronologis ===== */
.akt-timeline { display:flex; flex-direction:column; }
.akt-item { display:flex; gap:14px; }
.akt-rail { flex:none; width:20px; display:flex; flex-direction:column; align-items:center; padding-top:6px; }
.akt-dot { width:14px; height:14px; border-radius:50%; flex:none; background:var(--accent); box-shadow:0 0 0 4px rgba(181,138,76,.18); }
.akt-dot.auto { background:var(--green); box-shadow:0 0 0 4px rgba(47,122,84,.16); }
.akt-line { width:2px; flex:1; background:var(--line); margin-top:2px; }
.akt-card { flex:1; min-width:0; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:14px; transition:border-color .15s, box-shadow .15s; }
.akt-card:hover { border-color:var(--accent); box-shadow:var(--shadow); }
.akt-card-top { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.akt-when { display:flex; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:600; color:var(--accent-2); }
.akt-badges { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.akt-kegiatan { font-family:var(--head); font-weight:700; font-size:var(--fs-lg); color:var(--noir); line-height:1.35; overflow-wrap:anywhere; }
.akt-hasil { font-size:var(--fs-base); color:var(--muted); line-height:1.5; margin-top:6px; white-space:pre-wrap; overflow-wrap:anywhere; }
.akt-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line-2); flex-wrap:wrap; }
.akt-file { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:600; color:var(--accent-2); }
.akt-file:hover { text-decoration:underline; }
.akt-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }
.akt-icobtn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--line); background:var(--surface); border-radius:9px; cursor:pointer; color:var(--muted); transition:.15s; }
.akt-icobtn:hover { background:var(--noir); color:#fff; border-color:var(--noir); }

/* ===== MANDAT KERJA: kartu premium ===== */
.md-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px; }
.md-card {
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:10px; padding:18px;
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 4px 18px rgba(23,24,28,.07); transition:box-shadow .2s, transform .2s, border-color .2s;
}
.md-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#c99d5e,#b58a4c,#966f35,transparent); }
.md-card.st-dikerjakan::before { background:linear-gradient(90deg,#3a5b8f,#22355a,transparent); }
.md-card.st-selesai::before { background:linear-gradient(90deg,#2f7a54,#1f5c3e,transparent); }
.md-card:hover { border-color:var(--accent); box-shadow:0 16px 34px rgba(181,138,76,.2); transform:translateY(-4px); }
.md-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.md-judul { font-family:var(--head); font-weight:700; font-size:var(--fs-lg); color:var(--noir); line-height:1.3; overflow-wrap:anywhere; }
.md-badges { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.md-pri { display:inline-flex; align-items:center; gap:4px; font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:999px; color:#a5524a; background:#f5e9e6; }
.md-pri.sedang { color:#9a7030; background:#f6ecd9; }
.md-pri.rendah { color:#3b6ea5; background:#e7eef5; }
.md-desc { font-size:var(--fs-sm); color:var(--muted); line-height:1.5; overflow-wrap:anywhere; }
.md-meta { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:var(--fs-sm); color:var(--muted); }
.md-pj { display:flex; align-items:center; gap:7px; min-width:0; }
.md-av { width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:700; flex:none; }
.md-av-img { width:26px; height:26px; border-radius:50%; object-fit:cover; flex:none; }
.md-tim-av { width:24px; height:24px; border-radius:50%; background:#eee4cf; color:var(--accent-2); display:inline-flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:700; border:2px solid var(--surface); margin-left:-8px; }
.md-deadline { display:inline-flex; align-items:center; gap:5px; font-weight:600; }
.md-hasil { background:var(--paper); border:1px solid var(--line-2); border-radius:10px; padding:9px 12px; font-size:var(--fs-sm); color:var(--ink); display:flex; flex-direction:column; gap:5px; overflow-wrap:anywhere; }
.md-hasil-txt { color:var(--muted); }
.md-foot { display:flex; align-items:center; gap:8px; padding-top:12px; border-top:1px solid var(--line-2); }
@media (max-width:640px) {
  .md-grid { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .berkas-grid { grid-template-columns:1fr; }
}
.riwayat-actions { display:flex; gap:4px; }
.riwayat-actions button { border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:5px 9px; cursor:pointer; font-size:12px; font-weight:700; color:var(--ink); }
.riwayat-actions button:hover { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ===== BADGE ===== */
.badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.03em; }
.badge-navy { background:#ece8df; color:#4a4438; }
.badge-gold { background:#f3ecdd; color:#8a6a34; }
.badge-amber { background:#f6ecd9; color:#9a7030; }
.badge-green { background:#e8efe6; color:#3d6b4f; }
.badge-red { background:#f5e9e6; color:#a5524a; }
.badge-blue { background:#e9edf2; color:#3f5878; }
.badge-gray { background:#ececec; color:#6b7280; }

/* ===== MODAL ===== */
.modal-backdrop { position:fixed; inset:0; height:100vh; height:100dvh; background:rgba(16,20,30,.45); display:flex; align-items:flex-start; justify-content:center; z-index:100; padding:20px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.modal { background:var(--surface); border:1px solid var(--line); border-radius:20px; width:100%; max-width:600px; max-height:92vh; max-height:92dvh; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; box-shadow:var(--shadow-lg); margin:auto; }
.modal-head { padding:20px 24px; border-bottom:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:center; }
.modal-head h3 { margin:0; font-family:var(--font-display); font-size:18px; font-weight:700; }
.modal-head .x { background:none; border:0; font-size:1.4rem; cursor:pointer; color:var(--faint); }
.modal-body { padding:24px; }
.modal-foot { padding:16px 24px; border-top:1px solid var(--line-2); display:flex; justify-content:flex-end; gap:10px; }

/* ===== DETAIL ===== */
.detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.detail-item { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px 16px; }
.detail-item-wide { grid-column:1 / -1; }
.detail-item .k { font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:600; }
.detail-item .v { font-weight:600; color:var(--ink); margin-top:3px; font-size:var(--fs-base); }

/* ===== TIMELINE ===== */
.timeline { position:relative; padding-left:20px; }
.timeline::before { content:''; position:absolute; left:5px; top:4px; bottom:4px; width:2px; background:var(--line); }
.tl-item { position:relative; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--line-2); }
.tl-item:last-child { border-bottom:0; margin-bottom:0; padding-bottom:0; }
.tl-item .dot { position:absolute; left:-19px; top:5px; width:10px; height:10px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 2px var(--line); }
.tl-item .when { font-size:11px; color:var(--faint); font-weight:600; margin-bottom:2px; }
.tl-item .what { font-weight:600; font-size:13.5px; color:var(--ink); }

/* ===== FOOTER ===== */
.site-footer { background:var(--paper); border-top:1px solid var(--line); padding:20px 0; }
.site-footer .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--faint); }

/* ===== PUBLIC SITE (index.php) ===== */
.site-header { background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.site-header .container { display:flex; align-items:center; justify-content:space-between; height:70px; gap:16px; }
.brand { display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-size:1.2rem; color:var(--ink); font-weight:600; }
.brand .seal { width:40px; height:40px; border-radius:50%; border:1.5px solid var(--accent); color:var(--accent-2); display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; flex:none; }
.brand-logo { height:44px; width:auto; display:block; }
.nav-links { display:flex; gap:26px; align-items:center; }
.nav-links a { color:var(--muted); font-weight:500; font-size:14px; }
.nav-links a:hover { color:var(--ink); }
.menu-toggle { display:none; background:none; border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:7px 11px; font-size:1.25rem; line-height:1; cursor:pointer; }

.hero { background:radial-gradient(1000px 500px at 80% -20%, #ffffff, var(--paper)); color:var(--ink); padding:90px 0 70px; border-bottom:1px solid var(--line); }
.hero .container { display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
.hero.single .container { display:block; max-width:900px; }
.hero.single h1 { font-size:3.1rem; }
.hero h1 { font-family:var(--font-display); font-size:2.9rem; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.hero h1 em { color:var(--accent-2); font-style:normal; }
.hero p.lead { font-size:1.05rem; color:var(--muted); max-width:54ch; }
.hero .cta-row { display:flex; gap:14px; margin-top:12px; flex-wrap:wrap; }
.hero-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:40px; }
.hero-stats .stat { border:1px solid var(--line); border-radius:14px; padding:16px; background:var(--surface); }
.hero-stats .stat b { display:block; font-family:var(--font-display); font-size:1.6rem; color:var(--ink); font-weight:600; }
.hero-stats .stat span { font-size:12.5px; color:var(--muted); }
.hero-card { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px; color:var(--ink); box-shadow:var(--shadow-lg); }
.hero-card h3 { font-size:1.05rem; }
.hero-card ul { list-style:none; margin:0; padding:0; }
.hero-card li { padding:9px 0; border-bottom:1px dashed var(--line); display:flex; gap:10px; align-items:center; }

.section { padding:72px 0; }
.section-alt { background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head { max-width:720px; margin:0 auto 44px; text-align:center; }
.section-head .kicker { color:var(--accent-2); text-transform:uppercase; letter-spacing:.2em; font-size:12px; font-weight:600; }
.section-head h2 { font-family:var(--font-display); font-size:1.7rem; }
.section-head p { color:var(--muted); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:24px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:var(--shadow); transition:.18s; }
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--accent); }
.card .icon { width:46px; height:46px; border-radius:12px; background:var(--paper); border:1px solid var(--line); color:var(--accent-2); display:inline-flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:14px; }
.card h3 { font-size:1.05rem; }
.card-author { font-size:12px; color:var(--accent-2); font-weight:600; margin:6px 0 8px; }
.card p { color:var(--muted); font-size:13.5px; margin-bottom:0; }

/* tim / partner */
.mp-lead { display:flex; justify-content:center; margin-bottom:28px; }
.mp-card { max-width:520px; width:100%; padding:34px 30px; gap:14px; }
.mp-card .team-avatar { width:104px; height:104px; }
.mp-card h3 { font-size:1.3rem; }
.team-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.team-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 22px; box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.team-avatar { width:72px; height:72px; border-radius:50%; background:var(--noir); color:var(--accent); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:20px; flex:none; box-shadow:0 0 0 3px var(--accent); overflow:hidden; }
.team-avatar img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.team-card h3 { margin:0 0 2px; font-size:1.05rem; line-height:1.3; }
.team-card .role { color:var(--accent-2); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.06em; display:flex; justify-content:center; }
.team-card .team-tag { color:var(--muted); font-size:13px; margin-top:6px; display:block; line-height:1.5; }
.team-card .edu { color:var(--muted); font-size:13px; margin-top:8px; line-height:1.5; }
.team-tag { display:inline-block; margin-top:8px; font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-2); background:#f6f1e6; border:1px solid #eee4cf; padding:3px 9px; border-radius:999px; }

/* strip hubungan kerja */
.rel-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; }
.rel-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow); }
.rel-card h3 { font-size:1rem; display:flex; gap:10px; align-items:center; }
.rel-card p { color:var(--muted); font-size:13.5px; margin-bottom:0; }

/* klien & referensi */
.prose { color:var(--muted); font-size:14.5px; max-width:56ch; }
.card-more {
  display:inline-block; margin-top:12px; font-size:13px; font-weight:700;
  color:var(--accent-2);
}
.card-more:hover { text-decoration:underline; }
.card-img {
  width:calc(100% + 48px); height:150px; object-fit:cover;
  margin:-24px -24px 16px; border-radius:16px 16px 0 0; display:block;
}
.artikel-banner {
  width:100%; max-width:820px; height:auto; border-radius:14px;
  margin:0 auto 8px; display:block; box-shadow:var(--shadow);
}
.artikel-kredit { max-width:820px; margin:0 auto 22px; font-size:11px; color:var(--faint); text-align:right; }
.artikel-meta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; color:var(--muted); font-size:13.5px; }
.artikel-kat {
  background:rgba(181,138,76,.14); border:1px solid rgba(181,138,76,.35);
  color:var(--accent-2); font-weight:700; padding:2px 10px; border-radius:999px;
}
.artikel-body { max-width:820px; margin:0 auto; }
.artikel-summary {
  font-family:var(--font-display); font-size:1.12rem; line-height:1.6;
  color:var(--ink); background:var(--surface); border-left:4px solid var(--accent);
  border-radius:10px; padding:16px 20px; margin-bottom:24px;
}
.artikel-text { font-size:15px; line-height:1.85; color:var(--ink); }
.artikel-text p { margin:0 0 18px; }
.chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.chip { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:9px 14px; font-size:13px; font-weight:500; color:var(--ink); box-shadow:var(--shadow); }
.lead-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; }

/* kontak detail */
.contact-rows { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; max-width:820px; margin:0 auto 34px; }
.contact-row { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 20px; display:flex; gap:14px; align-items:flex-start; box-shadow:var(--shadow); }
.contact-row .c-ic { width:42px; height:42px; border-radius:11px; background:var(--paper); border:1px solid var(--line); color:var(--accent-2); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex:none; }
.contact-row .c-k { font-size:11px; font-weight:600; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; }
.contact-row .c-v { font-weight:600; color:var(--ink); margin-top:2px; }

@media (min-width:921px) {
  .rail-backdrop { display:none !important; }
  .rail.collapsed .rail-group { align-items:center; }
  .rail.collapsed .rail-parent { justify-content:center; padding:10px 0; width:44px; }
  .rail.collapsed .rail-caret { display:none; }
  .rail.collapsed .rail-children { display:none !important; }
  .rail.collapsed .rail-section { display:none !important; }
  .rail.collapsed .rail-item span { display:none !important; }
  .rail.collapsed .rail-nav { overflow:visible; }
}
@media (max-width:920px) {
  .rail { position:fixed; left:-260px; top:0; height:100vh; height:100dvh; z-index:60; transition:left .28s cubic-bezier(.22,1,.36,1); width:252px; }
  .rail.open { left:0; }
  .rail .rail-nav { padding:68px 12px 16px; }
  .rail.collapsed { width:252px; }
  .rail.collapsed .rail-brand { padding:14px 12px 10px; justify-content:center; }
  .rail.collapsed .rail-logo-img { display:none; }
  .rail.collapsed .rail-mark { display:none; }
  .rail.collapsed .rail-nav { padding:64px 12px 16px; align-items:stretch; gap:2px; }
  .rail.collapsed .rail-item { justify-content:flex-start; padding:9px 12px; width:100%; }
  .rail.collapsed .rail-item span { display:inline; }
  .rail.collapsed .rail-section { display:block; }
  .rail.collapsed .rail-children { display:flex; }
  .rail.collapsed .rail-user { justify-content:flex-start; }
  .rail.collapsed .rail-user-txt { display:block; }
 .appbar { position:sticky; top:0; z-index:70; pointer-events:auto; }
  .appbar.is-beranda .appbar-title { display:none; }
  .appbar-brand { display:flex; }
  .rail-logo-img { display:none; }
  .content { padding:18px 18px 40px; }
  .appbar { padding:12px 18px 14px; }
  .grid-2 { grid-template-columns:1fr; }
  .hero .container { grid-template-columns:1fr; }
  .site-footer .grid { grid-template-columns:1fr; }
  .search-box { width:100%; }
  .search-box input { width:100%; }
  .perkara-toolbar, .agenda-filters { flex-wrap:wrap; max-width:100%; }
  select.kanban-person, .kanban-person { min-width:0; max-width:100%; }
  .perkara-toolbar select, .toolbar select { max-width:100%; }
  /* Pengaman anti-luber horizontal (mobile) */
  .kal-card, .kal-week-col, .kal-day-item, .agenda-card, .perkara-card, .portal-perkara-card,
  .broadcast, .panel, .widget, .mon-panel, .modal { min-width:0; max-width:100%; }
  .kal-day-item-judul, .agenda-kegiatan, .pc-nomor, .bc-tl-t, .bc-row-t, .bc-task-t,
  .pu-news-judul, .personil-nama, .site-card-nama { overflow-wrap:anywhere; word-break:break-word; }
  .kal-week-item { max-width:100%; }
  .table-wrap { overflow-x:auto; max-width:100%; }
  .mon-tabs { flex-wrap:wrap; }
  .mon-tab { flex:1 1 auto; min-width:0; white-space:normal; }
}
@media (max-width:640px) {
  .kal-week-row { grid-template-columns:1fr; }
  .kal-week-col { min-height:auto; }
  .kal-grid { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .agenda-detail-grid { grid-template-columns:1fr; }
  .page-head h1 { font-size:23px; }
  .modal .form-2col { grid-template-columns:1fr; }
  .toolbar { flex-direction:column; align-items:stretch; }
  .toolbar input, .toolbar select { min-width:0; }
  .hero h1 { font-size:2rem; }
  .hero-stats { grid-template-columns:1fr; }
  .contact-rows { grid-template-columns:1fr; }
  .menu-toggle { display:inline-flex; }
  .site-header .container { height:auto; flex-wrap:wrap; padding:12px 16px; }
  .nav-links { display:none; width:100%; flex-direction:column; gap:2px; padding:10px 0 4px; }
  .site-header.nav-open .nav-links { display:flex; }
  .broadcast { height:220px; padding:20px; }
  .broadcast-pengumuman { height:340px; }
  .broadcast-pengumuman .broadcast-slide .i { -webkit-line-clamp:6; }
  .broadcast-slide .j { font-size:20px; }
  .broadcast-slide .i { font-size:13px; }
  /* LPP: rapatkan agar tidak melebar di HP */
  .modal-backdrop { padding:12px; }
  .modal.lpp-modal { width:100%; max-width:100%; }
  .lpp-modal .modal-body { padding:14px; }
  .lpp-sheet { padding:18px 14px; font-size:12.5px; }
  .lpp-logo { max-height:46px; }
  .lpp-hal { font-size:12px; }
  .lpp-sign-row { gap:14px; }
  .lpp-sign-col { flex-basis:100%; max-width:100%; }
}

/* ================= KANBAN KOORDINASI TIM ================= */
.kanban { display:flex; flex-direction:column; gap:16px; margin:0 0 24px; }
.kanban-filters { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.kanban-tools { display:flex; gap:10px; align-items:center; flex:1 1 100%; }
.kanban-tools .search-box { flex:1 1 auto; }
.kanban-tools .search-box input { width:100%; }
.kanban-tools .kanban-person { flex:none; }
.kanban-top { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:16px 0 10px; }
.kanban-stat { display:flex; align-items:center; gap:8px; }
.kanban-load { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.load-card {
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
}
.load-avatar, .kanban-avatar {
  width:34px; height:34px; border-radius:50%;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; flex-shrink:0;
}
.load-avatar-img, .kanban-avatar-img { object-fit:cover; padding:0; background:#eee; }
.load-info { flex:1; min-width:0; }
.load-bar { height:5px; background:rgba(0,0,0,.08); border-radius:4px; overflow:hidden; margin-top:6px; flex:1; min-width:60px; }
.load-bar-fill { height:100%; background:var(--accent); border-radius:4px; transition:width .3s; }
.kanban-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:start; }
.kanban-col {
  background:rgba(0,0,0,.035); border:1px solid var(--line); border-radius:14px;
  padding:12px; display:flex; flex-direction:column; gap:10px; min-height:200px;
}
.kanban-col-head { display:flex; justify-content:space-between; align-items:center; padding:2px 4px; }
.kanban-cards { display:flex; flex-direction:column; gap:8px; flex:1; }
.kanban-card {
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:12px; box-shadow:0 1px 3px rgba(0,0,0,.05); cursor:pointer;
  transition:box-shadow .15s, transform .15s;
  overflow:hidden; min-width:0;
}
.kanban-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.1); transform:translateY(-1px); }
.kanban-deadline { font-size:.78rem; font-weight:600; padding:2px 8px; border-radius:20px; background:rgba(0,0,0,.06); }
.kanban-deadline.overdue { background:#fdecea; color:#c0392b; }
.kanban-deadline.soon { background:#fef5e7; color:#b9770e; }
.kanban-move { display:flex; gap:6px; margin-top:10px; justify-content:flex-end; }
.kanban-empty { text-align:center; color:var(--muted); font-size:.8rem; padding:20px 0; }
.kanban-add { width:100%; justify-content:center; }

@media (max-width:920px) {
  .kanban-board { grid-template-columns:1fr; }
}

/* ================= DASHBOARD PERKARA ================= */
.seg-control {
  display:flex; gap:4px; padding:5px; margin:16px 0 12px;
  background:rgba(0,0,0,.045); border:1px solid var(--line); border-radius:13px;
}
.seg-btn {
  flex:1 1 0; justify-content:center;
  display:flex; align-items:center; gap:7px; padding:10px 14px; border:none;
  background:transparent; border-radius:9px; cursor:pointer; font-weight:600;
  font-size:13px; color:var(--muted); transition:.2s; line-height:1;
  white-space:nowrap;
}
.seg-btn:hover { color:var(--ink); }
.seg-btn.active {
  background:linear-gradient(135deg,#c99d5e,#b58a4c 55%,#966f35);
  color:#fff; box-shadow:0 4px 14px rgba(181,138,76,.4);
}
.seg-count { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:rgba(0,0,0,.09); }
.seg-btn.active .seg-count { background:rgba(255,255,255,.22); }
.siko-group .seg-count { background:rgba(0,0,0,.07); color:var(--muted); }
.siko-group.active .seg-count { background:rgba(255,255,255,.22); color:#fff; }
.filter-chips { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px; }
.filter-chip {
  display:flex; align-items:center; gap:7px; padding:7px 14px; border:1px solid var(--line);
  background:var(--surface); border-radius:999px; cursor:pointer; font-weight:600;
  font-size:12.5px; color:var(--muted); transition:.18s;
}
.filter-chip:hover { border-color:var(--accent); color:var(--ink); }
.filter-chip.active { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 2px 6px rgba(181,138,76,.35); }
.chip-count { font-size:11px; font-weight:700; padding:0 6px; border-radius:999px; background:rgba(0,0,0,.08); }
.filter-chip.active .chip-count { background:rgba(255,255,255,.25); }

/* Kartu ikon per jenis litigasi */
.perkara-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 20px; flex-wrap:wrap; }
.perkara-toolbar input { min-width:260px; }
.perkara-toolbar .search-box { flex:1 1 auto; }
.perkara-toolbar .search-box input { width:100%; }
.perkara-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 20px; }
.ps-item {
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; border-left:4px solid var(--accent);
}
.ps-gold { border-left-color:var(--accent); }
.ps-blue { border-left-color:#3a5b8f; }
.ps-amber { border-left-color:#b9770e; }
.ps-green { border-left-color:#2f7a54; }
.digital-cards .ps-item { min-width:0; }
.digital-cards .ps-val { font-size:1rem; word-break:break-word; overflow-wrap:anywhere; line-height:1.35; padding-top:6px; min-height:2.4em; display:flex; align-items:center; }
.digital-cards .ps-lbl { margin-top:4px; }
.tg-auto-item { display:flex; gap:10px; align-items:flex-start; background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.tg-auto-item b { display:block; font-size:.85rem; }
.tg-auto-item span { font-size:.78rem; color:var(--muted); line-height:1.5; }
.tg-member { display:flex; align-items:center; gap:10px; background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:9px 12px; }
.tg-member.on { border-color:#bbf7d0; background:#f0fdf4; }
.tg-member-dot { width:9px; height:9px; border-radius:50%; background:#cbd5e1; flex:none; }
.tg-member.on .tg-member-dot { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); }
.tg-member-info { flex:1; min-width:0; }
.tg-member-info b { display:block; font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tg-member-info span { font-size:.78rem; color:var(--muted); }
.tg-member-status { font-weight:700; color:#22c55e; font-size:.85rem; }
.ps-red { border-left-color:var(--red); }
.ps-val { font-family:var(--font-mono); font-weight:700; font-size:1.6rem; line-height:1.1; }
.ps-money .ps-val { font-size:1.15rem; word-break:break-word; overflow-wrap:anywhere; padding-top:6px; }
.ps-lbl { color:var(--muted); font-size:.8rem; margin-top:2px; }
.perkara-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:20px; margin:0 0 24px; }
.portal-perkara-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; margin-top:8px; }
.portal-perkara-card {
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 4px 18px rgba(23,24,28,.07); cursor:pointer;
  transition:box-shadow .2s, transform .2s, border-color .2s;
  display:flex; flex-direction:column;
}
.portal-perkara-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, #c99d5e, #b58a4c, #966f35, transparent);
}
.portal-perkara-card:hover {
  box-shadow:0 16px 34px rgba(181,138,76,.2);
  transform:translateY(-4px); border-color:var(--accent);
}
.portal-perkara-card .pc-head {
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  padding:20px 20px 14px;
}
.portal-perkara-card .pc-body { padding:0 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.portal-perkara-card .pc-nomor { font-size:1.05rem; color:var(--noir); }
.portal-perkara-card .pc-badges { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.portal-perkara-card .pc-pihak { font-weight:600; font-size:.95rem; color:var(--noir); display:flex; align-items:center; gap:7px; }
.portal-perkara-card .pc-pihak::before {
  content:''; width:8px; height:8px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,#c99d5e,#966f35);
}
.portal-perkara-card .pc-meta {
  background:var(--paper); border:1px solid var(--line-2); border-radius:12px;
  padding:10px 12px; gap:6px;
}
.portal-perkara-card .pc-meta-row { align-items:center; }
.portal-perkara-card .pc-meta-k { min-width:70px; }
.portal-perkara-card .pc-foot {
  margin-top:14px; padding:14px 20px 18px; border-top:1px solid var(--line-2);
}
.portal-perkara-card .pc-btn-detail {
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,#c99d5e,#b58a4c 55%,#966f35) !important;
  color:#fff !important; border:none !important;
  padding:8px 16px; border-radius:10px; font-weight:700;
  box-shadow:0 4px 14px rgba(181,138,76,.35);
}
.portal-perkara-card .pc-btn-detail:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(181,138,76,.45); }

.mon-filter { flex:1 1 100%; }
.mon-kartu {
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 4px 18px rgba(23,24,28,.07); cursor:pointer;
  transition:box-shadow .2s, transform .2s, border-color .2s;
  display:flex; flex-direction:column; gap:10px; padding:0;
}
.mon-kartu::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, #c99d5e, #b58a4c, #966f35, transparent);
}
.mon-kartu:hover { box-shadow:0 16px 34px rgba(181,138,76,.2); transform:translateY(-4px); border-color:var(--accent); }
.mon-kartu .pc-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:20px 20px 10px; }
.mon-kartu .pc-body { padding:0 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.mon-kartu .pc-nomor { font-size:1.05rem; }
.mon-kartu .pc-meta { gap:6px; }
.mon-kartu .pc-foot {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:6px; padding:12px 20px 18px; border-top:1px solid var(--line-2);
}

/* Brand header klien */
.brand-klien-logo { max-height:68px; max-width:78px; width:auto; height:auto; object-fit:contain; }
.hero-premium {
  background:
    radial-gradient(1200px 500px at 20% -20%, rgba(168,130,62,.14), transparent 60%),
    radial-gradient(1000px 400px at 92% 130%, rgba(22,36,61,.06), transparent 55%),
    linear-gradient(150deg, #f8f5f0 0%, #f1ece3 55%, #e9e2d6 100%);
  border:1px solid rgba(168,130,62,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 18px 40px rgba(23,24,28,.08);
}
.hero-page { padding:22px 26px; border-radius:18px; margin:0 0 24px; }
.hero-page-top { display:flex; justify-content:space-between; align-items:center; }
.hero-page-title { text-align:center; margin-top:14px; }
.hero-page-ico {
  width:56px; height:56px; border-radius:16px; margin:0 auto 12px;
  background:linear-gradient(135deg,#c99d5e,#966f35); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(181,138,76,.4);
}
.hero-page-title h1 { font-family:var(--head); font-size:1.45rem; font-weight:700; color:var(--ink); margin:0; }
.hero-page-title p { color:var(--muted); font-size:.85rem; margin:6px 0 0; }

.hero-dash { padding:32px 36px; border-radius:20px; margin:0; }
.hero-dash-top { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.hero-dash-greet {
  font-family:var(--head); font-size:.9rem; font-weight:700; color:var(--accent-2);
  letter-spacing:.05em;
}
.hero-dash-date { font-size:.8rem; color:var(--muted); letter-spacing:.03em; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hd-clock {
  font-family:var(--font-mono); font-size:.85rem; font-weight:600;
  background:rgba(181,138,76,.16); border:1px solid rgba(181,138,76,.35);
  color:var(--accent); border-radius:8px; padding:3px 10px;
}
.hero-dash-body { margin-top:18px; }
.hero-dash-sub { color:var(--muted); font-size:.9rem; margin-top:8px; text-align:center; text-wrap:balance; max-width:60ch; margin-left:auto; margin-right:auto; }
.hero-dash-stats {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:26px;
  margin:0 0 28px;
}
.hd-stat {
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px;
  position:relative; overflow:hidden;
  background:
    radial-gradient(600px 220px at 15% -30%, rgba(181,138,76,.20), transparent 60%),
    linear-gradient(150deg, #ffffff 0%, #f8f2e2 100%);
  border:1px solid rgba(181,138,76,.38);
  border-radius:16px; padding:22px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 12px 28px rgba(90,70,30,.10);
}
.hd-stat::after { content:''; position:absolute; top:-46px; right:-46px; width:130px; height:130px; border-radius:50%; background:radial-gradient(circle, rgba(181,138,76,.18), transparent 70%); pointer-events:none; }
.hd-click { cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.hd-click:hover { transform:translateY(-3px); border-color:rgba(181,138,76,.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 16px 34px rgba(90,70,30,.14); }
.hd-click:active { transform:translateY(-1px); }
.hd-click .hd-lbl { transition:color .18s ease; }
.hd-click:hover .hd-lbl { color:var(--accent-2); }
.hd-ico {
  width:44px; height:44px; border-radius:13px; flex:none;
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 6px 14px rgba(150,111,53,.30); margin-bottom:2px;
}
.hd-gold { background:linear-gradient(135deg,#d4ab6a,#966f35); }
.hd-blue { background:linear-gradient(135deg,#5b8def,#3a5b8f); }
.hd-green { background:linear-gradient(135deg,#34b373,#1f7a4f); }
.hd-amber { background:linear-gradient(135deg,#f0a13d,#b9770e); }
.hd-val { font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--ink); line-height:1.1; overflow-wrap:anywhere; word-break:break-word; max-width:100%; }
.hd-val-money { font-size:20px; letter-spacing:.01em; }
.hd-lbl { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-top:2px; font-weight:600; }
@media (min-width:601px) and (max-width:820px) {
  .hero-dash-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
}
@media (max-width:600px) {
  .hero-dash-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:14px 0 22px; }
  .hd-stat { padding:16px 10px; gap:6px; }
  .hd-ico { width:38px; height:38px; border-radius:11px; }
  .hd-val { font-size:20px; }
  .hd-val-money { font-size:14px; line-height:1.25; }
  .hd-lbl { font-size:9px; }
}
.brand-welcome-line { min-height:1.7rem; display:flex; align-items:flex-start; justify-content:center; }
.tw-area { position:relative; width:100%; display:block !important; }
.tw-spacer { visibility:hidden; display:block; }
.tw-type { position:absolute; left:0; right:0; top:0; text-align:center; display:block; }
@media (max-width:520px) {
  .brand-welcome-line { min-height:2.6rem; font-size:1rem !important; margin-top:6px; }
  .brand-firm { font-size:1.25rem; }
  .brand-firm-sm { font-size:1.05rem; }
  .brand-ws-badge { font-size:.58rem; letter-spacing:.14em; padding:4px 8px; }
  .hero-dash { padding:20px 18px; border-radius:16px; }
  .hero-dash-body { margin-top:14px; }
  .hero-dash-sub { font-size:.85rem; margin-top:6px; }
}
.brand-welcome-line { margin-top:8px; }
.brand-firm-row { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.brand-firm { font-family:var(--head); font-size:2rem; font-weight:800; color:var(--ink); letter-spacing:.01em; line-height:1.1; }
.brand-firm-sm { font-size:1.35rem; }
.brand-ws-badge {
  font-family:var(--font-body); font-size:.78rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent-ink,#0c0d11);
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); padding:5px 12px;
  border-radius:999px; box-shadow:0 4px 14px rgba(181,138,76,.28); white-space:nowrap;
}
.brand-klien-welcome { animation:welcomeDrop .9s cubic-bezier(.22,1,.36,1) both; }
@keyframes welcomeDrop {
  0% { opacity:0; transform:translateY(-22px); }
  100% { opacity:1; transform:translateY(0); }
}
.klien-announce {
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg, #f8f5f0, #f0ebdf);
  border:1px solid #ecd9b5; border-left:4px solid var(--accent);
  border-radius:12px; padding:11px 16px; font-size:.85rem; color:#5c4a2a;
  box-shadow:0 2px 10px rgba(181,138,76,.12);
}
/* Portal klien: ringkasan, sorotan agenda, progres tahap */
.klien-update-bar {
  display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:12px;
  background:#fbf7ec; border:1px solid #ecd9b5; margin-bottom:16px; font-size:.85rem; color:#5c4a2a;
}
.klien-update-bar i { flex:none; color:var(--accent); }
.klien-update-bar b { font-weight:700; }
.klien-update-bar button { margin-left:auto; flex:none; }
.klien-next {
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:14px;
  background:linear-gradient(135deg,#fdf8ee,#f6efdd); border:1px solid #eee4cf;
  box-shadow:0 2px 12px rgba(181,138,76,.12); margin-bottom:16px;
}
.klien-next-ico {
  width:44px; height:44px; border-radius:12px; flex:none; color:#fff;
  background:linear-gradient(135deg,#c99d5e,#966f35);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(181,138,76,.35);
}
.klien-next-body { flex:1; min-width:0; }
.klien-next-k { font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.08em; color:var(--accent-2); font-weight:700; }
.klien-next-t { font-family:var(--font-display); font-weight:700; font-size:var(--fs-lg); color:var(--ink); line-height:1.3; overflow-wrap:anywhere; }
.klien-next-s { font-size:var(--fs-sm); color:var(--muted); margin-top:3px; }
.klien-next-cd { flex:none; text-align:right; }
.klien-next-cd-val { font-family:var(--font-display); font-weight:800; color:var(--accent-2); font-size:1rem; }
.klien-progress-head { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:14px; }
.klien-progress-stage { font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700; color:var(--ink); margin-top:2px; }
.klien-progress-pct { font-family:var(--font-display); font-size:1.3rem; font-weight:800; color:var(--accent-2); }
.klien-steps { display:flex; align-items:flex-start; }
.klien-step { flex:1; position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; min-width:0; }
.klien-step::before, .klien-step::after { content:''; position:absolute; top:9px; height:2px; background:var(--line); z-index:0; }
.klien-step::before { left:0; right:50%; }
.klien-step::after { left:50%; right:0; }
.klien-step:first-child::before { display:none; }
.klien-step:last-child::after { display:none; }
.klien-step.done::before, .klien-step.current::before { background:var(--accent); }
.klien-step.done::after { background:var(--accent); }
.klien-step-dot {
  width:20px; height:20px; border-radius:50%; position:relative; z-index:1;
  background:var(--surface); border:2px solid var(--line); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.klien-step.done .klien-step-dot { background:var(--accent); border-color:var(--accent); }
.klien-step.current .klien-step-dot { background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px rgba(181,138,76,.18); }
.klien-step-lbl { font-size:var(--fs-micro); font-weight:600; color:var(--muted); line-height:1.3; overflow-wrap:anywhere; }
.klien-step.done .klien-step-lbl, .klien-step.current .klien-step-lbl { color:var(--accent-2); }
.klien-feed-agenda {
  display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:12px;
  background:var(--surface); border:1px dashed var(--line);
}
.klien-feed-dot {
  width:30px; height:30px; border-radius:9px; flex:none; color:var(--accent-2);
  background:rgba(181,138,76,.12); border:1px solid #eee4cf;
  display:flex; align-items:center; justify-content:center;
}
/* Kartu informasi portal klien (konsep baru, konsisten) */
.klien-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:18px 20px; margin-bottom:16px; }
.klien-card:last-child { margin-bottom:0; }
.klien-card-head { display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:var(--fs-lg); color:var(--ink); margin-bottom:14px; }
.klien-card-head i { color:var(--accent-2); flex:none; }
.klien-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px 18px; }
.klien-fact { border-left:2px solid var(--line); padding-left:12px; min-width:0; }
.klien-fact .k { font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.07em; color:var(--faint); font-weight:700; }
.klien-fact .v { font-size:var(--fs-base); font-weight:600; color:var(--ink); margin-top:3px; overflow-wrap:anywhere; }
.klien-fact.wide { grid-column:1 / -1; }
.klien-empty-inline { color:var(--muted); font-size:var(--fs-sm); padding:4px 0; }
.klien-parties { display:flex; flex-direction:column; gap:12px; }
.klien-party { border-left:2px solid var(--accent); padding-left:12px; }
.klien-party-role { font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.07em; color:var(--accent-2); font-weight:700; }
.klien-party-nama { font-size:var(--fs-base); color:var(--ink); font-weight:600; }
.klien-section-head { display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:var(--fs-lg); color:var(--ink); margin:0 0 14px; }
.klien-section-head i { color:var(--accent-2); flex:none; }
.klien-list { display:flex; flex-direction:column; gap:12px; }
.klien-item { border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--surface); }
.klien-item-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.klien-item-ico { width:34px; height:34px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center; background:rgba(181,138,76,.12); color:var(--accent-2); }
.klien-item.is-agenda .klien-item-ico { background:rgba(58,91,143,.1); color:var(--blue); }
.klien-item-title { font-family:var(--font-display); font-weight:700; font-size:var(--fs-md); color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.klien-item-date { font-size:var(--fs-xs); color:var(--muted); margin-left:auto; flex:none; }
.klien-item-body { font-size:var(--fs-base); color:var(--ink); line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.klien-item-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.klien-empty { text-align:center; color:var(--muted); padding:32px 10px; font-size:var(--fs-sm); }
.klien-empty i { width:22px; height:22px; opacity:.5; display:block; margin:0 auto 6px; }
/* Kontak cepat kantor */
.klien-contact {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 18px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); margin-bottom:16px;
}
.klien-contact-main { display:flex; align-items:center; gap:12px; flex:1 1 240px; min-width:0; }
.klien-contact-ico {
  width:40px; height:40px; border-radius:11px; flex:none; color:#fff;
  background:linear-gradient(135deg,#c99d5e,#966f35);
  display:flex; align-items:center; justify-content:center;
}
.klien-contact-k { font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.08em; color:var(--accent-2); font-weight:700; }
.klien-contact-t { font-family:var(--font-display); font-weight:700; font-size:var(--fs-md); color:var(--ink); }
.klien-contact-s { font-size:var(--fs-sm); color:var(--muted); }
.klien-contact-actions { display:flex; gap:8px; flex-wrap:wrap; flex:none; }
.klien-contact-note { flex-basis:100%; font-size:var(--fs-xs); color:var(--faint); display:flex; align-items:center; gap:6px; }
/* Pengumuman premium */
.klien-announce-ico {
  width:30px; height:30px; border-radius:9px; flex:none; color:#fff;
  background:linear-gradient(135deg,#c99d5e,#966f35);
  display:flex; align-items:center; justify-content:center;
  animation:announcePulse 2.6s ease-in-out infinite;
}
@keyframes announcePulse { 0%,100% { box-shadow:0 0 0 0 rgba(181,138,76,.35); } 50% { box-shadow:0 0 0 6px rgba(181,138,76,0); } }
.klien-announce-lbl { font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.08em; color:var(--accent-2); font-weight:700; }
/* Progres pelunasan */
.pay-progress { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:16px; box-shadow:var(--shadow); }
.pay-progress-top { display:flex; justify-content:space-between; align-items:center; font-size:var(--fs-sm); color:var(--muted); margin-bottom:8px; }
.pay-progress-top b { color:var(--accent-2); font-weight:700; }
.pay-progress-bar { height:9px; border-radius:99px; background:var(--line-2); overflow:hidden; }
.pay-progress-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,#c99d5e,#a8823e); transition:width .4s ease; }
.pay-progress-sub { font-size:var(--fs-xs); color:var(--faint); margin-top:7px; }
/* Skeleton loading */
.skeleton-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow); }
.sk-line { height:12px; border-radius:7px; margin-bottom:10px; background:linear-gradient(90deg,#eeeae2 25%,#f6f3ee 37%,#eeeae2 63%); background-size:400% 100%; animation:skShimmer 1.4s ease infinite; }
.sk-line:last-child { margin-bottom:0; }
.sk-30 { width:30%; } .sk-40 { width:40%; } .sk-60 { width:60%; } .sk-70 { width:70%; } .sk-80 { width:80%; } .sk-90 { width:90%; } .sk-95 { width:95%; }
@keyframes skShimmer { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }
/* Kuitansi & Ringkasan (cetak) */
.kuitansi-sheet, .ringkasan-sheet { background:#fff; border:1px solid var(--line); border-radius:12px; padding:24px 26px; color:var(--ink); }
.kuitansi-kop, .ringkasan-kop { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; border-bottom:2px solid var(--accent); padding-bottom:12px; margin-bottom:16px; }
.kuitansi-firm { font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:var(--ink); }
.kuitansi-tag { font-size:var(--fs-xs); color:var(--muted); }
.kuitansi-addr { font-size:var(--fs-xs); color:var(--faint); margin-top:3px; }
.kuitansi-title, .ringkasan-title { text-align:center; font-family:var(--font-display); font-weight:800; letter-spacing:.12em; font-size:1.15rem; color:var(--ink); margin:6px 0 2px; }
.kuitansi-no { text-align:center; font-size:var(--fs-sm); color:var(--muted); margin-bottom:18px; }
.kuitansi-rows { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.kuitansi-row { display:flex; gap:14px; font-size:var(--fs-base); }
.kuitansi-row > span:first-child { flex:none; width:150px; color:var(--muted); }
.kuitansi-row > span:last-child { flex:1; min-width:0; font-weight:600; }
.kuitansi-amount { text-align:right; font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--accent-2); border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); padding:10px 0; margin-bottom:20px; }
.kuitansi-sign { text-align:right; font-size:var(--fs-base); line-height:1.9; }
.kuitansi-sign-space { height:52px; }
.ringkasan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 20px; margin-bottom:16px; }
.ringkasan-item .k { font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.ringkasan-item .v { font-size:var(--fs-base); font-weight:600; }
.ringkasan-block { margin-bottom:14px; }
.ringkasan-block .k { font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.06em; color:var(--accent-2); font-weight:700; margin-bottom:4px; }
.ringkasan-block .v { font-size:var(--fs-base); line-height:1.6; }
.ringkasan-foot { display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:10px; margin-top:8px; font-size:var(--fs-xs); color:var(--muted); }
@media (max-width:430px) {
  .klien-next { flex-wrap:wrap; }
  .klien-next-cd { width:100%; text-align:left; }
  .klien-step-lbl { font-size:9.5px; }
  .kuitansi-row > span:first-child { width:110px; }
  .ringkasan-grid { grid-template-columns:1fr; }
}
.agenda-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:20px; margin:0 0 24px; }
.agenda-card {
  position:relative; display:flex; gap:14px; padding:18px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); transition:box-shadow .18s, transform .18s, border-color .18s;
}
.agenda-card:hover { box-shadow:0 10px 26px rgba(181,138,76,.18); transform:translateY(-3px); border-color:var(--accent); }
.agenda-card.is-past { opacity:.55; border-style:dashed; }
.agenda-date {
  flex:none; width:54px; height:60px; border-radius:12px;
  background:linear-gradient(135deg,#c99d5e,#966f35); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.agenda-date .ad-d { font-family:var(--head); font-size:22px; font-weight:700; line-height:1; }
.agenda-date .ad-m { font-size:9px; letter-spacing:.06em; text-transform:uppercase; margin-top:3px; opacity:.9; }
.agenda-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.agenda-kegiatan { font-family:var(--head); font-weight:700; font-size:1rem; line-height:1.3; word-break:break-word; overflow-wrap:anywhere; }
.agenda-meta { display:flex; gap:10px; flex-wrap:wrap; font-size:.8rem; color:var(--muted); }
.agenda-badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.agenda-actions { display:flex; gap:4px; align-items:flex-start; }
.agenda-actions button {
  border:1px solid var(--line); background:var(--surface); border-radius:8px;
  padding:5px 7px; cursor:pointer; color:var(--muted); transition:.15s;
}
.agenda-actions button:hover { background:var(--noir); color:#fff; border-color:var(--noir); }
@keyframes twBlink { 0%,100% { opacity:1; } 50% { opacity:0; } }
.brand-glow {
  color:var(--navy);
  text-shadow:0 0 8px rgba(181,138,76,.30), 0 0 20px rgba(181,138,76,.22), 0 0 42px rgba(181,138,76,.12);
  animation:brandGlowIn 1.6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes brandGlowIn {
  0% { opacity:0; text-shadow:0 0 2px rgba(181,138,76,.1); filter:blur(2px); }
  100% { opacity:1; text-shadow:0 0 8px rgba(181,138,76,.45), 0 0 20px rgba(181,138,76,.35), 0 0 42px rgba(181,138,76,.2); filter:blur(0); }
}
.perkara-card {
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:18px; box-shadow:var(--shadow); cursor:pointer;
  transition:box-shadow .15s, transform .15s; display:flex; flex-direction:column; gap:10px;
}
.perkara-card:hover { box-shadow:0 6px 18px rgba(0,0,0,.09); transform:translateY(-2px); }
.perkara-card.is-selesai { opacity:.65; background:var(--paper); border-style:dashed; }
.perkara-card.is-selesai::after {
  content:'ARSIP'; position:absolute; top:10px; right:-34px; transform:rotate(38deg);
  background:rgba(25,26,31,.08); color:var(--muted); font-size:10px; font-weight:700;
  letter-spacing:.08em; padding:3px 34px;
}
.klien-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; }
.klien-card {
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 4px 18px rgba(23,24,28,.07); cursor:pointer;
  transition:box-shadow .2s, transform .2s, border-color .2s;
  display:flex; flex-direction:column; gap:12px; padding:20px;
}
.klien-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, #c99d5e, #b58a4c, #966f35, transparent);
}
.klien-card:hover { box-shadow:0 16px 34px rgba(181,138,76,.2); transform:translateY(-4px); border-color:var(--accent); }
.kc-head { display:flex; align-items:center; gap:12px; }
.kc-av {
  width:46px; height:46px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,#c99d5e,#966f35); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--head); font-weight:700; font-size:1.05rem;
  box-shadow:0 4px 12px rgba(181,138,76,.3);
}
.kc-nama { font-family:var(--head); font-weight:700; font-size:1.05rem; line-height:1.3; }
.kc-perusahaan { font-size:.85rem; color:var(--muted); }
.klien-card .pc-meta { flex:1; }
.kc-foot {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:12px; border-top:1px solid var(--line-2);
}
.pc-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.pc-nomor { font-family:var(--head); font-weight:700; font-size:1.05rem; line-height:1.3; }
.pc-badges { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.pc-pihak { font-weight:600; font-size:.95rem; color:var(--noir); }
.pc-meta { display:flex; flex-direction:column; gap:4px; background:var(--paper); border:1px solid var(--line-2); border-radius:10px; padding:10px 12px; }
.pc-meta-row { display:flex; gap:10px; font-size:.85rem; }
.pc-meta-k { color:var(--faint); min-width:62px; }
.pc-meta-v { color:var(--ink); }
.pc-money { font-family:var(--font-mono); font-weight:600; }
.pc-foot { display:flex; justify-content:space-between; align-items:center; margin-top:2px; }
.pc-pic { display:flex; align-items:center; gap:8px; }
.pc-pic-img { width:30px; height:30px; border-radius:50%; object-fit:cover; }
.pc-pic-av { width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; }
.pc-pic-name { font-size:.8rem; color:var(--muted); }
.pc-actions { display:flex; gap:6px; align-items:center; }
.pc-actions button {
  border:1px solid var(--line); background:var(--surface); border-radius:8px;
  padding:6px 9px; cursor:pointer; font-size:13px; color:var(--muted); transition:.15s;
}
.pc-actions button:hover { background:var(--noir); color:#fff; border-color:var(--noir); }
.pc-btn-detail {
  display:inline-flex; align-items:center; gap:5px; font-weight:600; color:var(--noir) !important;
  background:var(--paper) !important; border-color:var(--accent) !important;
}
.pc-btn-detail:hover { background:var(--accent) !important; color:#fff !important; }
.tbl .btn-back-pill {
  display:inline-flex; align-items:center; gap:5px; font-weight:600;
  color:var(--noir) !important; background:var(--paper) !important; border-color:var(--accent) !important;
}
.tbl .btn-back-pill:hover { background:linear-gradient(135deg, #c99d5e 0%, var(--accent) 55%, var(--accent-2) 100%) !important; color:#fff !important; border-color:var(--accent) !important; }
.perkara-empty { grid-column:1/-1; text-align:center; color:var(--faint); padding:48px 20px; font-size:13.5px; }

@media (max-width:920px) {
  .perkara-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .perkara-grid { grid-template-columns:1fr; }
  .portal-perkara-grid { grid-template-columns:1fr; }
  .perkara-toolbar { flex-direction:column; align-items:stretch; }
  .perkara-toolbar input { min-width:0; }
}

/* ================= DETAIL PERKARA UNIVERSAL ================= */
.detail-hasil { margin-top:14px; padding:14px 16px; background:var(--paper); border:1px solid var(--line); border-radius:12px; }
.detail-hasil .k { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:600; margin-bottom:6px; }
.detail-hasil .v { color:var(--ink); font-size:.95rem; }

/* Para Pihak */
/* Produk Perkara */
.pk-guide {
  display:flex; gap:10px; align-items:flex-start; padding:12px 14px; margin:0 0 12px;
  background:linear-gradient(135deg,#fbf7ec,#f2ecdd); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:10px; font-size:.82rem; line-height:1.5; color:var(--ink);
}
.pk-guide b { color:var(--accent-2); }
.pk-guide i { color:var(--accent); margin-top:2px; }
.pk-list { display:flex; flex-direction:column; gap:12px; }
.pk-card {
  background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
}
.pk-flow { display:flex; align-items:flex-start; position:relative; margin:14px 0 4px; }
.pk-flow::before {
  content:''; position:absolute; top:9px; left:6%; right:6%; height:3px; background:var(--line-2); border-radius:99px;
}
.pk-step { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; z-index:1; }
.pk-dot {
  width:18px; height:18px; border-radius:50%; background:var(--surface);
  border:3px solid var(--line); transition:.3s;
}
.pk-step.done .pk-dot { background:var(--accent); border-color:var(--accent); }
.pk-step.act .pk-dot { box-shadow:0 0 0 6px rgba(181,138,76,.18); border-color:var(--accent-2); }
.pk-step-lbl { margin-top:6px; font-size:10px; font-weight:600; color:var(--faint); }
.pk-step.done .pk-step-lbl { color:var(--noir); }
.pk-step.act .pk-step-lbl { color:var(--accent-2); font-weight:700; }
.btn-pk-move {
  display:inline-flex; align-items:center; gap:5px; border:1px solid var(--accent); background:rgba(181,138,76,.1);
  color:var(--accent-2); border-radius:8px; padding:5px 9px; font-size:12px; cursor:pointer; transition:.15s; font-weight:600;
}
.btn-pk-move:hover:not(:disabled) { background:var(--accent); color:#fff; }
.btn-pk-move:disabled { opacity:.45; cursor:not-allowed; }
.btn-pk-flag {
  display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); background:var(--surface);
  color:var(--muted); border-radius:8px; padding:5px 9px; font-size:12px; cursor:pointer; transition:.15s;
}
.btn-pk-flag:hover { border-color:var(--red); color:var(--red); background:#f5e9e6; }
.pk-card.perlu-revisi { border-color:var(--red); background:#fdf7f6; }
.pk-catatan {
  display:flex; gap:8px; align-items:flex-start; margin-top:8px; padding:9px 12px;
  background:rgba(181,138,76,.08); border:1px solid var(--line); border-radius:8px; color:var(--ink);
}
.pk-catatan i { color:var(--accent-2); margin-top:2px; }

/* Gelar Perkara */
.gl-list { display:flex; flex-direction:column; gap:12px; }
.gl-card { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.gl-catatan { margin-top:10px; padding:9px 12px; background:var(--surface); border:1px solid var(--line); border-radius:8px; }
.gl-catatan-t { display:flex; align-items:center; gap:5px; font-size:.75rem; font-weight:700; color:var(--accent-2); margin-bottom:4px; }
.gl-catatan-b { font-size:.82rem; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere; }
.gl-produk { margin-top:4px; }
.gl-produk-item { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 10px; background:var(--surface); border:1px solid var(--line); border-radius:8px; margin-bottom:6px; }
.gl-aksi { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-2); }
.lampiran-box { margin-top:12px; padding-top:12px; border-top:1px solid var(--line-2); }
.lampiran-head { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:var(--fs-xs); font-weight:700; color:var(--muted); margin-bottom:8px; }
.lampiran-head span { display:inline-flex; align-items:center; gap:6px; }
.lampiran-list { display:flex; flex-direction:column; gap:6px; }
.lampiran-item { display:flex; align-items:center; gap:8px; padding:7px 10px; background:var(--surface); border:1px solid var(--line); border-radius:9px; }
.lampiran-nama { flex:1; min-width:0; font-size:var(--fs-sm); font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lampiran-acts { display:inline-flex; gap:5px; flex:none; }
.lampiran-acts .file-act { padding:5px 8px; }
.lampiran-draf { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:600; color:var(--accent-2); margin-bottom:8px; }
.lampiran-draf:hover { text-decoration:underline; }
.gl-form-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:14px; margin-bottom:18px; min-width:0; max-width:100%; }
.gl-form-meta .field { min-width:0; max-width:100%; }
.gl-form-meta .field input, .gl-form-meta .field select, .gl-form-meta .field textarea { width:100%; min-width:0; max-width:100%; }
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { width:100%; min-width:0; max-width:100%; }
/* iOS/WebKit: input tanggal/waktu ber-display:inline-flex & mengabaikan width:100% (iOS <=17) → bisa meluber keluar layar */
@supports (-webkit-touch-callout: none) {
  input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
    -webkit-appearance:none; appearance:none;
    display:block; width:100%; min-width:0; max-width:100%; box-sizing:border-box;
  }
}
.gl-form-isi { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.gl-form-isi .field { min-width:0; }
.gl-form-isi textarea { min-height:150px; }
@media (max-width:760px) {
  .gl-form-isi { grid-template-columns:1fr; }
}

.pihak-cards { display:flex; flex-direction:column; gap:8px; }
.pihak-card {
  display:grid; grid-template-columns:180px 1fr auto; align-items:center; gap:14px; padding:12px 16px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
}
.pihak-role {
  justify-self:stretch; align-self:center; text-align:center; padding:6px 10px; border-radius:10px; font-size:10px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; background:#f6f1e6; color:#966f35; border:1px solid #eee4cf;
  white-space:normal; overflow-wrap:anywhere; line-height:1.3; word-break:break-word;
}
.pihak-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pihak-nama { font-weight:700; color:var(--noir); font-size:.95rem; }
.pihak-meta { color:var(--muted); font-size:var(--fs-sm); display:flex; align-items:center; gap:5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pihak-meta i { flex:none; }
.pihak-actions { display:flex; gap:6px; }
.pihak-actions button {
  border:1px solid var(--line); background:var(--surface); border-radius:8px;
  padding:6px 9px; cursor:pointer; font-size:13px; color:var(--muted); transition:.15s;
}
.pihak-actions button:hover { background:var(--noir); color:#fff; border-color:var(--noir); }

/* Timeline horizontal (tahapan perkara) — animasi hidup */
.htl { display:flex; align-items:flex-start; position:relative; padding:12px 0 14px; overflow:hidden; }
.htl::before {
  content:''; position:absolute; top:27px; left:var(--start,12.5%); right:var(--start,12.5%); height:4px; background:var(--line-2); border-radius:99px;
}
.htl::after {
  content:''; position:absolute; top:27px; left:var(--start,12.5%); height:4px; border-radius:99px; z-index:0;
  width:var(--pct,0%); background:linear-gradient(90deg,#c99d5e,#966f35);
  transition:width .9s cubic-bezier(.22,1,.36,1);
}
.htl::after {
  background:linear-gradient(90deg,#c99d5e,#966f35,#c99d5e); background-size:200% 100%;
  animation:htlShimmer 2.3s linear infinite;
}
.htl-step { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; text-align:center; z-index:1; }
.htl-dot {
  width:36px; height:36px; border-radius:50%; background:var(--surface);
  border:3px solid var(--line); transition:.3s; position:relative;
}
.htl-dot::before {
  content:''; position:absolute; inset:50%; transform:translate(-50%,-50%);
  width:8px; height:8px; border-radius:50%; background:var(--faint); transition:.3s;
}
.htl-step.done .htl-dot {
  background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 5px rgba(181,138,76,.18);
}
.htl-step.done .htl-dot::before { background:#fff; }
.htl-step.done .htl-dot::after {
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(181,138,76,.4); animation:htlPing 1.8s cubic-bezier(0,0,.2,1) infinite;
}
.htl-dot.active { border-color:var(--accent-2); box-shadow:0 0 0 9px rgba(181,138,76,.12); }
.htl-dot.active::after {
  content:''; position:absolute; inset:-7px; border-radius:50%;
  border:3px solid rgba(185,119,14,.6); animation:htlPing 1.3s ease-out infinite;
}
.htl-step.done .htl-label { color:var(--noir); }
.htl-label { margin-top:12px; font-size:12px; font-weight:600; color:var(--faint); padding:0 4px; transition:.3s; }
.htl-step.done .htl-label { font-weight:700; color:var(--noir); }
.htl-step.done .htl-label::selection { background:transparent; }
@keyframes htlPing {
  0% { transform:scale(.7); opacity:.8; }
  80%,100% { transform:scale(1.9); opacity:0; }
}
@keyframes htlShimmer {
  0% { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* Kolom tahapan pada kartu perkara — progress hidup */
.perkara-tahap { display:flex; flex-direction:column; gap:5px; margin-top:2px; }
.perkara-tahap-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.perkara-tahap-lbl {
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  color:var(--accent-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.perkara-tahap-lbl.done { color:var(--green); }
.perkara-tahap-pct { font-size:11px; font-weight:700; color:var(--muted); flex:none; }
.perkara-tahap-bar { height:6px; border-radius:99px; background:var(--line-2); overflow:hidden; position:relative; }
.perkara-tahap-fill {
  height:100%; border-radius:99px; background:linear-gradient(90deg,#e0a63c,#c99d5e,#966f35);
  transition:width .7s cubic-bezier(.22,1,.36,1); position:relative; overflow:hidden;
}
.perkara-tahap-fill::after {
  content:''; position:absolute; inset:0; width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:afFlow 1.6s linear infinite;
}
.perkara-tahap-fill.done { background:var(--green); }
.perkara-tahap-fill.done::after { background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); }

/* Para pihak di kartu — adaptif, rapi, truncate */
.pc-pihak {
  font-weight:600; font-size:.95rem; color:var(--noir);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0;
}

@media (max-width:640px) {
  .htl-label { font-size:10px; }
  .htl-dot { width:30px; height:30px; }
  .pihak-card { grid-template-columns:1fr; gap:8px; }
  .pihak-role { justify-self:stretch; text-align:left; }
  .pihak-actions { justify-content:flex-start; }
}

/* ================= DISKUSI CHAT (detail perkara) ================= */
.chat-wrap { display:flex; flex-direction:column; gap:14px; padding:8px 4px 18px; max-height:480px; overflow-y:auto; }
.disc-guide {
  display:flex; gap:10px; align-items:flex-start; padding:12px 14px; margin:0 0 10px;
  background:linear-gradient(135deg,#fbf7ec,#f2ecdd); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:10px; font-size:.82rem; line-height:1.5; color:var(--ink);
}
.disc-guide b { color:var(--accent-2); }
.disc-guide i { color:var(--accent); margin-top:2px; }
.chat-msg { display:flex; gap:12px; align-items:flex-start; }
.chat-av {
  width:36px; height:36px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; flex-shrink:0;
}
.chat-body {
  flex:1; min-width:0; background:var(--paper); border:1px solid var(--line);
  border-radius:14px; padding:12px 14px;
}
.chat-head { display:flex; align-items:baseline; gap:10px; margin-bottom:4px; flex-wrap:wrap; }
.chat-name { font-weight:700; font-size:var(--fs-sm); color:var(--noir); }
.chat-when { color:var(--muted); font-size:var(--fs-xs); }
.chat-text { white-space:pre-wrap; font-size:var(--fs-base); line-height:1.55; color:var(--ink); }
.chat-file {
  display:inline-flex; align-items:center; gap:7px; margin-top:8px;
  background:rgba(181,138,76,.12); border:1px dashed rgba(181,138,76,.5);
  color:var(--accent-2); border-radius:8px; padding:6px 10px;
  font-size:.8rem; font-weight:600; text-decoration:none; max-width:100%;
}
.chat-file span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-actions { margin-top:8px; display:flex; }
.chat-input { display:flex; gap:10px; padding:14px; border-top:1px solid var(--line-2); background:var(--paper); }

@media (max-width:640px) {
  .chat-input { flex-direction:column; }
}

/* ================= LAPORAN PENANGANAN PERKARA ================= */
.lp-card {
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; box-shadow:var(--shadow);
}
.lp-head {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 16px; border-bottom:1px solid var(--line-2); background:var(--paper);
}
.lp-badge {
  padding:3px 12px; border-radius:999px; font-size:10.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; background:#f6f1e6; color:#966f35; border:1px solid #eee4cf;
}
.lp-date { font-weight:600; font-size:var(--fs-sm); color:var(--ink); }
.lp-by { margin-left:auto; color:var(--faint); font-size:var(--fs-xs); }
.lp-body { padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.lp-section { }
.lp-label { font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:700; margin-bottom:4px; }
.lp-label-red { color:#b3424e; }
.lp-label-blue { color:#3a5b8f; }
.lp-text { white-space:pre-wrap; font-size:var(--fs-base); color:var(--ink); line-height:1.55; }
.lp-text-mono { font-family:var(--font-mono); font-size:var(--fs-sm); }
.lp-print { margin-left:auto; }

/* ================= CETAK LPP ================= */
.lpp-modal { max-width:760px; width:100%; }
.lpp-sheet {
  background:#fff; color:#111; padding:28px 44px; border:1px solid var(--line);
  border-radius:4px; font-family:'Book Antiqua', 'Palatino Linotype', Georgia, serif; font-size:13px;
  overflow-wrap:anywhere; word-break:break-word;
}
/* KOP: logo kiri, kecil */
.lpp-kop { margin-bottom:10px; }
.lpp-logo { max-height:60px; width:auto; display:block; }
/* Tanggal, Nomor, Kepada (kiri) */
.lpp-left { line-height:1.7; }
.lpp-city { line-height:1.7; }
.lpp-no { line-height:1.7; margin-bottom:14px; }
.lpp-kepada { line-height:1.7; margin-bottom:16px; }
/* Hal (tengah + underline presisi mengikuti kata) */
.lpp-hal {
  display:inline-block; text-align:center; font-weight:700; margin:0 auto 18px;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
}
.lpp-hal-wrap { text-align:center; margin-bottom:18px; }
.lpp-lampiran { line-height:1.7; margin-bottom:12px; font-size:13px; }
.lpp-lampiran-lbl { font-weight:700; }
/* Isi */
.lpp-salam { margin-bottom:4px; }
.lpp-body-txt { line-height:1.8; text-align:justify; margin-bottom:12px; overflow-wrap:anywhere; }
.lpp-point { display:flex; gap:12px; margin-bottom:10px; line-height:1.8; text-align:justify; }
.lpp-num { flex:none; font-weight:400; }
.lpp-point-txt { flex:1; min-width:0; overflow-wrap:anywhere; }
/* Tanda tangan (tengah, 2 kolom) */
.lpp-sign { font-size:13px; text-align:center; margin-top:24px; }
.lpp-sign-lbl { margin-bottom:2px; }
.lpp-sign-firm { font-weight:700; margin-top:4px; }
.lpp-sign-tag { font-size:12px; }
.lpp-sign-row { display:flex; justify-content:center; gap:24px; margin-top:8px; flex-wrap:wrap; }
.lpp-sign-col { flex:1 1 140px; max-width:46%; text-align:center; font-weight:700; font-size:12.5px; overflow-wrap:anywhere; }
/* Cc & Footer */
.lpp-cc { margin-top:14px; }
.lpp-foot { font-size:10.5px; text-align:center; color:#333; border-top:1px solid #ccc; margin-top:14px; padding-top:6px; line-height:1.5; }
.lpp-page { text-align:center; font-size:11px; color:#333; margin-top:14px; }

@media print {
  @page { size:A4; margin:0 16mm 26mm 16mm; @bottom-center { content:"Halaman " counter(page); font-size:9px; color:#333; } }
  html, body { background:#fff !important; }
  body :not(#lpp-print):not(#lpp-print *):not(#kuitansi-print):not(#kuitansi-print *):not(#ringkasan-print):not(#ringkasan-print *) { display:none !important; }
  #lpp-print, #kuitansi-print, #ringkasan-print { position:static !important; inset:auto !important; background:none !important; padding:0 !important; align-items:flex-start !important; }
  #lpp-print .modal, #kuitansi-print .modal, #ringkasan-print .modal { position:static !important; width:100% !important; max-width:100% !important; max-height:none !important; overflow:visible !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; background:#fff !important; }
  #lpp-print .modal-head, #kuitansi-print .modal-head, #ringkasan-print .modal-head { display:none !important; }
  #lpp-print .modal-body, #kuitansi-print .modal-body, #ringkasan-print .modal-body { padding:0 !important; }
  #lpp-print .lpp-sheet { border:0 !important; padding:14mm 0 0 !important; background:#fff !important; }
  #kuitansi-print .kuitansi-sheet, #ringkasan-print .ringkasan-sheet { border:0 !important; padding:14mm 0 0 !important; background:#fff !important; }
  #lpp-print .lpp-sign-space { min-height:36px; }
  #lpp-print .lpp-sign-row,
  #lpp-print .lpp-cc,
  #lpp-print .lpp-kepada,
  #lpp-print .lpp-point,
  #kuitansi-print .kuitansi-sign,
  #ringkasan-print .ringkasan-block { page-break-inside:avoid; break-inside:avoid; }
  #lpp-print .lpp-cc { page-break-before:avoid; break-before:avoid; }
  #lpp-print .lpp-foot {
    position:fixed; left:16mm; right:16mm; bottom:12mm;
    font-size:8.5px; text-align:center; color:#333;
    border-top:1px solid #ccc; padding-top:2px; line-height:1.3;
    margin:0; z-index:10;
  }
}

/* ===== PERSONIL TIM (Profil Personil — Direktori) ===== */
.personil-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; margin:0 0 24px; }
.personil-card {
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 4px 18px rgba(23,24,28,.06); padding:18px;
  display:flex; flex-direction:column; gap:14px;
  transition:box-shadow .2s, transform .2s, border-color .2s;
}
.personil-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,#c99d5e,#b58a4c,#966f35,transparent);
}
.personil-card:hover {
  box-shadow:0 16px 34px rgba(181,138,76,.18);
  transform:translateY(-4px); border-color:var(--accent);
}
.personil-top { display:flex; align-items:center; gap:14px; }
.personil-av {
  width:54px; height:54px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,#d4ab6a,#b58a4c 55%,#8f6a2f);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  box-shadow:0 4px 14px rgba(181,138,76,.35);
}
.personil-av-img { object-fit:cover; }
.personil-id { min-width:0; display:flex; flex-direction:column; gap:6px; }
.personil-nama { font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1.25; word-break:break-word; overflow-wrap:anywhere; }
.personil-meta { display:flex; flex-direction:column; gap:7px; background:var(--paper); border:1px solid var(--line-2); border-radius:12px; padding:12px 14px; }
.personil-meta-row { display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--ink); min-width:0; }
.personil-meta-row i { color:var(--accent); }
.personil-meta-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.personil-foot { display:flex; flex-direction:column; gap:8px; }
.personil-load { display:flex; align-items:center; gap:10px; }
.personil-load-bar { flex:1; height:6px; border-radius:999px; background:var(--line); overflow:hidden; }
.personil-load-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,#c99d5e,#b58a4c,#966f35); transition:width .4s; }
.personil-load span { font-size:.78rem; color:var(--muted); white-space:nowrap; }
.personil-deadline { font-size:.78rem; color:var(--muted); }
.personil-deadline.has { color:var(--accent-2); font-weight:600; }
.personil-group { margin-bottom:24px; }
.personil-group:last-child { margin-bottom:0; }
.personil-group-head {
  display:flex; align-items:center; gap:10px; margin-top:20px; padding-bottom:9px;
  border-bottom:1px solid var(--line);
}
.personil-group:first-child .personil-group-head { margin-top:6px; }
.personil-group-head::before {
  content:''; width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--accent); box-shadow:0 0 0 3px rgba(181,138,76,.18);
}
.personil-group-title { font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--navy); }
.personil-group-count { margin-left:auto; font-size:.78rem; color:var(--muted); }
.personil-group .personil-grid { margin-top:12px; }
.personil-card-act { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.personil-view { font-size:.78rem; font-weight:700; color:var(--accent-2); white-space:nowrap; }
.personil-card:hover .personil-view { text-decoration:underline; }

/* ===== PERSONIL TIM (Detail Profil) ===== */
.personil-hero { color:var(--navy); padding:24px 26px; border-radius:18px; margin:20px 20px 0; }
.personil-hero-body { display:flex; align-items:center; gap:18px; margin-top:16px; flex-wrap:wrap; }
.personil-hero-av {
  width:74px; height:74px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,#d4ab6a,#b58a4c 55%,#8f6a2f);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.4rem;
  box-shadow:0 8px 22px rgba(181,138,76,.4);
}
.personil-hero-av-img { object-fit:cover; }
.personil-hero-info { min-width:0; display:flex; flex-direction:column; gap:7px; }
.personil-hero-nama { font-family:var(--font-display); font-weight:700; font-size:1.4rem; line-height:1.25; }
.personil-hero-tags { display:flex; flex-wrap:wrap; gap:6px; }
.personil-chip {
  background:rgba(181,138,76,.16); border:1px solid rgba(181,138,76,.35);
  color:var(--accent-2); font-size:.78rem; font-weight:600; padding:3px 10px; border-radius:999px;
}
.personil-hero-contact { display:flex; flex-wrap:wrap; gap:14px; margin-top:16px; padding-top:14px; border-top:1px solid rgba(181,138,76,.25); font-size:.85rem; opacity:.9; color:var(--muted); }
.personil-stats { margin:16px 20px 0; }
.personil-profil-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; margin:16px 20px 24px; }
.personil-profil-card { padding:18px; }
.personil-profil-head { display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--navy); margin-bottom:10px; }
.personil-profil-head i { color:var(--accent); }
.personil-profil-body { white-space:pre-wrap; font-size:.9rem; color:var(--ink); line-height:1.65; }
.personil-profil-empty { border-style:dashed; background:var(--paper); }

/* ===== KOORDINASI TIM (statistik, kartu, drawer beban kerja) ===== */
.kanban-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:14px 0 4px; }
.ks-item {
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; border-left:4px solid var(--accent);
}
.ks-gold { border-left-color:var(--accent); }
.ks-red { border-left-color:var(--red); }
.ks-amber { border-left-color:#b9770e; }
.ks-green { border-left-color:var(--green); }
.ks-val { font-family:var(--font-mono); font-weight:700; font-size:1.35rem; line-height:1.1; }
.ks-lbl { color:var(--muted); font-size:.78rem; margin-top:2px; }
.kanban-sec { display:flex; align-items:center; gap:12px; }
.kanban-sec-ico {
  width:40px; height:40px; border-radius:12px; flex:none;
  background:linear-gradient(135deg,#c99d5e,#966f35); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(181,138,76,.35);
}
.kanban-sec-title { font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1.25; }
.kanban-sec-sub { font-size:.78rem; color:var(--muted); margin-top:2px; }
.guide-toggle {
  display:inline-flex; align-items:center; gap:7px;
  font-size:.78rem; font-weight:600; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; cursor:pointer; transition:.15s;
}
.guide-toggle i { color:var(--accent-2); }
.guide-toggle:hover { border-color:var(--accent); color:var(--ink); }
.guide-toggle.open { background:linear-gradient(135deg,#c99d5e,#966f35); border-color:transparent; color:#fff; }
.guide-toggle.open i { color:#fff; }
.guide-toggle-dark { background:rgba(255,255,255,.7); border-color:rgba(181,138,76,.35); color:var(--navy); }
.guide-toggle-dark i { color:var(--accent-2); }
.guide-toggle-dark:hover { border-color:var(--accent); color:var(--accent-2); }
.guide-toggle-dark.open { background:linear-gradient(135deg,#c99d5e,#966f35); border-color:transparent; color:#fff; }
.guide-toggle-dark.open i { color:#fff; }
.kanban-guide-zone { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin:16px 0 0; }
.kanban-guide-zone .guide-open { width:100%; margin-top:0; }
.guide-open {
  margin-top:10px; padding:14px 16px;
  background:var(--surface); border:1px solid rgba(181,138,76,.3);
  border-radius:14px; box-shadow:var(--shadow);
}
.guide-open-flow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.guide-open-step {
  flex:1; min-width:150px;
  display:flex; align-items:center; gap:9px;
  background:var(--paper); border:1px solid var(--line); border-radius:11px;
  padding:9px 12px;
}
.guide-open-num {
  font-family:var(--font-display); font-weight:700; font-size:1.2rem; line-height:1;
  color:var(--accent); flex:none; min-width:18px; opacity:.9;
}
.guide-open-step b { display:block; font-size:.78rem; letter-spacing:.04em; }
.guide-open-step span { display:block; font-size:.68rem; color:var(--muted); margin-top:1px; }
.guide-open-arr { display:flex; align-items:center; color:var(--accent-2); flex:none; }
.guide-open-hints {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px;
  margin-top:12px; padding-top:12px; border-top:1px dashed var(--line);
}
.guide-open-hint {
  display:flex; align-items:flex-start; gap:9px;
  background:var(--paper); border:1px solid var(--line-2); border-radius:10px;
  padding:9px 12px;
}
.guide-open-hint i { color:var(--accent-2); flex:none; margin-top:2px; }
.guide-open-hint b { display:block; font-size:.78rem; color:var(--ink); line-height:1.3; }
.guide-open-hint span { display:block; font-size:.68rem; color:var(--muted); margin-top:2px; line-height:1.45; }
.site-card {
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; display:flex; flex-direction:column; gap:12px;
}
.site-card-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.site-card-logo { width:44px; height:44px; border-radius:10px; object-fit:cover; border:1px solid var(--line); box-shadow:var(--shadow); }
.site-card-info { flex:1; min-width:180px; }
.site-card-nama { font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1.3; word-break:break-word; overflow-wrap:anywhere; }
.site-card-tag { font-size:.78rem; color:var(--accent-2); font-weight:600; margin-top:2px; word-break:break-word; overflow-wrap:anywhere; }
.site-card-meta { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.8rem; color:var(--muted); }
.site-card-meta span { display:inline-flex; align-items:center; gap:6px; }
.site-card-meta i { color:var(--accent-2); }
.site-card-addr { display:flex; align-items:flex-start; gap:6px; font-size:.8rem; color:var(--muted); }
.site-card-addr i { color:var(--accent-2); flex:none; margin-top:2px; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; margin-bottom:16px; }
.site-field-wide { grid-column:1 / -1; }
.settings-upload-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px; padding:12px 14px; background:var(--paper); border:1px dashed var(--line); border-radius:12px; }
.sur-label { display:inline-flex; align-items:center; gap:7px; font-size:.85rem; font-weight:600; color:var(--accent-2); }
.sur-busy { font-size:.78rem; color:var(--muted); }
.team-media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.team-media-item {
  background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px;
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
}
.team-media-item img { width:76px; height:76px; border-radius:50%; object-fit:cover; box-shadow:0 4px 12px rgba(23,24,28,.12); }
.tmi-nama { font-size:.8rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tmi-upload {
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:.78rem; font-weight:600; color:var(--accent-2);
  border:1px solid rgba(181,138,76,.4); border-radius:999px; padding:5px 12px;
  transition:.15s;
}
.tmi-upload:hover { background:rgba(181,138,76,.12); }
.tmi-input { display:none; }
.tmi-busy { font-size:.7rem; color:var(--muted); }
.btn-green { background:var(--green); color:#fff; }
.btn-green:hover { background:#265f46; color:#fff; }
.load-card { transition:box-shadow .15s, transform .15s, border-color .15s; }
.load-card:hover { border-color:var(--accent); box-shadow:0 6px 16px rgba(181,138,76,.16); transform:translateY(-1px); }
.load-view { flex:none; color:var(--accent-2); display:flex; }
.load-terlambat { display:inline-block; margin-top:3px; font-size:.78rem; font-weight:700; color:var(--red); }
.kanban-type { display:flex; align-items:center; gap:6px; margin:6px 0 2px; min-width:0; flex-wrap:wrap; }
.kanban-type-link { display:inline-flex; align-items:center; gap:5px; color:var(--accent-2); font-weight:600; font-size:.78rem; min-width:0; }
.kanban-type-link span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kanban-type-internal {
  display:inline-flex; align-items:center; gap:5px; font-size:.7rem; font-weight:700;
  color:var(--muted); background:rgba(0,0,0,.05); padding:2px 8px; border-radius:999px;
}
.kanban-type-pri {
  display:inline-flex; align-items:center; gap:4px; font-size:.7rem; font-weight:700;
  padding:2px 8px; border-radius:999px; color:#a5524a; background:#f5e9e6;
}
.kanban-type-pri.mid { color:#9a7030; background:#f6ecd9; }
.kanban-type-pri.lo { color:#3b6ea5; background:#e7eef5; }
.load-drawer { position:fixed; inset:0; z-index:90; pointer-events:none; overflow:hidden; }
.load-drawer.open { pointer-events:auto; }
.load-drawer-backdrop { position:absolute; inset:0; background:rgba(12,13,17,.5); opacity:0; transition:opacity .25s; backdrop-filter:blur(2px); }
.load-drawer.open .load-drawer-backdrop { opacity:1; }
.load-drawer-panel {
  position:absolute; top:0; right:0; bottom:0; width:min(500px,100%);
  background:var(--paper); border-left:1px solid var(--line);
  box-shadow:-14px 0 44px rgba(0,0,0,.2);
  transform:translateX(102%); transition:transform .28s ease;
  display:flex; flex-direction:column;
}
.load-drawer.open .load-drawer-panel { transform:translateX(0); }
.load-drawer-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--line); background:var(--surface);
}
.load-drawer-head-actions { display:flex; align-items:center; gap:8px; flex:none; }
.load-drawer-user { display:flex; align-items:center; gap:12px; min-width:0; }
.ldu-av {
  width:48px; height:48px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,#d4ab6a,#b58a4c 55%,#8f6a2f);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  box-shadow:0 4px 12px rgba(181,138,76,.35);
}
.ldu-av { object-fit:cover; }
.ldu-info { min-width:0; display:flex; flex-direction:column; gap:4px; }
.ldu-nama { font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1.25; }
.load-drawer-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:14px 20px; border-bottom:1px solid var(--line); }
.lds-item { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 12px; text-align:center; }
.lds-red .lds-val { color:var(--red); }
.lds-val { font-family:var(--font-mono); font-weight:700; font-size:1.25rem; line-height:1.1; }
.lds-lbl { color:var(--muted); font-size:.78rem; margin-top:2px; }
.load-drawer-body { flex:1; overflow-y:auto; padding:16px 20px 24px; display:flex; flex-direction:column; gap:18px; }
.load-drawer-col { display:flex; flex-direction:column; gap:8px; }
.load-drawer-col-head { display:flex; justify-content:space-between; align-items:center; padding:2px 2px 6px; border-bottom:1px solid var(--line-2); }
.load-drawer-task {
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.ldt-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.ldt-act { display:flex; gap:6px; margin-top:8px; justify-content:flex-end; }
.kanban-hasil {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:#f1f7f2; border:1px solid rgba(47,122,84,.25); color:var(--green);
  font-size:.78rem; padding:5px 9px; border-radius:9px; margin-top:7px;
}
.kanban-hasil-file { display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--green); min-width:0; }
.kanban-hasil-file span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kanban-hasil-txt { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kanban-bukti {
  display:inline-flex; align-items:center; gap:6px; margin-top:6px;
  font-size:.78rem; font-weight:600; color:#3a5b8f;
  background:rgba(58,91,143,.09); border:1px solid rgba(58,91,143,.22);
  padding:3px 9px; border-radius:999px;
}
.ldt-bukti { display:flex; flex-direction:column; gap:5px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); }
.ldt-bukti-title { display:flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700; color:var(--muted); }
.ldt-bukti-item {
  display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--ink);
  min-width:0; padding:3px 0;
}
.ldt-bukti-item i { color:#3a5b8f; }
.ldt-bukti-item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
a.ldt-bukti-item:hover { color:var(--accent-2); }
.ldt-integ { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.ldt-integ .btn { padding:4px 10px; font-size:11.5px; }

/* ===================== THEME MODERN (mobile-friendly, adaptasi Al-Azhar/Pintro) =====================
   Dipilih via Profil → Tampilan Workspace. Warna tetap (gold/cream); hanya model tampilan & UX.
   Prinsip: lapisan di atas tema klasik (bukan template ganda) → aman & tanpa double maintenance. */
body.modern {
  --radius: 14px;
  --shadow: 0 2px 4px rgba(23,24,28,.05), 0 12px 34px rgba(23,24,28,.07);
  --shadow-lg: 0 24px 60px rgba(23,24,28,.14);
  --line: #e9e5db;
  --line-2: #f2efe7;
  font-size: 15px;
}
body.modern .rail { width: 260px; background:#0d2b5b; color:#fff; border-right:0; }
body.modern .rail-brand { border-bottom:1px solid rgba(255,255,255,.12); }
body.modern .rail-item { color:rgba(255,255,255,.82); }
body.modern .rail-item:hover { background:rgba(255,255,255,.10); color:#fff; }
body.modern .rail-item.active { background:linear-gradient(135deg,#c99d5e,#b58a4c 55%,#966f35); color:#0c0d11; }
body.modern .rail-parent { color:#fff; }
body.modern .rail-parent.open { background:rgba(255,255,255,.10); }
body.modern .rail-caret, body.modern .rail-item i { color:inherit; }
body.modern .rail-nav::-webkit-scrollbar { width:0; }
body.modern .rail.collapsed { width: 78px; }
body.modern .rail.collapsed .rail-mark { display:block; }
body.modern .appbar { background:#fff; border-bottom:1px solid var(--line); box-shadow:0 2px 14px rgba(23,24,28,.05); }
body.modern .btn { border-radius:12px; }
body.modern .btn-gold { background:linear-gradient(135deg,#c99d5e,#b58a4c 55%,#966f35); }
body.modern .field input, body.modern .field textarea, body.modern .field select,
body.modern .input { border-radius:12px; padding:12px 14px; }
body.modern .panel, body.modern .widget, body.modern .kal-card { border-radius:16px; box-shadow:var(--shadow); }
body.modern .perkara-card, body.modern .klien-card, body.modern .hd-stat, body.modern .agenda-card { border-radius:16px; box-shadow:var(--shadow); }
body.modern .mon-tab { border-radius:12px; }
body.modern .tab { border-radius:999px; }
body.modern .page-head h1 { letter-spacing:-.01em; }
body.modern .section-title { letter-spacing:-.01em; }
body.modern .tbl th { font-size:11px; letter-spacing:.05em; }
body.modern .table-wrap { border-radius:12px; }
body.modern .badge { border-radius:8px; }
body.modern .btn-back { border-radius:999px; }
body.modern .content { padding-top:18px; }

/* ==== Responsif mobile (mode modern) ==== */
@media (max-width: 720px) {
  body.modern .appbar { position:sticky; top:0; z-index:70; }
  body.modern .content { padding:0 14px 92px; }
  body.modern .rail { left:-280px; }
  body.modern .rail.open { left:0; }
  body.modern .page-head h1 { font-size:24px; }
  body.modern .table-wrap { overflow-x:auto; }
  /* Tabel → kartu di layar sempit (umum) */
  body.modern table.tbl { min-width:0; }
  body.modern .hero-dash { padding:22px 20px; }
  body.modern .hero-dash-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  body.modern .hd-stat { padding:16px 12px; }
  body.modern .hd-val { font-size:22px; }
  body.modern .btn { width:auto; }
  body.modern .modal { max-width:100%; border-radius:18px 18px 0 0; max-height:94vh; }
  body.modern .field { margin-bottom:14px; }
}
/* ===================== END THEME MODERN ===================== */

/* ===== BOTTOM NAV (mode Modern, mobile) ===== */
.bottom-nav {
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:flex; align-items:stretch; justify-content:space-around;
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(23,24,28,.08);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bottom-nav .bn-item {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  border:0; background:none; cursor:pointer; color:var(--faint);
  font-family:var(--font-body); font-size:10px; font-weight:600;
  padding:6px 4px; border-radius:12px; transition:.15s;
}
.bottom-nav .bn-item i { color:currentColor; }
.bottom-nav .bn-item span { letter-spacing:.01em; }
.bottom-nav .bn-item:hover { color:var(--ink); }
.bottom-nav .bn-item.active { color:#0c0d11; background:linear-gradient(135deg,#c99d5e,#b58a4c 55%,#966f35); }
body.modern .bottom-nav { display:flex; }
/* Sembunyikan di desktop */
@media (min-width:721px) { .bottom-nav { display:none !important; } }

/* ===== Tabel → Kartu responsif (mode Modern, layar sempit) ===== */
@media (max-width: 720px) {
  body.modern .table-wrap { overflow:visible; }
  body.modern table.tbl, body.modern table.tbl thead, body.modern table.tbl tbody,
  body.modern table.tbl tr, body.modern table.tbl td { display:block; width:100%; }
  body.modern table.tbl thead { display:none; }
  body.modern table.tbl tr {
    margin-bottom:12px; border:1px solid var(--line); border-radius:14px;
    background:var(--surface); box-shadow:var(--shadow); overflow:hidden;
    padding:6px 14px;
  }
  body.modern table.tbl td {
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    border-bottom:1px dashed var(--line-2); padding:9px 4px;
    text-align:right; font-size:13.5px;
  }
  body.modern table.tbl td:last-child { border-bottom:0; }
  body.modern table.tbl td::before {
    content:attr(data-label); flex:none; text-align:left;
    color:var(--faint); font-size:10.5px; font-weight:600;
    text-transform:uppercase; letter-spacing:.05em;
  }
  body.modern table.tbl td.actions { justify-content:flex-end; }
  body.modern table.tbl td.actions::before { display:none; }
  body.modern table.tbl td.empty { display:block; text-align:center; border:0; }
  body.modern table.tbl td.empty::before { display:none; }
}

/* ===== Panel Pembayaran Klien (ala Pintro) ===== */
.pay-hero {
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  background:
    radial-gradient(600px 200px at 15% -30%, rgba(181,138,76,.22), transparent 60%),
    linear-gradient(135deg,#f8f5f0,#efeae0);
  border:1px solid rgba(181,138,76,.4); border-radius:18px; padding:22px 24px;
  box-shadow:var(--shadow);
}
.pay-hero-title { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-2); font-weight:700; }
.pay-hero-status { font-family:var(--font-display); font-size:1.35rem; font-weight:800; color:var(--ink); line-height:1.2; margin-top:4px; }
.pay-hero-sub { font-size:.82rem; color:var(--muted); margin-top:6px; }
.pay-section-title { display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--ink); margin:16px 0 12px; }
.pay-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px 18px; margin-bottom:12px; box-shadow:var(--shadow); }
.pay-card.paid { opacity:.72; }
.pay-card-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.pay-card-desk { font-weight:700; font-size:.95rem; color:var(--ink); }
.pay-card-body { display:flex; flex-direction:column; gap:6px; }
.pay-row { display:flex; justify-content:space-between; gap:12px; font-size:.85rem; color:var(--muted); }
.pay-row span:last-child { color:var(--ink); font-weight:600; text-align:right; }
.pay-total { border-top:1px dashed var(--line); margin-top:6px; padding-top:8px; }
.pay-total span:last-child { color:var(--accent-2); font-weight:800; }
.pay-empty { text-align:center; color:var(--muted); padding:26px; font-size:.9rem; }

/* ===== Kartu premium generik (Kontak/Referensi/Arsip/Notulensi/Pengembangan Klien) ===== */
.gen-kartu-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; padding:18px 22px 22px; }
.gen-kartu {
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:16px 18px; box-shadow:var(--shadow); cursor:pointer;
  transition:box-shadow .18s, transform .18s, border-color .18s;
  display:flex; flex-direction:column; gap:10px;
}
.gen-kartu:hover { box-shadow:0 12px 30px rgba(181,138,76,.18); transform:translateY(-3px); border-color:var(--accent); }
.gen-kartu-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.gen-kartu-judul { font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--ink); line-height:1.3; overflow-wrap:anywhere; word-break:break-word; }
.gen-kartu-open { border:0; background:none; color:var(--faint); cursor:pointer; flex:none; }
.gen-kartu:hover .gen-kartu-open { color:var(--accent-2); }
.gen-kartu-meta { display:flex; flex-direction:column; gap:5px; }
.gen-kartu-row { display:flex; justify-content:space-between; gap:10px; font-size:.82rem; color:var(--muted); }
.gen-kartu-row span:last-child { color:var(--ink); font-weight:600; text-align:right; overflow-wrap:anywhere; }
.gen-kartu-empty { font-size:.8rem; color:var(--faint); }
.gen-kartu-actions { display:flex; gap:8px; border-top:1px solid var(--line-2); padding-top:10px; }

/* ===== Agenda: selesaikan & agenda lanjutan ===== */
.agenda-lanjut-toggle { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.agenda-lanjut-toggle input { margin-top:3px; accent-color:var(--accent); width:17px; height:17px; flex:none; }
.agenda-lanjut-toggle b { font-size:.9rem; color:var(--ink); }
.btn-green { background:var(--green); color:#fff; }
.btn-green:hover { background:#276a47; color:#fff; }

/* ===== Timeline Hasil Kegiatan ===== */
.tl-hasil { display:flex; flex-direction:column; gap:0; padding:8px 6px 12px; max-height:560px; overflow-y:auto; }
.tl-hasil-item { display:flex; gap:14px; padding:10px 8px; cursor:pointer; border-radius:12px; transition:.15s; position:relative; }
.tl-hasil-item:hover { background:rgba(181,138,76,.07); }
.tl-hasil-line { flex:none; width:4px; border-radius:99px; margin:6px 0; background:linear-gradient(180deg,#34b373,#1f7a4f); }
.tl-hasil-line.tidak { background:linear-gradient(180deg,#e2a14a,#b9770e); }
.tl-hasil-date { flex:none; width:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(135deg,#f4f0e8,#e9e2d5); border:1px solid rgba(168,130,62,.28); border-radius:10px; padding:6px 2px; height:56px; }
.tl-hasil-d { font-family:var(--head); font-size:20px; font-weight:700; color:var(--ink); line-height:1; }
.tl-hasil-m { font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-2); margin-top:2px; }
.tl-hasil-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.tl-hasil-t { font-family:var(--font-display); font-weight:700; font-size:.98rem; color:var(--ink); line-height:1.3; overflow-wrap:anywhere; }
.tl-hasil-s { font-size:.78rem; color:var(--muted); }
.tl-hasil-badges { display:flex; gap:6px; flex-wrap:wrap; }

/* ===== Stepper alur Agenda -> Kegiatan -> Hasil ===== */
.agenda-flow { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px 18px 12px; box-shadow:var(--shadow); }
.agenda-flow-track { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.af-node { display:flex; align-items:center; gap:7px; flex:none; color:var(--faint); font-weight:600; font-size:.85rem; transition:.2s; }
.af-node .af-ico { width:28px; height:28px; border-radius:50%; background:var(--paper); border:2px solid var(--line); color:var(--faint); display:flex; align-items:center; justify-content:center; transition:.2s; }
.af-node.active { color:var(--ink); }
.af-node.active .af-ico { background:linear-gradient(135deg,#c99d5e,#b58a4c 55%,#966f35); border-color:transparent; color:#fff; box-shadow:0 4px 12px rgba(181,138,76,.35); }
.af-node.active .af-ico i, .af-node.active .af-ico svg { display:block; }
.af-node.berputar .af-ico i, .af-node.berputar .af-ico svg { animation:afSpin 1.2s linear infinite; transform-origin:center; }
@keyframes afSpin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
.af-line { flex:1; height:6px; border-radius:99px; background:var(--line-2); position:relative; overflow:hidden; }
.af-line.done { background:linear-gradient(90deg,#c99d5e,#966f35); }
.af-line.done::after { content:''; position:absolute; inset:0; width:40%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent); animation:afFlow 1.1s linear infinite; }
@keyframes afFlow { 0%{transform:translateX(-100%)} 100%{transform:translateX(250%)} }
.agenda-flow-caption { margin-top:8px; text-align:center; font-size:.78rem; color:var(--muted); }

/* ===== Panel Kegiatan berlangsung ===== */
.proses-list { display:flex; flex-direction:column; gap:10px; padding:8px 6px 12px; }
.proses-item { display:flex; align-items:flex-start; gap:12px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px 14px; cursor:pointer; transition:.15s; position:relative; overflow:hidden; }
.proses-item:hover { border-color:var(--accent); box-shadow:var(--shadow); }
.proses-item::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,#e0a63c,#b9770e); }
.proses-dot { flex:none; width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,#e0a63c,#b9770e); margin-top:5px; box-shadow:0 0 0 4px rgba(185,119,14,.22); animation:prosesPulse 1.2s ease infinite; }
@keyframes prosesPulse { 0%,100%{box-shadow:0 0 0 3px rgba(185,119,14,.3); transform:scale(1)} 50%{box-shadow:0 0 0 10px rgba(185,119,14,.08); transform:scale(1.15)} }
.proses-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.proses-t { font-family:var(--font-display); font-weight:700; font-size:.98rem; color:var(--ink); line-height:1.3; overflow-wrap:anywhere; }
.proses-s { font-size:.78rem; color:var(--muted); }
.proses-bar { height:5px; border-radius:99px; background:rgba(185,119,14,.16); overflow:hidden; margin-top:3px; position:relative; }
.proses-fill { height:100%; width:60%; border-radius:99px; background:linear-gradient(90deg,#e0a63c,#b9770e); animation:prosesFill 2s ease-in-out infinite; }
@keyframes prosesFill { 0%{width:30%} 50%{width:75%} 100%{width:30%} }

/* ===================== BERANDA — TATA RUANG & KONTRAS ===================== */
/* Ruang lega & konsisten antar blok beranda */
.hero-dash { margin:0 0 28px; }
.hero-dash-stats { margin:0 0 28px; }
.grid-2 { margin-bottom:28px; }
.broadcast-penugasan, .broadcast-pengumuman { margin-top:28px; }

/* Perkuat kontras kartu (tetap soft) — border & shadow lebih tegas */
.hd-stat, .widget, .kal-card, .broadcast {
  border:1px solid rgba(168,130,62,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(23,24,28,.05), 0 14px 34px rgba(23,24,28,.08);
}
/* Pemisah halus antar seksi (nada kontras) */
.hero-dash::after {
  content:''; position:absolute; left:32px; right:32px; bottom:0; height:3px; border-radius:99px;
  background:linear-gradient(90deg, var(--accent), transparent);
  opacity:.35;
}

/* ===================== COMMAND CENTER PREMIUM (Beranda) =====================
   Sentuhan premium: glassmorphism lembut + mini-visualization + hierarki bento.
   Identitas tetap gold/cream + Fraunces. TIDAK mengubah warna/dataset/fungsi. */

/* Mini bar statistik (data visualization halus) */
.hd-bar { width:88%; height:5px; border-radius:99px; background:rgba(150,111,53,.12); overflow:hidden; margin-top:2px; }
.hd-bar-fill { display:block; height:100%; border-radius:99px; transition:width .6s cubic-bezier(.22,1,.36,1); box-shadow:0 0 8px rgba(181,138,76,.35); }
.hd-bar-gold { background:linear-gradient(90deg,#c99d5e,#966f35); }
.hd-bar-blue { background:linear-gradient(90deg,#5b8def,#3a5b8f); }
.hd-bar-green { background:linear-gradient(90deg,#34b373,#1f7a4f); }
.hd-bar-amber { background:linear-gradient(90deg,#f0a13d,#b9770e); }

/* Hero dashboard — soft-surface premium (glass lembut) */
.hero-dash {
  background:
    radial-gradient(1000px 420px at 18% -20%, rgba(168,130,62,.20), transparent 60%),
    radial-gradient(900px 400px at 90% 130%, rgba(58,91,143,.08), transparent 55%),
    linear-gradient(150deg, #f9f6f1 0%, #f2ede4 55%, #e9e2d5 100%);
  border:1px solid rgba(168,130,62,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(23,24,28,.05), 0 24px 54px rgba(23,24,28,.11);
  backdrop-filter:blur(6px) saturate(1.05);
}
.hero-dash::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 1px 1px, rgba(168,130,62,.18) 1px, transparent 1.5px);
  background-size:22px 22px; opacity:.28;
}
.hero-dash { position:relative; overflow:hidden; }

/* Kartu statistik — soft-surface + glow lembut + aksen perunggu */
.hd-stat {
  background:
    radial-gradient(620px 220px at 12% -30%, rgba(168,130,62,.20), transparent 60%),
    linear-gradient(150deg, #ffffff 0%, #f6f1e8 100%);
  border:1px solid rgba(168,130,62,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 9px 26px rgba(23,24,28,.08), 0 1px 2px rgba(23,24,28,.05);
  backdrop-filter:blur(6px) saturate(1.03);
}

/* Widget (broadcast) — hierarki bento: kartu halus, tepi emas lembut */
.broadcast-agenda, .broadcast-action {
  border:1px solid rgba(168,130,62,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 22px 48px rgba(23,24,28,.10);
  backdrop-filter:blur(4px);
}
.broadcast-penugasan, .broadcast-pengumuman {
  background:linear-gradient(135deg,#f8f5f0,#efeae0);
  border:1px solid rgba(168,130,62,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 18px 40px rgba(90,70,30,.11);
}

/* Glassmorphism appbar (navbar atas) */
.appbar {
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px) saturate(1.1);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);
}

/* Judul hero & sub lebih halus */
.hero-dash-greet { letter-spacing:.08em; }
.brand-firm { text-shadow:0 1px 0 rgba(255,255,255,.7); }

/* ===================== SIDEBAR MODERN INTERACTION (tanpa ubah warna) ===================== */
/* Label section antar grup menu */
.rail-section {
  font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); margin:14px 12px 4px; opacity:.9;
}
.rail-group:first-child .rail-section { margin-top:6px; }

/* Indikator garis emas di item aktif (modern touch) — HANYA desktop expanded */
@media (min-width:921px) {
  .rail-item.active { position:relative; }
  .rail-item.active::before {
    content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:3px; height:60%; border-radius:99px;
    background:linear-gradient(180deg,#c99d5e,#966f35);
    pointer-events:none;
  }
}
/* Hover lebih halus + sedikit naik */
.rail-item { position:relative; }
.rail-item:hover { background:rgba(181,138,76,.10); }
.rail-item i { transition:transform .18s cubic-bezier(.22,1,.36,1); }
.rail-item:hover i { transform:scale(1.08); }

/* Tooltip saat rail collapsed (info nama pada icon-only) — hanya saat hover */
.rail.collapsed .rail-item:hover::after {
  content:attr(data-tooltip);
  position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%);
  background:#17181c; color:#fff; font-size:11px; font-weight:600; white-space:nowrap;
  padding:5px 10px; border-radius:8px; z-index:999; box-shadow:0 6px 18px rgba(23,24,28,.2);
  pointer-events:none;
}

/* ===================== ESTETIKA PREMIUM GLOBAL (design-system konsisten) =====================
   Menyamakan seluruh kartu/panel/hero di SEMUA submenu dengan beranda:
   - Gradien mikro ivory->cream (kedalaman)
   - Aksen perunggu/champagne tipis pada border
   - Glassmorphism lembut.
   Hanya tampilan; tidak mengubah data/fungsi. */
.panel, .widget, .kal-card, .mon-panel, .bl-card, .pesan-card, .app-card,
.kanban-card, .portal-perkara-card, .perkara-card, .klien-card, .agenda-card,
.site-card, .personil-card, .mon-kartu, .scard, .ih-card {
  background:
    radial-gradient(640px 220px at 12% -25%, rgba(168,130,62,.10), transparent 60%),
    linear-gradient(150deg, #fdfcfa 0%, #f7f2e9 100%);
  border:1px solid rgba(168,130,62,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(23,24,28,.04), 0 12px 30px rgba(23,24,28,.06);
}
/* Hero-page (submenu) — senada hero beranda */
.hero-page, .personil-hero {
  background:
    radial-gradient(900px 360px at 18% -20%, rgba(168,130,62,.16), transparent 60%),
    radial-gradient(700px 340px at 90% 130%, rgba(58,91,143,.06), transparent 55%),
    linear-gradient(150deg, #f8f5f0 0%, #f1ece3 55%, #e8e1d4 100%);
  border:1px solid rgba(168,130,62,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 22px 48px rgba(23,24,28,.09);
  backdrop-filter:blur(5px) saturate(1.03);
}
/* Appbar & panel head glassmorphism tipis */
.panel-head, .widget-head { background:rgba(255,255,255,.5); backdrop-filter:blur(6px); }
/* Kartu data (tabel wrap) border lembut */
.digital-cards { background:linear-gradient(160deg,#fdfcfa,#f6f1e8); border:1px solid rgba(168,130,62,.22); }
/* Hover kartu tetap naik + aksen perunggu */
.panel:hover, .widget:hover, .kal-card:hover, .bl-card:hover, .app-card:hover, .portal-perkara-card:hover { border-color:rgba(168,130,62,.42); }

/* ===== LEMBAR KONSULTASI (drawer kanan) ===== */
.ldrawer { position:fixed; inset:0; z-index:110; pointer-events:none; overflow:hidden; }
.ldrawer.open { pointer-events:auto; }
.ldrawer-backdrop { position:absolute; inset:0; background:rgba(12,13,17,.5); opacity:0; transition:opacity .25s; backdrop-filter:blur(2px); }
.ldrawer.open .ldrawer-backdrop { opacity:1; }
.ldrawer-panel {
  position:absolute; top:0; right:0; bottom:0; width:100%; max-width:560px; min-width:0;
  background:var(--paper); border-left:1px solid var(--line);
  box-shadow:-14px 0 44px rgba(0,0,0,.2);
  transform:translateX(102%); transition:transform .28s ease;
  display:flex; flex-direction:column; overflow-x:hidden;
}
.ldrawer.open .ldrawer-panel { transform:translateX(0); }
.ldrawer-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--line); background:var(--surface);
}
.ldrawer-head-actions { display:flex; align-items:center; gap:10px; flex:none; }
.ldrawer-body { flex:1; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:18px 20px; display:flex; flex-direction:column; gap:14px; }
.ldrawer-body .field { margin-bottom:0; min-width:0; }
.ldrawer-body .field input, .ldrawer-body .field textarea, .ldrawer-body .field select { max-width:100%; }
.ldrawer-body .gl-form-meta { margin-bottom:0; grid-template-columns:1fr; }
.ldrawer-body .gl-form-isi { grid-template-columns:1fr; }
.ldrawer-body .gl-form-isi textarea { min-height:150px; }
.ldrawer-foot { display:flex; gap:8px; flex-wrap:wrap; padding:14px 20px; border-top:1px solid var(--line); background:var(--surface); }
.ksheet-badges { display:flex; gap:6px; flex-wrap:wrap; }
.ksheet-saved { font-size:var(--fs-xs); color:var(--green); font-weight:600; white-space:nowrap; }
.ksheet-meta { display:flex; gap:14px; flex-wrap:wrap; font-size:var(--fs-sm); color:var(--muted); }
.ksheet-meta span { display:inline-flex; align-items:center; gap:5px; }
.ksheet-sec { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.ksheet-sec-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.ksheet-sec-head > span:first-child { display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--accent-2); }
.ksheet-edit { border:1px solid var(--line); background:var(--surface); border-radius:8px; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); transition:.15s; flex:none; }
.ksheet-edit:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.ksheet-read { font-size:var(--fs-base); color:var(--ink); line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; cursor:text; border-radius:8px; padding:4px 6px; margin:-4px -6px; transition:.15s; min-height:22px; }
.ksheet-read:hover { background:var(--paper); }
.ksheet-ta { width:100%; font-family:var(--font-body); font-size:var(--fs-base); line-height:1.55; color:var(--ink); background:var(--surface); border:1px solid var(--accent); border-radius:10px; padding:10px 12px; outline:none; resize:vertical; }
.ksheet-inline { display:flex; gap:8px; flex-wrap:wrap; min-width:0; }
.ksheet-inline > * { min-width:0; max-width:100%; }
.ksheet-inline select { flex:1 1 140px; }
@media (max-width:640px) {
  .ldrawer-panel { width:100%; }
}

/* ===== KAPSUL TAB (glassmorphism halus) — dipakai semua menu ===== */
.tabs-capsule {
  display:flex; width:100%; max-width:100%;
  align-items:stretch; gap:6px; padding:6px; margin:16px auto 12px;
  margin-left:auto !important; margin-right:auto !important;
  background:var(--paper);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow);
}
.hero-page .tabs-capsule { margin:22px auto 8px; }
.tabs-capsule .siko-group, .tabs-capsule .mon-tab {
  flex:1 1 auto; min-width:0; align-self:stretch; justify-content:center;
  border:1px solid var(--line); background:var(--surface); box-shadow:0 1px 2px rgba(23,24,28,.04);
  border-radius:10px; padding:10px 18px; color:var(--navy); font-weight:600;
}
.tabs-capsule .siko-group:hover, .tabs-capsule .mon-tab:hover { background:#fbf7ec; color:var(--accent-2); transform:none; border-color:var(--line); box-shadow:0 1px 2px rgba(23,24,28,.04); }
.tabs-capsule .siko-group.active, .tabs-capsule .mon-tab.active {
  background:linear-gradient(135deg,#c99d5e,#b58a4c 55%,#966f35); color:#fff; border-color:transparent;
  box-shadow:0 4px 14px rgba(181,138,76,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.tabs-capsule .siko-group.active i, .tabs-capsule .mon-tab.active i { color:#fff; }
.tabs-capsule .seg-count, .tabs-capsule .tab-count { background:rgba(0,0,0,.07); color:var(--muted); }
.tabs-capsule .siko-group.active .seg-count, .tabs-capsule .mon-tab.active .tab-count { background:rgba(255,255,255,.25); color:#fff; }
@media (max-width:520px) {
  .tabs-capsule { width:100%; justify-content:center; flex-wrap:wrap; }
}
/* Varian di atas latar gelap/hero */
.mon-tabs-dark.tabs-capsule { background:rgba(255,255,255,.30); border-color:rgba(168,130,62,.38); box-shadow:0 8px 24px rgba(23,24,28,.10), inset 0 1px 0 rgba(255,255,255,.5); }
.mon-tabs-dark.tabs-capsule .mon-tab { color:var(--navy); }
.mon-tabs-dark.tabs-capsule .mon-tab:hover { background:rgba(255,255,255,.7); color:var(--accent-2); }
/* Mode Modern (BETA) tetap memakai kapsul pill (belum diubah) */
body.modern .tabs-capsule {
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid rgba(168,130,62,.30); border-radius:999px;
  box-shadow:0 8px 24px rgba(23,24,28,.08), inset 0 1px 0 rgba(255,255,255,.6);
}
body.modern .tabs-capsule .siko-group, body.modern .tabs-capsule .mon-tab { border-radius:999px; }
body.modern .tabs-capsule .siko-group:hover, body.modern .tabs-capsule .mon-tab:hover { background:rgba(255,255,255,.65); color:var(--accent-2); }

/* ===== BENTO STATS (strip metrik kompak) ===== */
.bento-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin:0 0 20px; }
.bento-stat {
  display:flex; align-items:center; gap:11px; padding:12px 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow);
}
.bento-ico { width:38px; height:38px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; }
.bento-ico.ico-gold { background:linear-gradient(135deg,#c99d5e,#966f35); }
.bento-ico.ico-blue { background:linear-gradient(135deg,#4a6fb0,#3a5b8f); }
.bento-ico.ico-amber { background:linear-gradient(135deg,#e0a63c,#b9770e); }
.bento-ico.ico-green { background:linear-gradient(135deg,#4a9d6f,#2f7a54); }
.bento-txt { min-width:0; }
.bento-val { font-family:var(--font-mono); font-weight:700; font-size:1.2rem; line-height:1; color:var(--ink); overflow-wrap:anywhere; }
.bento-lbl { font-size:var(--fs-xs); color:var(--muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:720px) { .bento-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:400px) { .bento-stats { grid-template-columns:1fr; } }

/* ===== COMMAND PALETTE (Ctrl+K) ===== */
.cmd-backdrop {
  position:fixed; inset:0; z-index:130; background:rgba(12,13,17,.42);
  display:flex; align-items:flex-start; justify-content:center; padding:12vh 16px 16px;
  backdrop-filter:blur(3px);
}
.cmd-panel {
  width:100%; max-width:600px; background:var(--surface);
  border:1px solid var(--line); border-radius:18px;
  box-shadow:0 30px 70px rgba(12,13,17,.35);
  overflow:hidden;
}
.cmd-input-wrap { display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line-2); color:var(--accent); }
.cmd-input-wrap input { flex:1; border:none; background:transparent; outline:none; font-family:var(--font-body); font-size:1.02rem; color:var(--ink); }
.cmd-input-wrap input::placeholder { color:var(--faint); }
.cmd-kbd { font-size:var(--fs-xs); font-weight:700; color:var(--faint); border:1px solid var(--line); border-radius:6px; padding:2px 7px; background:var(--paper); }
.cmd-list { max-height:56vh; overflow-y:auto; padding:8px; }
.cmd-row { display:block; }
.cmd-group { font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--faint); padding:10px 12px 4px; }
.cmd-item { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px; cursor:pointer; }
.cmd-item.active { background:linear-gradient(135deg,#fbf7ec,#f2ecdd); }
.cmd-ico { width:30px; height:30px; border-radius:9px; flex:none; display:inline-flex; align-items:center; justify-content:center; background:var(--paper); color:var(--accent-2); border:1px solid var(--line); }
.cmd-item.active .cmd-ico { background:linear-gradient(135deg,#c99d5e,#966f35); color:#fff; border-color:transparent; }
.cmd-label { flex:1; min-width:0; font-size:var(--fs-base); font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmd-hint { font-size:var(--fs-xs); color:var(--faint); flex:none; }
.cmd-empty { text-align:center; color:var(--faint); padding:26px; font-size:var(--fs-sm); }
@media (max-width:640px) { .cmd-backdrop { padding:6vh 12px 12px; } }

/* ===== TOMBOL PINTASAN Ctrl+K (appbar) ===== */
.cmd-trigger {
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  border:1px solid var(--line); background:var(--surface); border-radius:999px;
  color:var(--muted); cursor:pointer; transition:.15s; font-family:var(--font-body); font-size:13px;
}
.cmd-trigger:hover { border-color:var(--accent); color:var(--accent-2); background:rgba(181,138,76,.06); }
.cmd-trigger kbd {
  font-family:var(--font-body); font-size:10.5px; font-weight:700; color:var(--faint);
  border:1px solid var(--line); border-radius:6px; padding:2px 6px; background:var(--paper);
}
@media (max-width:820px) {
  .cmd-trigger-txt, .cmd-trigger kbd { display:none; }
  .cmd-trigger { padding:8px; border-radius:10px; }
}