:root{
  --bg:#f5f6f3;--surface:#ffffff;--surface-2:#eef1ec;--border:#dfe3dc;
  --text:#1c2420;--muted:#66706a;--primary:#1f6f4a;--primary-ink:#ffffff;--primary-soft:#e2f0e8;
  --accent:#c98a1b;--danger:#b8402f;--danger-soft:#f8e4e0;--warn:#a86b00;--warn-soft:#fbefd6;--ok:#1f7a4d;--ok-soft:#dcf1e5;
  --info:#2b5f9e;--info-soft:#e1ebf7;--shadow:0 1px 2px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.04);
  --radius:12px;--side:248px;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121614;--surface:#1a201d;--surface-2:#222a26;--border:#2f3833;--text:#e6ebe7;--muted:#97a29b;
  --primary:#4fb985;--primary-ink:#0d1a13;--primary-soft:#1d3428;--accent:#e0a640;--danger:#ec7a66;--danger-soft:#3a201b;
  --warn:#e8b04a;--warn-soft:#382c14;--ok:#5cc58f;--ok-soft:#183324;--info:#7fb0ec;--info-soft:#1a2a3d;--shadow:none;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121614;--surface:#1a201d;--surface-2:#222a26;--border:#2f3833;--text:#e6ebe7;--muted:#97a29b;
  --primary:#4fb985;--primary-ink:#0d1a13;--primary-soft:#1d3428;--accent:#e0a640;--danger:#ec7a66;--danger-soft:#3a201b;
  --warn:#e8b04a;--warn-soft:#382c14;--ok:#5cc58f;--ok-soft:#183324;--info:#7fb0ec;--info-soft:#1a2a3d;--shadow:none;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;line-height:1.5;background:var(--bg);color:var(--text)}
a{color:var(--primary)}
.hidden{display:none!important}
.muted{color:var(--muted)}.small{font-size:12px}
.app{display:flex;min-height:100vh}
.sidebar{width:var(--side);background:var(--surface);border-right:1px solid var(--border);position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:16px 12px;overflow-y:auto;z-index:20;transition:transform .2s}
.brand{display:flex;gap:10px;align-items:center;padding:4px 8px 16px}
.brand b{display:block;font-size:14px}.brand small{color:var(--muted);font-size:12px}
.logo{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--primary);color:var(--primary-ink);font-weight:700;font-size:13px;letter-spacing:.5px;flex:none}
.brand.big .logo{width:48px;height:48px;font-size:15px}
nav .grp{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:14px 10px 4px}
nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--text);text-decoration:none}
nav a:hover{background:var(--surface-2)}
nav a.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
nav a .ic{width:18px;text-align:center;opacity:.8}
.side-foot{margin-top:auto;padding:14px 8px 0}
.main{flex:1;margin-left:var(--side);min-width:0}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:12px 24px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.topbar h1{font-size:18px;margin:0;flex:1}
.top-actions{display:flex;gap:8px;align-items:center}
.menu-btn{display:none}
.view{padding:24px;max-width:1400px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);min-width:0}
.card h3{margin:0 0 12px;font-size:14px;font-weight:600}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.card-head h3{margin:0}
.stat .label{color:var(--muted);font-size:12px}
.stat .value{font-size:22px;font-weight:700;margin:4px 0;font-variant-numeric:tabular-nums}
.stat .sub{font-size:12px;color:var(--muted)}
.bar{height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden;margin-top:8px}
.bar>i{display:block;height:100%;background:var(--primary);border-radius:99px}
.bar.warn>i{background:var(--warn)}.bar.bad>i{background:var(--danger)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.toolbar .spacer{flex:1}
input,select,textarea{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:7px 10px;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--primary) 40%,transparent);border-color:var(--primary)}
textarea{min-height:80px;resize:vertical}
.btn{font:inherit;font-weight:500;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;padding:7px 14px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.danger{color:var(--danger)}
.btn.ghost{background:transparent}
.btn.small{padding:4px 10px;font-size:12px}
.icon-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:15px;line-height:1}
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
th{font-size:12px;font-weight:600;color:var(--muted);background:var(--surface-2);position:sticky;top:0}
tbody tr:hover{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right}
td.wrap{white-space:normal;min-width:220px}
tfoot td{font-weight:700;background:var(--surface-2)}
.badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:12px;font-weight:500;background:var(--surface-2);color:var(--muted)}
.badge.ok{background:var(--ok-soft);color:var(--ok)}.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.bad{background:var(--danger-soft);color:var(--danger)}.badge.info{background:var(--info-soft);color:var(--info)}
.pct{font-weight:600}.pct.ok{color:var(--ok)}.pct.warn{color:var(--warn)}.pct.bad{color:var(--danger)}
.chart-box{position:relative;height:280px}
.empty{padding:32px;text-align:center;color:var(--muted)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto}
.tabs button{font:inherit;background:none;border:none;border-bottom:2px solid transparent;padding:8px 14px;color:var(--muted);cursor:pointer;white-space:nowrap}
.tabs button.active{color:var(--primary);border-color:var(--primary);font-weight:600}
dialog{border:none;padding:0;border-radius:14px;background:var(--surface);color:var(--text);width:min(640px,calc(100vw - 32px));box-shadow:0 20px 60px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(0,0,0,.4)}
.modal header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal header h2{font-size:16px;margin:0}
.modal-body{padding:16px 20px;display:grid;grid-template-columns:1fr 1fr;gap:12px;max-height:65vh;overflow-y:auto}
.modal-body label,.login-card label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.modal-body label.full,.modal-body>.full{grid-column:1/-1}
.modal footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--border)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--text);color:var(--bg);padding:10px 18px;border-radius:10px;transition:transform .25s;z-index:100}
.toast.show{transform:translateX(-50%) translateY(0)}
.login{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:50;padding:16px}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px;width:min(380px,100%);display:grid;gap:14px;box-shadow:var(--shadow)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px}
.kv dt{color:var(--muted)}.kv dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}
.list li:last-child{border-bottom:none}
.swot{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.swot div{background:var(--surface-2);border-radius:10px;padding:12px}
.swot b{display:block;margin-bottom:6px}
.swot ol{margin:0;padding-left:18px}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .sidebar{transform:translateX(-100%)}.sidebar.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.3)}
  .main{margin-left:0}.menu-btn{display:block}
  .view{padding:16px}.topbar{padding:10px 16px}
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .modal-body{grid-template-columns:1fr}
  .swot{grid-template-columns:1fr}
  #yearSel{display:none}
}
@media print{.sidebar,.topbar,.toolbar,.btn{display:none!important}.main{margin:0}.card,.table-wrap{box-shadow:none}}
/* --- Omset harian --- */
.neg{color:var(--danger)}.pos{color:var(--ok)}
.congrats{background:var(--primary-soft);border-color:transparent}
.g-input{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}
.in-grp{margin:16px 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.in-row{display:grid;grid-template-columns:minmax(150px,1fr) 180px;gap:4px 12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.in-row label{display:flex;flex-direction:column;cursor:pointer}
.in-row input{text-align:right;font-variant-numeric:tabular-nums;font-size:15px}
.in-meta{grid-column:1/-1}
.in-total{display:flex;justify-content:space-between;padding:12px 0;font-size:15px}
tr.sel td{background:var(--primary-soft)}
.sheet{max-height:70vh}
.sheet td{padding:2px 4px}.sheet td:first-child,.sheet td:nth-child(2){padding:4px 10px}
.sheet input.cell{width:118px;border-color:transparent;background:transparent;text-align:right;padding:4px 6px;font-variant-numeric:tabular-nums}
.sheet input.cell:hover{border-color:var(--border)}
.sheet input.cell:focus{background:var(--surface)}
.sheet input.cell.saved{background:var(--ok-soft)}
.sheet tr.sun td{background:color-mix(in srgb,var(--warn-soft) 50%,transparent)}
.sheet tr.libur td{background:var(--danger-soft)}
.sheet thead th{z-index:1}
.chip{display:inline-flex;gap:6px;align-items:center;margin:2px}
.chip button{border:none;background:none;color:inherit;cursor:pointer;padding:0}
@media (max-width:1000px){.g-input{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.in-row{grid-template-columns:1fr 140px}}
.kv.tf dd{white-space:nowrap;font-size:13px}
.toast{opacity:0;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1}
.share-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:start}
.share-prev{background:var(--surface-2);border-radius:10px;padding:10px;max-height:560px;overflow:auto}
.share-prev img{display:block;width:100%;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.share-btns{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
@media (max-width:820px){.share-grid{grid-template-columns:minmax(0,1fr)}.share-btns .btn{flex:1 1 45%}}
/* --- Modul SDM --- */
dialog.wide{width:min(860px,calc(100vw - 32px))}
.modal-body .fsec{grid-column:1/-1;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--primary);border-bottom:1px solid var(--border);padding:10px 0 4px;margin-top:4px}
.modal-body .fsec:first-child{padding-top:0;margin-top:0}
.anak-row{display:grid;grid-template-columns:1.4fr 1.4fr 110px 1.2fr 34px;gap:6px;margin-bottom:6px}
.avatar{display:inline-grid;place-items:center;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-weight:700;flex:none}
.avatar.sm{width:32px;height:32px;font-size:12px}.avatar.lg{width:72px;height:72px;font-size:24px}
.who{display:flex;gap:10px;align-items:center}
.profile-head{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.profile-head h2{margin:0 0 4px;font-size:20px}
.ph-main{flex:1;min-width:220px}.ph-badges{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.ph-kv{display:grid;grid-template-columns:auto auto;gap:4px 16px;margin:0;font-size:13px}
.ph-kv dt{color:var(--muted)}.ph-kv dd{margin:0;font-weight:600;text-align:right}
.kv2{display:grid;grid-template-columns:minmax(120px,40%) 1fr;gap:6px 14px;margin:0;font-size:13px}
.kv2 dt{color:var(--muted)}.kv2 dd{margin:0;word-break:break-word}
.notice{margin-bottom:16px;padding:12px 16px;background:var(--surface-2)}
.notice.bad{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.notice.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.doc-check{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tabs .cnt{font-size:11px;color:var(--muted);font-weight:400}
.print-only{display:none}
.empty-sdm{max-width:720px}
.sdm-io{margin-top:16px}
@media (max-width:820px){.anak-row{grid-template-columns:1fr 1fr}.profile-head{gap:12px}.ph-kv{width:100%}}
@media print{.no-print,.sdm-io{display:none!important}.print-only{display:block}.profile-grid{grid-template-columns:1fr 1fr}body{background:#fff}}
/* --- Modul Absensi --- */
:root{--tb-bg:#ece6fb;--tb-fg:#6142b8;--sick-bg:#fde6d2;--sick-fg:#a9500f;--cuti-bg:#dff0f3;--cuti-fg:#23707f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--tb-bg:#2c2444;--tb-fg:#b9a6f2;--sick-bg:#3a2a1c;--sick-fg:#f0a868;--cuti-bg:#1a3238;--cuti-fg:#79c7d6}}
:root[data-theme="dark"]{--tb-bg:#2c2444;--tb-fg:#b9a6f2;--sick-bg:#3a2a1c;--sick-fg:#f0a868;--cuti-bg:#1a3238;--cuti-fg:#79c7d6}
.tabs a.tabl{padding:8px 14px;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.tabs a.tabl.active{color:var(--primary);border-color:var(--primary);font-weight:600}
.ab{display:inline-grid;place-items:center;min-width:28px;height:22px;padding:0 4px;border-radius:6px;font-size:11px;font-weight:700;line-height:1}
.ab.sm{min-width:24px;height:20px;font-size:10.5px}
.ab-ok{background:var(--ok-soft);color:var(--ok)}.ab-info{background:var(--info-soft);color:var(--info)}.ab-tb{background:var(--tb-bg);color:var(--tb-fg)}
.ab-warn{background:var(--warn-soft);color:var(--warn)}.ab-sick{background:var(--sick-bg);color:var(--sick-fg)}.ab-bad{background:var(--danger-soft);color:var(--danger)}
.ab-cuti{background:var(--cuti-bg);color:var(--cuti-fg)}.ab-off{background:var(--surface-2);color:var(--muted)}.ab-none{color:var(--muted);background:transparent}
.ab-legend{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:12px;margin-bottom:10px}
.ab-count{font-size:13px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.chk{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.dnav{display:inline-flex;gap:4px;align-items:center}
.ab-row{display:grid;grid-template-columns:minmax(200px,1.2fr) auto auto minmax(160px,1fr) auto;gap:10px 14px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border)}
.ab-row:last-child{border-bottom:none}
.ab-seg{display:flex;gap:4px;flex-wrap:wrap}
.ab-btn{min-width:38px;height:34px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.ab-btn:hover{border-color:var(--muted)}
.ab-btn.on{border-color:currentColor;box-shadow:0 0 0 1px currentColor inset}
.ab-btn.on.ab-ok{background:var(--ok-soft);color:var(--ok)}.ab-btn.on.ab-info{background:var(--info-soft);color:var(--info)}.ab-btn.on.ab-tb{background:var(--tb-bg);color:var(--tb-fg)}
.ab-btn.on.ab-warn{background:var(--warn-soft);color:var(--warn)}.ab-btn.on.ab-sick{background:var(--sick-bg);color:var(--sick-fg)}.ab-btn.on.ab-bad{background:var(--danger-soft);color:var(--danger)}
.ab-btn.on.ab-cuti{background:var(--cuti-bg);color:var(--cuti-fg)}.ab-btn.on.ab-off{background:var(--surface-2);color:var(--text)}
.ab-jam{display:flex;gap:4px}.ab-jam input{width:104px}
.ab-ket{width:100%}
.ab-matrix th{text-align:center;padding:6px 4px;font-size:11px;line-height:1.2}
.ab-matrix th:first-child{text-align:left}
.ab-matrix td.c{padding:3px 2px;text-align:center;cursor:pointer}
.ab-matrix td.c:hover{outline:2px solid var(--primary);outline-offset:-2px}
.ab-matrix .off{background:color-mix(in srgb,var(--surface-2) 70%,transparent)}
.ab-matrix td.nm{position:sticky;left:0;background:var(--surface);z-index:1;min-width:170px;padding:4px 10px}
.lap-sheet{padding:24px}
.lap-title{text-align:center;font-weight:700;font-size:18px;letter-spacing:.04em;margin-bottom:12px}
.lap-meta{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:0 0 14px}.lap-meta dt{font-weight:600}.lap-meta dd{margin:0}
.lap-table td{padding:3px 6px;vertical-align:top}.lap-table tr.off td{background:color-mix(in srgb,var(--surface-2) 70%,transparent)}
.lap-table textarea{min-height:30px;width:min(420px,40vw);resize:vertical;padding:4px 6px;overflow:hidden}
.lap-table input:not([type=checkbox]){width:130px;padding:4px 6px}.lap-table select{padding:4px}
.lap-foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:18px;align-items:flex-start}
.lap-ttd{flex:1;min-width:280px}.ttd-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px;text-align:center}
.ttd-space{height:56px}.ttd-in{border:none;border-bottom:1px dashed var(--border);background:transparent;text-align:center;width:160px;padding:2px}
.lap-sum{width:auto;min-width:240px}.lap-sum td,.lap-sum th{padding:4px 12px}
.lap-note{margin-top:14px}
@media (max-width:820px){.ab-row{grid-template-columns:1fr}.lap-table textarea{width:240px}}
@media print{
  body.print-lap .sidebar,body.print-lap .topbar,body.print-lap .no-print,body.print-lap .tabs,body.print-lap .no-print-col{display:none!important}
  body.print-lap .lap-sheet{border:none;box-shadow:none;padding:0}
  body.print-lap .lap-table input,body.print-lap .lap-table textarea,body.print-lap .lap-table select,body.print-lap .ttd-in{border:none;background:transparent;-webkit-appearance:none;appearance:none;width:100%;padding:0;color:#000}
  body.print-lap .table-wrap{border:none;overflow:visible}
  .ab-matrix{max-height:none;overflow:visible}
}
@media (max-width:520px){.ab-seg{flex-wrap:nowrap;gap:3px}.ab-btn{min-width:0;flex:1;height:36px;font-size:11px;padding:0}}
/* --- Shift --- */
.ab-row{display:flex;flex-wrap:wrap;gap:10px 14px}
.ab-row>.who{flex:0 0 240px}.ab-ketw{flex:1 1 200px;display:flex;gap:8px;align-items:center}
.ab-shsel{max-width:230px}
.sh-info{margin-top:8px;font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.sh{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 4px;border-radius:6px;font-size:11px;font-weight:700}
.sh0{background:#fff1c7;color:#8a5a00}.sh1{background:#d9ecff;color:#1e5aa8}.sh2{background:#e8dcff;color:#5b3aa8}.sh3{background:#d6f3e4;color:#17694a}.sh4{background:#ffe0e6;color:#a1304a}
.sh-off{background:var(--surface-2);color:var(--muted)}.sh-none{color:var(--muted)}
:root[data-theme="dark"] .sh0{background:#3d3215;color:#f3cf6e}:root[data-theme="dark"] .sh1{background:#17304d;color:#8fc1ff}:root[data-theme="dark"] .sh2{background:#2d2448;color:#c3aefc}:root[data-theme="dark"] .sh3{background:#173a2b;color:#7fdcae}:root[data-theme="dark"] .sh4{background:#45212b;color:#ff9db1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sh0{background:#3d3215;color:#f3cf6e}:root:not([data-theme="light"]) .sh1{background:#17304d;color:#8fc1ff}:root:not([data-theme="light"]) .sh2{background:#2d2448;color:#c3aefc}:root:not([data-theme="light"]) .sh3{background:#173a2b;color:#7fdcae}:root:not([data-theme="light"]) .sh4{background:#45212b;color:#ff9db1}}
.sh-table input{padding:4px 6px}
.ab-matrix td.jd{cursor:pointer}
.shc{display:block;font-style:normal;font-size:9.5px;color:var(--muted);line-height:1.1;margin-top:1px}.shc.late{color:var(--danger);font-weight:700}
@media (max-width:820px){.ab-row>.who{flex-basis:100%}.ab-shsel{max-width:none;width:100%}}
@media (max-width:520px){.ab-seg{flex:1 1 100%}}
.ab-shsel{max-width:200px}
/* --- Logo --- */
.brand{flex-direction:column;align-items:flex-start;gap:6px}
.brand .logo-img{display:block;width:170px;max-width:100%;height:auto}
.brand.big{align-items:center;text-align:center;padding-bottom:4px}.brand.big .logo-img{width:240px}
.brand small{color:var(--muted);font-size:12px}
:root[data-theme="dark"] .logo-img{background:#fff;border-radius:10px;padding:8px 10px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-img{background:#fff;border-radius:10px;padding:8px 10px}}
/* --- File lampiran & absen saya --- */
.att-list{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.att{position:relative;width:96px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.att img,.att-doc{width:96px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--border);background:var(--surface-2)}
.att-doc{display:grid;place-items:center;font-weight:700;color:var(--muted);font-size:12px}
.att-name{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att-del{position:absolute;top:2px;right:2px;border:none;border-radius:50%;width:20px;height:20px;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;font-size:11px}
.user-chip{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;border:none;background:none;color:var(--text);cursor:pointer;font:inherit;padding:2px 6px;border-radius:8px}
.user-chip:hover{background:var(--surface-2)}.user-chip small{color:var(--muted);font-size:11px}
.saya-head{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.saya-head h2{margin:0;font-size:18px}
.saya-jadwal{margin-left:auto;background:var(--surface-2);border-radius:10px;padding:10px 14px;display:flex;gap:8px;align-items:center}
.saya-step{margin-top:16px}.saya-step h3{margin:0 0 12px}
.saya-st .ab-btn{height:auto;padding:8px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:78px}
.saya-st .ab-btn span{font-weight:500;font-size:11px}
.btn.big{padding:12px 20px;font-size:15px;margin-top:12px}
.full-w{display:block;width:100%;margin-top:10px}.full-w textarea{width:100%}
#sRing{width:100%}
.saya-times{display:flex;gap:28px;flex-wrap:wrap}.saya-times>div{display:flex;flex-direction:column;gap:2px}.saya-times b{font-size:22px}
.keg-card{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-top:10px;display:flex;flex-direction:column;gap:6px}
.keg-mini{display:flex;flex-direction:column;gap:2px;font-size:11.5px;margin-top:4px;color:var(--muted)}
@media (max-width:820px){.saya-jadwal{margin-left:0;width:100%}.saya-st .ab-btn{min-width:0;flex:1 1 30%}.user-chip small{display:none}}
/* --- Pelatihan & Administrasi --- */
.pel-head{display:flex;gap:16px;align-items:center;margin-bottom:10px}
.pel-logo{height:46px;width:auto}
.print-only-inline,.print-only-cell{display:none}
.pp-list{max-height:52vh;overflow:auto;border:1px solid var(--border);border-radius:10px;padding:8px 12px}
.pp-unit{margin-bottom:10px}.pp-uh{display:flex;gap:8px;align-items:center;padding:4px 0;border-bottom:1px solid var(--border)}
.pp-k{display:flex;gap:8px;align-items:center;padding:3px 0 3px 20px;cursor:pointer}
.pp-h{margin:20px 0 10px}
.pp-card{display:flex;gap:14px;align-items:flex-start}
.pp-foto{width:64px;height:64px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-weight:700;font-size:20px;flex:none;overflow:hidden}
.pp-foto img{width:100%;height:100%;object-fit:cover}
.pp-info{flex:1;min-width:0}.pp-act{display:flex;flex-direction:column;gap:6px}
.disp-table th{width:200px;text-align:left;vertical-align:top;background:var(--surface-2)}.disp-table th,.disp-table td{border:1px solid var(--border);padding:8px 10px;white-space:normal}
@media print{body.print-lap .print-only-inline{display:inline-block}body.print-lap .print-only-cell{display:table-cell;width:80px}body.print-lap .pel-report .card{break-inside:avoid}}
/* --- Foto karyawan --- */
.avatar{overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.xl{width:96px;height:96px;font-size:30px}
.photo-field{display:flex;gap:16px;align-items:center}
.ph-foto{display:flex;flex-direction:column;align-items:center;gap:6px}
/* --- Business Plan --- */
.sw-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sw-box{padding:14px;border-top:4px solid var(--border)}
.sw-box.q-s{border-top-color:#2e9e5b}.sw-box.q-w{border-top-color:#d08a12}.sw-box.q-o{border-top-color:#2b6cb0}.sw-box.q-t{border-top-color:#c0392b}.sw-box.q-tows{border-top-color:#7a5bc4}
.sw-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}.sw-head b{font-size:15px}
.sw-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.sw-item{padding:6px 8px;border-radius:8px;background:var(--surface-2)}
.sw-item.ok{background:var(--ok-soft)}
.sw-text{white-space:pre-wrap}
.sw-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px}
.sw-vote{border:1px solid var(--border);background:var(--surface);border-radius:99px;padding:1px 8px;cursor:pointer;font:inherit;font-size:12px;color:var(--text)}
.sw-vote.on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
.sw-add{display:flex;gap:6px;margin-top:10px;align-items:flex-end}.sw-add textarea{flex:1;min-height:38px}
.bsc-head{display:flex;gap:16px;align-items:flex-start}
.bsc-tema{width:100%;font-size:18px;font-weight:700;border:none;border-bottom:1px dashed var(--border);background:transparent;padding:4px 0}
.bsc-head textarea{width:100%;min-height:44px}
.bsc-table td{vertical-align:top}.bsc-table .bsc-p{writing-mode:horizontal-tb;min-width:110px}
.bsc-table tr.p-keu td:first-child.bsc-p,.peta-row.p-keu .peta-p{background:#e5f4ea}
.bsc-table tr.p-agt td:first-child.bsc-p,.peta-row.p-agt .peta-p{background:#e4eefb}
.bsc-table tr.p-pbi td:first-child.bsc-p,.peta-row.p-pbi .peta-p{background:#fbefdc}
.bsc-table tr.p-ptb td:first-child.bsc-p,.peta-row.p-ptb .peta-p{background:#efe8fb}
:root[data-theme="dark"] .bsc-p,:root[data-theme="dark"] .peta-p{background:var(--surface-2)!important}
.ini{margin:0;padding-left:16px}.ini li.done{text-decoration:line-through;color:var(--muted)}
.peta{display:flex;flex-direction:column;gap:10px}
.peta-row{display:grid;grid-template-columns:150px 1fr;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.peta-p{padding:12px;font-weight:700;display:flex;align-items:center}
.peta-cards{display:flex;flex-wrap:wrap;gap:10px;padding:10px}
.peta-card{border:1px solid var(--border);border-radius:10px;padding:10px;min-width:200px;max-width:320px;flex:1;cursor:pointer;background:var(--surface)}
.peta-card:hover{border-color:var(--primary)}.peta-t{font-size:12px;margin-top:4px}
.rka-sheet td{padding:2px 4px}.rka-sheet input{border-color:transparent;background:transparent;padding:4px 6px;width:100%}
.rka-sheet input:hover{border-color:var(--border)}.rka-sheet input:focus{background:var(--surface)}
.rka-sheet input.n{text-align:right;font-variant-numeric:tabular-nums}
.rka-h td{background:var(--surface-2)}.rka-h input{font-weight:700}.rka-h.lv0 td{background:var(--primary-soft)}
.rka-act{white-space:nowrap}.rka-act select{padding:2px;font-size:11px}
.icon-btn.sm{width:26px;height:26px;font-size:12px}
.ak-sheet td{padding:2px 4px}.ak-sheet .ak-l{padding-left:22px;min-width:240px;white-space:normal}
.ak-sheet input.cell{width:104px}
.ak-sec td{background:var(--primary-soft);font-weight:700}.ak-g td{background:var(--surface-2);font-weight:600}
.ak-t td{font-weight:600;border-top:2px solid var(--border)}.ak-sum td{background:var(--surface-2);font-weight:600}.ak-sum.strong td{background:var(--primary-soft)}
.ak-add{font-size:12px;padding:3px 6px}
@media (max-width:820px){.sw-grid{grid-template-columns:1fr}.peta-row{grid-template-columns:1fr}.bsc-head{flex-direction:column}}
@media print{body.print-lap .sw-add,body.print-lap .sw-meta button{display:none!important}}
@media (hover:hover){.sw-item .sw-meta .btn{visibility:hidden}.sw-item:hover .sw-meta .btn{visibility:visible}}
.sw-item .sw-meta .btn{padding:0 6px;font-size:11px}
.pel-head.print-only{display:none}
@media print{body.print-lap .pel-head.print-only{display:flex}}
/* --- RAT & Annual Report --- */
.ar-head{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.ar-tema{width:100%;border:none;border-bottom:1px dashed var(--border);background:transparent;font-style:italic;padding:4px 0;margin-top:4px}
.ar-prog{min-width:150px;text-align:center}.ar-prog .value{font-size:26px;font-weight:700}
.ar-edit textarea{width:100%;font-family:inherit;line-height:1.5}
.ar-preview{max-height:80vh;overflow:auto}
.ar-page,.ar-book .ar-sec,.ar-cover{background:#fff;color:#1c2420;font-family:Georgia,'Times New Roman',serif;font-size:14px;line-height:1.6}
.ar-page{padding:20px 24px;border:1px solid var(--border);border-radius:6px}
.ar-page h4,.ar-sec h4{font-family:Inter,system-ui,sans-serif;margin:16px 0 6px;color:#1f6f4a}
.ar-page h3,.ar-sec h3,.ar-page h5,.ar-sec h5{font-family:Inter,system-ui,sans-serif;margin:14px 0 4px}
.ar-h{font-family:Inter,system-ui,sans-serif;color:#1f6f4a;font-size:20px;border-bottom:2px solid #1f6f4a;padding-bottom:6px;margin:0 0 12px}
.md-t{width:100%;border-collapse:collapse;margin:8px 0;font-family:Inter,system-ui,sans-serif;font-size:12.5px}
.md-t th,.md-t td{border:1px solid #c9d1cb;padding:4px 8px;white-space:normal;text-align:left;color:#1c2420}
.md-t th{background:#e8efe9;position:static}.md-t td.num{text-align:right}
.md-t.fin tr.fh td{font-weight:700;background:#f3f5f2}.md-t.fin tr.ft td{font-weight:700;border-top:2px solid #7c8a80}
.ar-book{display:flex;flex-direction:column;gap:24px;align-items:center}
.ar-book .ar-sec,.ar-cover{width:min(820px,100%);padding:48px 56px;box-shadow:0 2px 14px rgba(0,0,0,.12);border-radius:4px}
.ar-cover{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:900px;gap:8px}
.ar-cover h1{font-family:Inter,system-ui,sans-serif;color:#1f6f4a;font-size:30px;margin:40px 0 8px}.ar-cover h2{font-family:Inter,system-ui,sans-serif;font-size:20px;margin:0;font-weight:600}
.ar-quote{font-style:italic;font-size:17px;max-width:520px;margin:24px 0}
.ar-toc{font-size:16px;line-height:2}
@media (max-width:820px){.ar-book .ar-sec,.ar-cover{padding:24px 18px}.ar-cover{min-height:600px}}
@media print{
  body.print-book .ar-book{display:block}
  body.print-book .ar-book .ar-sec,body.print-book .ar-cover{box-shadow:none;width:auto;padding:0;page-break-after:always;border-radius:0}
  body.print-book .ar-cover{min-height:95vh}
}
.tugas-path{display:flex;flex-wrap:wrap;gap:4px 6px;font-size:12.5px;margin-top:4px}.tugas-path span{color:var(--muted)}

/* ---------- Badan usaha & Kebijakan/SOP ---------- */
.badan-bar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.badan-bar button{--bc:var(--primary);border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:99px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.badan-bar button::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--bc)}
.badan-bar button span{color:var(--muted);font-size:12px}
.badan-bar button.on{border-color:var(--bc);background:color-mix(in srgb,var(--bc) 14%,var(--surface));font-weight:600}
.badge.bdg{--bc:#7c8a80;background:color-mix(in srgb,var(--bc) 16%,transparent);color:color-mix(in srgb,var(--bc) 80%,var(--text));font-weight:600;white-space:nowrap}
.badan-head{--bc:var(--primary);border-left:4px solid var(--bc);background:color-mix(in srgb,var(--bc) 8%,var(--surface));padding:8px 12px;border-radius:8px;margin-bottom:14px;font-size:13px}
.badan-card{--bc:var(--primary);border-top:4px solid var(--bc)}
.badan-top{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.badan-logo{width:52px;height:52px;border-radius:12px;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--bc) 18%,var(--surface));color:var(--bc);font-weight:700;font-size:14px;overflow:hidden}
.badan-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
table.idt{width:100%;border-collapse:collapse;font-size:13px}
table.idt th{text-align:left;color:var(--muted);font-weight:500;padding:4px 12px 4px 0;vertical-align:top;width:30%;white-space:normal}
table.idt td{padding:4px 0;word-break:break-word;white-space:normal}
.badan-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);font-size:13px}
.keb-sum{margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:520px}

/* ---------- Agenda (gaya Google Calendar) ---------- */
.cal{display:grid;grid-template-columns:232px minmax(0,1fr);gap:16px;align-items:start}
.cal-side{position:sticky;top:72px}
.cal-new{border-radius:16px;padding:12px 20px;font-size:14px;box-shadow:0 1px 3px rgba(0,0,0,.18);margin-bottom:16px}
.cal-new span{font-size:20px;line-height:0;margin-right:4px}
.mini-head{display:flex;align-items:center;justify-content:space-between;padding:0 2px 4px;font-size:13px}
.mini-head .icon-btn{border:0;background:none;width:26px;height:26px}
.mini-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px}
.mini-grid .mh{color:var(--muted);padding:4px 0;font-weight:500}
.mini-grid button{border:0;background:none;color:var(--text);width:28px;height:28px;margin:1px auto;border-radius:50%;cursor:pointer;font:inherit;font-size:11px;position:relative}
.mini-grid button:hover{background:var(--surface-2)}
.mini-grid button.out{color:var(--muted);opacity:.6}
.mini-grid button.inr{background:var(--primary-soft);border-radius:0}
.mini-grid button.sel{background:var(--primary-soft);color:var(--primary);font-weight:700;border-radius:50%}
.mini-grid button.today{background:var(--primary);color:var(--primary-ink);font-weight:700;border-radius:50%}
.mini-grid button.dot::after{content:"";position:absolute;left:50%;bottom:3px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:currentColor;opacity:.55}
.kal-h{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;color:var(--muted);margin:16px 4px 4px;text-transform:uppercase;letter-spacing:.04em}
.kal-h .icon-btn{width:26px;height:26px;border:0;background:none}
.kal-row{--kc:#1a73e8;display:flex;align-items:center;gap:10px;padding:5px 4px;border-radius:8px;cursor:pointer;font-size:13px}
.kal-row:hover{background:var(--surface-2)}
.kal-row input{position:absolute;opacity:0;width:0;height:0}
.kal-box{width:16px;height:16px;border-radius:4px;border:2px solid var(--kc);flex:none;display:grid;place-items:center}
.kal-row input:checked+.kal-box{background:var(--kc)}
.kal-row input:checked+.kal-box::after{content:"";width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.kal-row input:focus-visible+.kal-box{outline:2px solid var(--primary);outline-offset:2px}
.kal-name{flex:1;min-width:0;line-height:1.25}.kal-name small{display:block;color:var(--muted);font-size:11px}
.kal-ed{width:24px;height:24px;border:0;background:none;opacity:0}.kal-row:hover .kal-ed,.kal-ed:focus{opacity:1}
kbd{font:600 10px/1 Inter,system-ui,sans-serif;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:1px 4px;background:var(--surface)}
.palet{display:flex;flex-wrap:wrap;gap:8px}
.palet label{--kc:#000;cursor:pointer}.palet input{position:absolute;opacity:0}
.palet span{display:block;width:28px;height:28px;border-radius:50%;background:var(--kc)}
.palet input:checked+span{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--kc)}
.cal-main{min-width:0}
.cal-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cal-bar h2{font-size:20px;font-weight:500;margin:0 6px;white-space:nowrap}
.cal-bar #calQ{width:140px}
.cal-nav{display:flex;gap:2px}.cal-nav .icon-btn{border:0;background:none;font-size:20px;border-radius:50%}
.cal-nav .icon-btn:hover{background:var(--surface-2)}
.cal-sidebtn{display:none}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.seg button{border:0;background:var(--surface);color:var(--text);padding:7px 12px;font:inherit;font-size:13px;cursor:pointer;border-left:1px solid var(--border)}
.seg button:first-child{border-left:0}.seg button.on{background:var(--primary-soft);color:var(--primary);font-weight:600}
.cal-body{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
/* bulan */
.mon-dow{display:grid;grid-template-columns:repeat(7,1fr);font-size:11px;font-weight:600;color:var(--muted);text-align:center;border-bottom:1px solid var(--border)}
.mon-dow span{padding:6px 0}
.mon-row{position:relative;display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--border)}
.mon-row:last-child{border-bottom:0}
.mon-cell{border-left:1px solid var(--border);padding-top:3px;text-align:center;cursor:default}
.mon-cell:first-child{border-left:0}
.mon-cell.out{background:color-mix(in srgb,var(--surface-2) 45%,transparent)}.mon-cell.out .mon-num{color:var(--muted)}
.mon-cell.sun .mon-num{color:var(--danger)}
.mon-cell.drop{background:var(--primary-soft)}
.mon-num{border:0;background:none;font:inherit;font-size:12px;font-weight:500;color:var(--text);min-width:24px;height:22px;border-radius:12px;cursor:pointer;padding:0 6px}
.mon-num:hover{background:var(--surface-2)}
.mon-num.today{background:var(--primary);color:var(--primary-ink)!important}
.ev{--ec:#1a73e8;position:absolute;height:20px;font-size:12px;line-height:20px;border-radius:4px;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;z-index:1;box-sizing:border-box;text-align:left}
.ev.bar{background:var(--ec);color:#fff;font-weight:500}
.ev.bar.cont-l{border-top-left-radius:0;border-bottom-left-radius:0}.ev.bar.cont-r{border-top-right-radius:0;border-bottom-right-radius:0}
.ev.timed{color:var(--text)}.ev.timed:hover,.ev.bar:hover{filter:brightness(.95)}.ev.timed:hover{background:var(--surface-2)}
.ev.timed i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:0}
.ev.timed .t{color:var(--muted)}
.ev.pub::after{content:"🌐";font-size:9px;margin-left:4px;opacity:.85}
.mon-more{position:absolute;border:0;background:none;font:inherit;font-size:12px;font-weight:600;color:var(--muted);padding:0 6px;height:20px;cursor:pointer;border-radius:4px;text-align:left;z-index:1}
.mon-more:hover{background:var(--surface-2);color:var(--text)}
/* minggu & hari */
.wk{--n:7;--gut:56px}
.wk-top,.wk-all{display:grid;grid-template-columns:var(--gut) repeat(var(--n),1fr);border-bottom:1px solid var(--border)}
.wk-all{grid-template-columns:var(--gut) 1fr}
.wk-gut{font-size:10px;text-align:right;padding-right:8px;position:relative}
.wk-all .wk-gut{align-self:center}
.wk-head{text-align:center;padding:8px 0 6px;font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase}
.wk-head button{display:block;margin:2px auto 0;border:0;background:none;font:inherit;font-size:22px;font-weight:400;color:var(--text);width:44px;height:44px;border-radius:50%;cursor:pointer}
.wk-head button:hover{background:var(--surface-2)}
.wk-head.today{color:var(--primary)}.wk-head.today button{background:var(--primary);color:var(--primary-ink)}
.wk-allbox{position:relative;border-left:1px solid var(--border);cursor:default}
.wk-scroll{height:max(420px,calc(100vh - 290px));overflow-y:auto;position:relative}
.wk-grid{display:grid;grid-template-columns:var(--gut) repeat(var(--n),1fr);position:relative}
.wk-grid>.wk-gut span{position:absolute;right:8px;transform:translateY(-50%);color:var(--muted);font-size:10px}
.wk-col{position:relative;border-left:1px solid var(--border);background-image:repeating-linear-gradient(to bottom,var(--border) 0,var(--border) 1px,transparent 1px,transparent 48px);cursor:cell;touch-action:pan-y}
.wk-col.today{background-color:color-mix(in srgb,var(--primary-soft) 30%,transparent)}
.ev.blk{background:var(--ec);color:#fff;height:auto;line-height:1.25;white-space:normal;padding:3px 6px;border:1px solid var(--surface);border-radius:6px;font-size:12px;user-select:none}
.ev.blk b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev.blk span{display:block;opacity:.92;font-size:11px;overflow:hidden}
.ev.blk.tiny{display:flex;gap:6px;align-items:center;padding:0 6px}.ev.blk.tiny b{flex:none;max-width:60%}.ev.blk.tiny span{white-space:nowrap;text-overflow:ellipsis}
.ev.blk.mv{cursor:grab}.ev.blk.dragging{opacity:.85;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:5;cursor:grabbing}
.ev.blk .rs{position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize}
.ev.blk.ghost{background:var(--primary);opacity:.8;pointer-events:none;z-index:4}
.now{position:absolute;left:-1px;right:0;height:2px;background:#ea4335;z-index:3;pointer-events:none}
.now::before{content:"";position:absolute;left:-6px;top:-5px;width:12px;height:12px;border-radius:50%;background:#ea4335}
/* jadwal */
.sch{padding:8px 16px 16px}
.sch-day{display:grid;grid-template-columns:110px 1fr;gap:8px;padding:8px 0;border-bottom:1px solid var(--border)}
.sch-day:last-child{border-bottom:0}
.sch-date{display:flex;align-items:center;gap:8px;border:0;background:none;font:inherit;color:var(--text);cursor:pointer;align-self:start;padding:4px 0}
.sch-date b{font-size:22px;font-weight:400;width:40px;height:40px;display:grid;place-items:center;border-radius:50%}
.sch-date span{font-size:11px;color:var(--muted);font-weight:600}
.sch-day.today .sch-date b{background:var(--primary);color:var(--primary-ink)}
.sch-ev{position:static;height:auto;display:flex;align-items:center;gap:12px;padding:8px 10px;line-height:1.35;white-space:normal}
.sch-ev:hover{background:var(--surface-2)}
.sch-ev i{width:10px;height:10px;border-radius:50%;flex:none}
.sch-t{width:120px;flex:none;color:var(--muted);font-size:13px}
.sch-n{flex:1;min-width:0;font-size:13px}.sch-n small{display:block;color:var(--muted)}
/* popover */
.cal-pop{position:fixed;z-index:60;width:min(400px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,.22);padding:10px 18px 18px;font-size:13px}
.pop-act{display:flex;justify-content:flex-end;gap:2px;margin:0 -8px 2px 0}
.pop-act .icon-btn{border:0;background:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;text-decoration:none;color:var(--text)}
.pop-act .icon-btn:hover{background:var(--surface-2)}
.pop-h{display:flex;gap:14px;margin-bottom:10px}.pop-h i{width:14px;height:14px;border-radius:4px;flex:none;margin-top:6px}
.pop-h h3{margin:0 0 2px;font-size:19px;font-weight:500;line-height:1.3}
.pop-r{display:flex;gap:14px;margin-top:10px}.pop-r>span{width:14px;flex:none;text-align:center;color:var(--muted)}
.pop-del{margin-top:12px;padding:10px;border-radius:8px;background:var(--surface-2);display:grid;gap:4px}
.pop-del label{display:flex;gap:8px;align-items:center}
.cal-pop.day{width:240px;text-align:center}.cal-pop.day .ev{position:relative;margin:2px 0;text-align:left}
.day-h span{display:block;font-size:11px;color:var(--muted);font-weight:600}.day-h b{font-size:24px;font-weight:400}
.cal-pop.quick .q-title{width:100%;border:0;border-bottom:2px solid var(--border);border-radius:0;font-size:20px;padding:6px 0;background:none;color:var(--text)}
.cal-pop.quick .q-title:focus{outline:none;border-bottom-color:var(--primary)}
.cal-pop.quick select{width:100%}
/* form acara */
.ev-title{font-size:20px;border:0!important;border-bottom:2px solid var(--border)!important;border-radius:0!important;padding:6px 2px!important;background:none!important}
.ev-title:focus{outline:none;border-bottom-color:var(--primary)!important}
.ev-when{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ev-when .chk{flex-direction:row!important;align-items:center;gap:6px!important;font-size:13px!important;color:var(--text)!important;margin-left:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip-x{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);border-radius:99px;padding:3px 4px 3px 10px;font-size:12px}
.chip-x button{border:0;background:none;cursor:pointer;color:var(--muted);width:20px;height:20px;border-radius:50%}
.chip-x button:hover{background:var(--border)}
@media (max-width:900px){
  .cal{grid-template-columns:minmax(0,1fr)}
  .cal-side{position:fixed;top:0;left:0;bottom:0;width:272px;z-index:40;background:var(--surface);border-right:1px solid var(--border);padding:16px;overflow-y:auto;transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 30px rgba(0,0,0,.2)}
  .cal-side.open{transform:none}
  .cal-sidebtn{display:inline-block}
  .cal-bar h2{font-size:17px;order:5;width:100%;margin:4px 0 0}
  .cal-bar #calQ{width:100%;order:6}
  .cal-bar .spacer{display:none}
  .wk{--gut:40px}.wk-head button{width:34px;height:34px;font-size:16px}
  .mon-dow span{font-size:10px}.ev{font-size:11px;padding:0 3px}.ev.timed .t{display:none}
  .sch{padding:4px 8px 8px}.sch-day{grid-template-columns:64px 1fr}.sch-date{flex-direction:column;gap:0}.sch-t{width:auto;font-size:11px}.sch-ev{flex-wrap:wrap;gap:4px 10px}
}

/* ---------- Login 2 langkah ---------- */
.login-card{gap:16px}
.l-step{display:grid;gap:14px}
.login-back{text-align:center;color:var(--muted);text-decoration:none}.login-back:hover{color:var(--primary)}
#loginMsg.err,#l2m.err{color:var(--danger)}
.l2-h{display:flex;gap:12px;align-items:center}.l2-h b{display:block;font-size:16px}.l2-h small{color:var(--muted)}
.l2-ic{width:42px;height:42px;border-radius:12px;background:var(--primary-soft);display:grid;place-items:center;font-size:20px;flex:none}
.l2-form{display:grid;gap:10px}
.otp{font-size:28px!important;letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums;padding:10px!important;font-weight:600}
.l2-links{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.linkbtn{border:0;background:none;color:var(--primary);font:inherit;font-size:13px;cursor:pointer;padding:4px 0}.linkbtn:hover{text-decoration:underline}
.l2-steps{margin:0;padding-left:20px;font-size:13px;display:grid;gap:4px}
.qr{display:grid;place-items:center;background:#fff;border-radius:12px;padding:10px;min-height:120px;border:1px solid var(--border)}
.qr svg{width:180px;height:180px}
code.key{font-size:14px;letter-spacing:.05em;word-break:break-all;background:var(--surface-2);padding:2px 6px;border-radius:6px}
.rc-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--surface-2);border-radius:10px;padding:12px}
.rc-grid code{font-size:15px;text-align:center;letter-spacing:.06em}
label.chk{flex-direction:row!important;align-items:center;gap:8px!important;font-size:13px!important;color:var(--text)!important}
/* ---------- editor website ---------- */
.wg{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wg figure{margin:0;width:120px;border-radius:8px;overflow:hidden;border:1px solid var(--border);background:var(--surface-2)}
.wg img{width:120px;height:80px;object-fit:cover;display:block}
.wg figcaption{display:flex;justify-content:center;gap:2px;padding:2px}
.wg figcaption button{border:0;background:none;cursor:pointer;color:var(--muted);width:26px;height:22px;border-radius:4px}.wg figcaption button:hover{background:var(--border);color:var(--text)}
.wg-mini .wg figure{width:64px}.wg-mini .wg img{width:64px;height:72px}
.wthumb img{width:72px;height:48px;object-fit:cover;border-radius:6px}
[data-lg] .wg img{object-fit:contain;background:#fff}
#loginMsg.ok-msg{color:var(--ok);font-weight:600}
/* form login standar */
.l-title{font-size:18px;margin:0 0 2px;text-align:center}
.pw-wrap{position:relative;display:block}.pw-wrap input{width:100%;padding-right:44px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;font-size:16px;opacity:.6;width:34px;height:34px}
.pw-eye:hover{opacity:1}
.l-row{display:flex;justify-content:flex-end;margin-top:-6px}
.l-submit{width:100%;padding:11px}
.l-sep{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.l-sep::before,.l-sep::after{content:"";flex:1;height:1px;background:var(--border)}
.l-act{width:100%}
#modalFoot{flex-wrap:wrap;row-gap:8px}

/* login muat di semua layar (laptop zoom 125–150%, layar pendek, HP): bisa digulir, kartu di tengah bila cukup ruang */
.login{display:flex;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 12px;place-items:initial}
.login-card{margin:auto;width:min(400px,100%);max-width:100%}
@media (max-height:760px){.login-card{padding:20px 22px;gap:12px}.brand.big .logo-img{width:180px}.l-title{font-size:16px}}
@media (max-height:600px){.brand.big .logo-img{width:140px}.brand.big small{display:none}}
.qr svg{width:min(180px,40vh);height:min(180px,40vh)}
.kar-info{border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:10px;padding:10px 12px;background:var(--surface-2);display:grid;gap:2px}