/* ==========================================================================
   Laporan Bulanan JNP — gaya antarmuka
   Warna diturunkan dari logo: biru baja + emas tembaga
   ========================================================================== */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #14283c;
  --navy: #1b3a57;
  --navy-2: #234a6e;
  --blue: #2f6190;
  --blue-2: #5b8fbf;
  --blue-soft: #e8f0f8;
  --gold: #b88a58;
  --gold-2: #d6ab72;
  --gold-soft: #f8efe3;
  --bg: #f2f5f9;
  --card: #ffffff;
  --line: #e2e8ef;
  --line-2: #eef2f6;
  --text: #1c2b3a;
  --muted: #6a7b8e;
  --ok: #1d9a68;
  --ok-soft: #e3f5ec;
  --warn: #c9811a;
  --warn-soft: #fdf0dc;
  --bad: #d14343;
  --bad-soft: #fbe8e8;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-1: 0 1px 2px rgba(20, 40, 60, .05), 0 4px 14px rgba(20, 40, 60, .05);
  --shadow-2: 0 2px 4px rgba(20, 40, 60, .06), 0 14px 34px rgba(20, 40, 60, .11);
  --ease: cubic-bezier(.22, .72, .2, 1);
  --sidebar-w: 268px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0; font-family: var(--font); font-size: 14.5px; line-height: 1.5; color: var(--text);
  background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "tnum";
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; color: var(--ink); letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.muted { color: var(--muted); }
.tiny { font-size: 12px; }
.center { text-align: center; }
.r { text-align: right; }
[hidden] { display: none !important; }
.ic { flex: none; display: block; }
kbd { font: 600 11px var(--font); background: #fff; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; color: var(--ink); }
code { background: var(--blue-soft); color: var(--navy); padding: 1px 6px; border-radius: 6px; font-size: 13px; }
::selection { background: rgba(47, 97, 144, .2); }
:focus-visible { outline: 2.5px solid rgba(47, 97, 144, .55); outline-offset: 2px; }

/* ----------------------------------------------------------- top progress bar */
.progress-bar { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 200; transform-origin: left; transform: scaleX(0); opacity: 0;
  background: linear-gradient(90deg, var(--blue), var(--gold-2)); box-shadow: 0 0 10px rgba(184, 138, 88, .6); pointer-events: none; }
.progress-bar.run { opacity: 1; transform: scaleX(.82); transition: transform 8s cubic-bezier(.1, .6, .2, 1); }
.progress-bar.done { opacity: 0; transform: scaleX(1); transition: transform .25s ease, opacity .5s .25s ease; }

/* ----------------------------------------------------------- layout shell */
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: 20px 14px 14px;
  background: radial-gradient(120% 70% at 0% 0%, #2a5580 0%, transparent 60%), linear-gradient(180deg, #1e4166 0%, #14283c 100%);
  color: #cfdcea; overflow-y: auto; z-index: 60; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 20px; }
.brand-logo { width: 46px; height: auto; background: #fff; border-radius: 12px; padding: 5px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.brand-txt strong { display: block; font-size: 13.5px; color: #fff; line-height: 1.25; font-weight: 650; }
.brand-txt span { font-size: 11.5px; color: var(--gold-2); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.nav { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.nav-label { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7f9bb8; padding: 4px 12px 6px; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 2px 0; border-radius: 12px;
  color: #cfdcea; font-weight: 550; font-size: 14px; transition: background .25s var(--ease), color .25s, transform .25s var(--ease);
}
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; transform: translateX(3px); }
.nav-item.active { background: linear-gradient(90deg, rgba(214,171,114,.22), rgba(255,255,255,.07)); color: #fff; }
.nav-item.active::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--gold-2); box-shadow: 0 0 12px rgba(214,171,114,.7); }
.nav-item.active .ic { color: var(--gold-2); }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font: 700 11.5px/20px var(--font); font-style: normal; text-align: center; background: var(--gold); color: #fff; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(214,171,114,.55); } 50% { box-shadow: 0 0 0 7px rgba(214,171,114,0); } }
.side-foot { display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px; margin-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }
.avatar { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--gold), #8d6a3f); }
.who { min-width: 0; flex: 1; }
.who strong { display: block; color: #fff; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who span { font-size: 11.5px; color: #8fa8c1; }
.logout-form { margin: 0; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: transparent; color: inherit; transition: background .2s, transform .2s var(--ease); position: relative; overflow: hidden; }
.icon-btn:hover { background: rgba(255,255,255,.1); }
.icon-btn:active { transform: scale(.9); }
.main .icon-btn:hover { background: var(--line-2); }
.scrim { position: fixed; inset: 0; background: rgba(10, 24, 38, .5); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 55; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 14px 28px;
  background: rgba(242, 245, 249, .82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(226, 232, 239, .9);
}
.menu-btn { display: none; color: var(--ink); }
.top-title { min-width: 0; flex: 1; }
.top-title h1 { font-size: 21px; font-weight: 700; }
.top-title p { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.period-pick { position: relative; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--blue); box-shadow: var(--shadow-1); transition: border-color .2s, box-shadow .2s; }
.period-pick:hover { border-color: var(--blue-2); }
.period-pick select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font-weight: 650; color: var(--ink); padding-right: 4px; cursor: pointer; outline: none; }
.period-pick:focus-within { box-shadow: 0 0 0 3px rgba(47, 97, 144, .18); }
.status-link:hover { text-decoration: none; }
.content { flex: 1; padding: 24px 28px 36px; display: flex; flex-direction: column; gap: 22px; max-width: 1560px; width: 100%; margin: 0 auto; animation: pageIn .55s var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
body.leaving .content { opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease; }
.foot { padding: 16px 28px 22px; text-align: center; color: var(--muted); font-size: 12px; }

/* ----------------------------------------------------------- reveal on scroll */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }

/* ----------------------------------------------------------- cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-1); min-width: 0; }
.card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.card-h h3 { font-size: 16px; font-weight: 680; }
.card-h p { color: var(--muted); font-size: 13px; margin-top: 2px; }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.cols-2.narrow { grid-template-columns: repeat(2, minmax(0, 520px)); }
.foot-note { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.sec { display: flex; flex-direction: column; gap: 22px; }
.sec-h { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; margin-top: 8px; }
.sec-no { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--navy)); box-shadow: 0 6px 14px rgba(27, 58, 87, .25); }

/* ----------------------------------------------------------- buttons */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent; font-weight: 620; font-size: 14px; white-space: nowrap; user-select: none; transition: transform .2s var(--ease), box-shadow .25s, background .2s, border-color .2s, color .2s; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%); box-shadow: 0 6px 16px rgba(27, 58, 87, .28); }
.btn-primary:hover { box-shadow: 0 10px 22px rgba(27, 58, 87, .36); }
.btn-ghost { color: var(--navy); background: #fff; border-color: var(--line); }
.btn-ghost:hover { border-color: var(--blue-2); background: var(--blue-soft); }
.btn-success { color: #fff; background: linear-gradient(135deg, #25b27c, #17855a); box-shadow: 0 6px 16px rgba(29, 154, 104, .3); }
.btn-danger-ghost { color: var(--bad); background: #fff; border-color: #f0c6c6; }
.btn-danger-ghost:hover { background: var(--bad-soft); }
.btn-block { width: 100%; }
.btn-sm { height: 34px; padding: 0 13px; font-size: 13px; border-radius: 10px; }
.btn.loading { pointer-events: none; color: transparent !important; }
.btn.loading > * { opacity: 0; }
.btn.loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn-ghost.loading::after, .btn-danger-ghost.loading::after { border-color: rgba(27,58,87,.25); border-top-color: var(--navy); }
@keyframes spin { to { transform: rotate(360deg); } }
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.45); animation: ripple .6s ease-out forwards; pointer-events: none; }
.btn-ghost .ripple, .btn-danger-ghost .ripple, .main .icon-btn .ripple { background: rgba(47, 97, 144, .22); }
@keyframes ripple { to { transform: scale(2.8); opacity: 0; } }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ----------------------------------------------------------- forms */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 44px; padding: 10px 13px; background: #fff; border: 1px solid var(--line); border-radius: 12px; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.field textarea { resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #c9d6e3; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47, 97, 144, .14); }
.field input:disabled { background: var(--line-2); color: var(--muted); }
.field.inline { margin: 0; }
.form-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 16px; font-size: 13.5px; cursor: pointer; }
.check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--blue); }
.pw { position: relative; }
.pw input { padding-right: 78px; }
.pw-toggle { position: absolute; right: 6px; top: 6px; height: 32px; padding: 0 12px; border: 0; background: var(--line-2); border-radius: 9px; font-size: 12px; font-weight: 600; color: var(--blue); }
.radio-cards { display: grid; gap: 10px; }
.rc { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.rc:hover { border-color: var(--blue-2); }
.rc input { margin-top: 3px; accent-color: var(--blue); width: 17px; height: 17px; }
.rc b { display: block; font-size: 14px; }
.rc small { color: var(--muted); font-size: 12.5px; }
.rc:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px rgba(47, 97, 144, .1); }
.sign-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sg { padding: 16px 16px 2px; border: 1px solid var(--line); border-radius: 14px; background: #fafcfe; }
.sg h4 { font-size: 13px; margin-bottom: 12px; color: var(--gold); text-transform: uppercase; letter-spacing: .08em; }

/* ----------------------------------------------------------- alerts */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: 14px; font-size: 14px; border: 1px solid; margin-bottom: 4px; }
.alert .ic { margin-top: 1px; }
.alert-error { background: var(--bad-soft); border-color: #f1c4c4; color: #8f2626; }
.alert-ok { background: var(--ok-soft); border-color: #bfe6d3; color: #12694a; }
.alert-warn { background: var(--warn-soft); border-color: #f1d9ad; color: #7d4f0a; }
.alert-lock { background: var(--blue-soft); border-color: #c8dcef; color: var(--navy); }

/* ----------------------------------------------------------- badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 20px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.st-draft { background: #eceff3; color: #546477; }
.st-submitted { background: var(--warn-soft); color: #9a6209; }
.st-verified { background: var(--ok-soft); color: #14774f; }
.st-returned { background: var(--bad-soft); color: #b13434; }

/* ----------------------------------------------------------- hero + sec nav */
.dash-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 28px; border-radius: 20px; color: #fff;
  background: radial-gradient(90% 140% at 100% 0%, rgba(214,171,114,.5) 0%, transparent 55%), linear-gradient(120deg, #1b3a57 0%, #2f6190 100%); box-shadow: 0 14px 34px rgba(27, 58, 87, .28); }
.dash-hero::after { content: ""; position: absolute; right: -60px; bottom: -90px; width: 280px; height: 280px; border-radius: 50%; border: 36px solid rgba(255,255,255,.06); }
.hero-txt { position: relative; z-index: 1; }
.eyebrow { font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-2); font-weight: 700; }
.dash-hero h2 { color: #fff; font-size: 30px; margin: 4px 0 8px; font-weight: 750; }
.dash-hero p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #d4e2f0; }
.hero-actions { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; }
.dash-hero .btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.dash-hero .btn-ghost:hover { background: rgba(255,255,255,.22); }
.dash-hero .btn-primary { background: linear-gradient(135deg, var(--gold-2), var(--gold)); box-shadow: 0 8px 20px rgba(0,0,0,.25); color: #2b1d0c; }
.sec-nav { position: sticky; top: 76px; z-index: 30; display: flex; gap: 4px; width: max-content; max-width: 100%; overflow-x: auto; padding: 5px; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-1); scrollbar-width: none; }
.sec-nav a { position: relative; z-index: 1; padding: 8px 16px; border-radius: 10px; font-weight: 600; font-size: 13.5px; color: var(--muted); transition: color .25s; white-space: nowrap; }
.sec-nav a:hover { text-decoration: none; color: var(--ink); }
.sec-nav a.active { color: #fff; }
.sec-thumb, .seg-thumb { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 10px; background: linear-gradient(135deg, var(--blue), var(--navy)); box-shadow: 0 4px 12px rgba(27, 58, 87, .3); transform: translateX(var(--x, 0)); width: var(--w, 0); transition: transform .45s var(--ease), width .45s var(--ease); }

/* ----------------------------------------------------------- KPI */
.kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kpi { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.kpi:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.kpi::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, var(--blue-soft), transparent 70%); opacity: .8; }
.kpi:nth-child(even)::after { background: radial-gradient(circle, var(--gold-soft), transparent 70%); }
.kpi-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 8px; position: relative; z-index: 1; }
.ic-blue { background: var(--blue-soft); color: var(--blue); }
.ic-gold { background: var(--gold-soft); color: var(--gold); }
.kpi-l { font-size: 13px; font-weight: 600; color: var(--muted); position: relative; z-index: 1; }
.kpi-v { font-size: 32px; font-weight: 760; color: var(--ink); letter-spacing: -.02em; line-height: 1.1; position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
.kpi-txt { font-size: 28px; }
.kpi-s { font-size: 12.5px; color: var(--muted); position: relative; z-index: 1; min-height: 18px; }
.kpi-ring { flex-direction: row; align-items: center; gap: 18px; }
.kpi-ring .kpi-t { display: flex; flex-direction: column; gap: 4px; position: relative; z-index: 1; }

.ring { position: relative; width: 86px; height: 86px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring .trk { fill: none; stroke: var(--line-2); }
.ring .bar { fill: none; stroke-linecap: round; stroke-dasharray: 0 999; }
.ring .num { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 760; font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ring.big { width: 112px; height: 112px; }
.ring.big .num { font-size: 19px; }
html:not([data-fx=off]) .ring .num { font-size: 13.5px; } html:not([data-fx=off]) .ring.big .num { font-size: 16.5px; }
.rings-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ring-card { display: flex; align-items: center; gap: 16px; padding: 18px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.ring-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.ring-card h4 { font-size: 14px; font-weight: 650; }
.ring-card p { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.ring-card b { color: var(--ink); }

/* ----------------------------------------------------------- tables (dashboard) */
.tbl-wrap { overflow-x: auto; margin: 0 -4px 14px; padding: 0 4px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 12px; border-bottom: 1.5px solid var(--line); white-space: nowrap; }
.tbl th.r { text-align: right; }
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl td.r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tbody tr { transition: background .2s; }
.tbl tbody tr:hover { background: #f7fafd; }
.tbl.compact td, .tbl.compact th { padding: 8px 10px; }
.tbl tfoot td { font-weight: 700; color: var(--ink); background: var(--blue-soft); border: 0; }
.tbl tfoot td:first-child { border-radius: 10px 0 0 10px; }
.tbl tfoot td:last-child { border-radius: 0 10px 10px 0; }
.tbl tr.sub td { background: #f6f9fc; font-weight: 600; }
.tbl .nm { font-weight: 620; color: var(--ink); }
.tbl .note { color: var(--muted); font-size: 12.5px; }
.pb { display: flex; align-items: center; gap: 10px; min-width: 130px; }
.pb-track { flex: 1; height: 8px; background: var(--line-2); border-radius: 6px; overflow: hidden; min-width: 60px; }
.pb-fill { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--blue-2), var(--blue)); transition: width 1.1s var(--ease); transition-delay: .15s; }
.pb-fill.gold { background: linear-gradient(90deg, var(--gold-2), var(--gold)); }
.pb-val { min-width: 46px; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.pb.in .pb-fill { width: var(--w, 0); }
.chart-box { position: relative; width: 100%; }
.chart-box.h260 { height: 260px; } .chart-box.h300 { height: 300px; } .chart-box.h420 { height: 420px; }
.legend-pill { font-size: 12px; font-weight: 600; color: var(--gold); background: var(--gold-soft); padding: 5px 11px; border-radius: 20px; white-space: nowrap; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 20px; color: var(--muted); text-align: center; }
.skeleton { background: linear-gradient(90deg, var(--line-2) 25%, #f7f9fc 50%, var(--line-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; color: transparent !important; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ----------------------------------------------------------- input toolbar + grid */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 14px 18px; }
.tb-stats { display: flex; gap: 24px; flex: 1; flex-wrap: wrap; }
.mini span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.mini b { font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tb-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.seg { position: relative; display: inline-flex; padding: 5px; background: var(--line-2); border-radius: 14px; gap: 2px; }
.seg-btn { white-space: nowrap; position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 0; background: transparent; border-radius: 10px; font-weight: 620; font-size: 13.5px; color: var(--muted); transition: color .25s; }
.seg-btn.active { color: #fff; }
.save-state { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 550; }
.save-state i { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); transition: background .3s, transform .3s; }
.save-state[data-state="saving"] i { background: var(--gold); animation: blink 1s infinite; }
.save-state[data-state="error"] i { background: var(--bad); }
.save-state[data-state="error"] { color: var(--bad); }
.save-state[data-state="ok"] i { animation: pop .5s var(--ease); }
@keyframes blink { 50% { opacity: .3; transform: scale(.7); } }
@keyframes pop { 40% { transform: scale(1.8); } }

.grid-card { padding: 0; overflow: hidden; }
.grid-scroll { overflow: auto; max-height: calc(100vh - 290px); max-height: calc(100dvh - 290px); min-height: 220px; position: relative; scrollbar-width: thin; }
.grid { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 100%; }
.grid.kind-meals { --w1: 150px; --w2: 190px; --w3: 0px; }
.grid.kind-laundry { --w1: 46px; --w2: 132px; --w3: 74px; }
.grid.kind-pantry { --w1: 46px; --w2: 230px; --w3: 62px; }
.grid th, .grid td { padding: 0; border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); background: #fff; height: 38px; }
.grid thead th { position: sticky; z-index: 3; background: #f3f7fb; font-size: 11.5px; font-weight: 700; color: var(--navy); text-align: center; padding: 6px 8px; height: auto; }
.grid thead tr:first-child th { top: 0; }
.grid thead tr:nth-child(2) th { top: 36px; }
.grid th.mon { background: linear-gradient(90deg, var(--navy), var(--blue)); color: #fff; letter-spacing: .1em; font-size: 11.5px; height: 36px; }
.grid th.mon2 { background: linear-gradient(90deg, var(--gold), var(--gold-2)); color: #fff; letter-spacing: .08em; }
.grid th.dh { min-width: 46px; width: 46px; padding: 4px 0; }
.grid th.dh small { display: block; font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.grid th.dh b { font-size: 13px; }
.grid th.dh.wk, .grid td.dc.wk { background: #fcf6ec; }
.grid th.dh.wk small { color: var(--gold); }
.grid th.tc { min-width: 76px; background: #eaf1f8; }
.grid .s { position: sticky; z-index: 2; background: #fff; text-align: left; padding: 0 12px; }
.grid thead .s { z-index: 4; background: #e8f0f8; text-align: center; }
.grid .s1 { left: 0; min-width: var(--w1); max-width: var(--w1); width: var(--w1); }
.grid .s2 { left: var(--w1); min-width: var(--w2); max-width: var(--w2); width: var(--w2); }
.grid .s3 { left: calc(var(--w1) + var(--w2)); min-width: var(--w3); max-width: var(--w3); width: var(--w3); box-shadow: 6px 0 8px -6px rgba(20, 40, 60, .18); }
.grid.kind-meals .s2 { box-shadow: 6px 0 8px -6px rgba(20, 40, 60, .18); }
.grid .lab { font-weight: 620; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid .lab2 { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid .lab.rep { color: transparent; }
.grid tr.grp td { border-top: 1.5px solid #cfdbe7; }
.grid .rmini { display: block; font-size: 10.5px; color: var(--muted); font-style: normal; line-height: 1.1; }
.grid td.no, .grid td.kgd, .grid td.uom { text-align: center; color: var(--muted); font-size: 12.5px; }
.grid td.dc { min-width: 46px; width: 46px; transition: background .25s; }
.grid td.dc.has { background: #eef5fc; }
.grid td.dc.has.wk { background: #fbf0dc; }
.grid input.cell { display: block; width: 100%; height: 37px; border: 0; background: transparent; text-align: center; font-size: 13.5px; font-variant-numeric: tabular-nums; outline: none; padding: 0 2px; border-radius: 0; transition: background .2s, box-shadow .2s; font-weight: 550; }
.grid input.cell:hover:not([readonly]) { background: rgba(47, 97, 144, .06); }
.grid input.cell:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--blue), 0 4px 14px rgba(47, 97, 144, .25); position: relative; z-index: 1; }
.grid input.cell[readonly] { cursor: default; color: var(--ink); }
.grid input.cell.saving { box-shadow: inset 0 0 0 2px rgba(184, 138, 88, .6); }
.grid input.cell.saved { animation: savedFlash .8s ease; }
.grid input.cell.err { box-shadow: inset 0 0 0 2px var(--bad); background: var(--bad-soft); }
@keyframes savedFlash { 0% { background: rgba(29, 154, 104, .35); } 100% { background: transparent; } }
.grid td.tot, .grid td.avg, .grid td.pc, .grid td.plan, .grid td.frq { text-align: right; padding: 0 10px; font-variant-numeric: tabular-nums; font-weight: 650; background: #f6f9fc; color: var(--ink); white-space: nowrap; }
.grid td.plan { color: var(--muted); font-weight: 550; }
.grid td.pc { color: var(--blue); }
.grid td.pc.low { color: var(--bad); }
.grid td.pc.high { color: var(--ok); }
.grid tr.band td { background: linear-gradient(90deg, var(--gold-soft), #fff 70%); padding: 7px 14px; height: auto; font-size: 11.5px; font-weight: 750; letter-spacing: .12em; color: var(--gold); position: sticky; left: 0; }
.grid tr.band td span { position: sticky; left: 14px; }
.grid tfoot td { position: sticky; bottom: 0; z-index: 2; background: #e8f0f8; font-weight: 700; text-align: center; color: var(--navy); border-top: 2px solid #c8d9ea; font-variant-numeric: tabular-nums; }
.grid tfoot td.s { background: #dfeaf5; text-align: left; z-index: 4; }
.grid tfoot tr.sum.minor td { background: #f3f7fb; font-weight: 600; color: var(--muted); }
.grid tfoot tr.sum.minor td.s { background: #eef3f8; }
.grid tfoot tr:nth-last-child(2) td { bottom: 38px; }
.grid tfoot tr:nth-last-child(3) td { bottom: 76px; }
.grid tr.sub td { background: #f0f5fa; font-weight: 700; color: var(--navy); text-align: center; position: static; border-top: 1.5px solid #c8d9ea; }
.grid tr.sub td.s { text-align: left; position: sticky; background: #e8f0f8; }
.grid tr.sub td.plan, .grid tr.sub td.tot, .grid tr.sub td.pc { background: #e8f0f8; text-align: right; }
.grid tfoot td.tot, .grid tfoot td.plan, .grid tfoot td.pc, .grid tfoot td.avg { text-align: right; padding: 0 10px; background: #dfeaf5; }
.grid-hint { display: flex; gap: 9px; align-items: center; padding: 11px 18px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line-2); background: #fbfcfe; }
.grid-hint .ic { color: var(--blue-2); }

/* per-hari */
.daymode { display: flex; flex-direction: column; gap: 14px; }
.day-head { display: flex; align-items: center; justify-content: space-between; padding: 10px; }
.day-head .icon-btn { color: var(--navy); background: var(--line-2); }
.day-head #dayPrev .ic { transform: rotate(90deg); }
.day-head #dayNext .ic { transform: rotate(-90deg); }
.day-title { text-align: center; }
.day-title small { display: block; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; }
.day-title b { font-size: 20px; color: var(--ink); }
.day-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.day-chips button { flex: none; min-width: 44px; height: 54px; border-radius: 14px; border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-weight: 700; color: var(--ink); transition: transform .2s var(--ease), background .2s, border-color .2s, color .2s; scroll-snap-align: center; }
.day-chips button small { font-size: 9.5px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.day-chips button.wk small { color: var(--gold); }
.day-chips button.has::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ok); margin-top: 1px; }
.day-chips button.active { background: linear-gradient(135deg, var(--blue), var(--navy)); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(27, 58, 87, .3); }
.day-chips button.active small { color: var(--gold-2); }
.day-list { display: flex; flex-direction: column; gap: 8px; }
.day-grp { margin: 10px 4px 2px; font-size: 11.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.day-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: border-color .2s, box-shadow .2s; animation: itemIn .4s var(--ease) both; animation-delay: calc(var(--k, 0) * 22ms); }
@keyframes itemIn { from { opacity: 0; transform: translateY(8px); } }
.day-item:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47, 97, 144, .12); }
.di-lab { flex: 1; min-width: 0; font-weight: 620; color: var(--ink); }
.di-lab small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); }
.day-item input.cell { width: 96px; height: 46px; text-align: center; font-size: 18px; font-weight: 700; border: 1.5px solid var(--line); border-radius: 12px; outline: none; background: #fafcfe; transition: border-color .2s, background .2s; }
.day-item input.cell:focus { border-color: var(--blue); background: #fff; }
.day-item input.cell[readonly] { background: var(--line-2); }

/* ----------------------------------------------------------- modal */
.modal-back { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 18px; background: rgba(10, 24, 38, .55); backdrop-filter: blur(4px); animation: fade .25s ease both; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(760px, 100%); max-height: min(86vh, 760px); display: flex; flex-direction: column; background: #fff; border-radius: 20px; box-shadow: 0 30px 80px rgba(10, 24, 38, .4); animation: modalIn .38s var(--ease) both; overflow: hidden; }
@keyframes modalIn { from { opacity: 0; transform: translateY(22px) scale(.97); } }
.modal-back.out { animation: fadeOut .2s ease forwards; }
.modal-back.out .modal { animation: modalOut .2s ease forwards; }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes modalOut { to { opacity: 0; transform: translateY(14px) scale(.97); } }
.modal-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.modal-h h3 { font-size: 17px; }
.modal-h p { color: var(--muted); font-size: 13px; }
.modal-b { overflow: auto; padding: 16px 22px 22px; }
.modal-b .icon-btn, .modal-h .icon-btn { color: var(--muted); }
.mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: #fff; animation: itemIn .3s var(--ease) both; }
.mrow-f { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.mrow input, .mrow select, .madd input, .madd select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; outline: none; }
.mrow input:focus, .mrow select:focus, .madd input:focus, .madd select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 97, 144, .14); }
.mrow-a { display: flex; gap: 2px; }
.mrow-a button { width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); display: grid; place-items: center; transition: background .2s, color .2s; }
.mrow-a button:hover { background: var(--line-2); color: var(--navy); }
.mrow-a button.del:hover { background: var(--bad-soft); color: var(--bad); }
.mrow-a button:disabled { opacity: .3; pointer-events: none; }
.mrow-a .up .ic { transform: none; }
.mrow-a .dn .ic { transform: rotate(180deg); }
.mrow.dirty { border-color: var(--gold-2); background: #fffaf3; }
.madd { margin-top: 16px; padding: 14px; border: 1.5px dashed #c9d6e3; border-radius: 14px; background: #fafcfe; }
.madd h4 { font-size: 13px; margin-bottom: 10px; color: var(--navy); }
.madd .mrow-f { margin-bottom: 10px; }
.mgroup { margin: 16px 2px 8px; font-size: 11.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }

/* ----------------------------------------------------------- periode */
.new-period { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: linear-gradient(120deg, #fff 0%, var(--blue-soft) 100%); }
.np-txt h3 { font-size: 17px; }
.np-txt p { color: var(--muted); font-size: 13px; margin-top: 2px; max-width: 460px; }
.np-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.np-form .field { margin: 0; }
.np-form .field.inline select, .np-form .field.inline input { min-width: 130px; }
.period-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.period-card { display: flex; flex-direction: column; gap: 14px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; }
.period-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.period-card.current { border-color: var(--blue-2); box-shadow: 0 0 0 3px rgba(47, 97, 144, .12), var(--shadow-1); }
.period-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-month b { display: block; font-size: 20px; color: var(--ink); line-height: 1.1; }
.pc-month span { color: var(--muted); font-weight: 600; font-size: 13px; }
.pc-stats { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; }
.pc-stats dt { font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.pc-stats dd { margin: 0; font-size: 18px; font-weight: 720; color: var(--ink); font-variant-numeric: tabular-nums; }
.pc-stats dd small { font-size: 12px; font-weight: 500; color: var(--muted); }
.pc-bar { height: 6px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.pc-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); transition: width 1.1s var(--ease) .2s; }
.period-card.in .pc-bar i { width: var(--w); }
.period-card footer { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }

/* ----------------------------------------------------------- verifikasi */
.flow { padding: 22px 24px 26px; }
.stepper { position: relative; display: flex; gap: 12px; list-style: none; margin: 0; padding: 0 0 18px; --p: .34; }
.stepper[data-step="1"] { --p: .67; }
.stepper[data-step="2"] { --p: 1; }
.stepper li { flex: 1; display: flex; align-items: center; gap: 12px; opacity: .5; transition: opacity .5s; }
.stepper li.on { opacity: 1; }
.stepper li i { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; background: var(--line-2); color: var(--muted); border: 2px solid var(--line); transition: all .5s var(--ease); }
.stepper li.on i { background: #fff; border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 5px rgba(47, 97, 144, .12); }
.stepper li.done i { background: var(--ok); border-color: var(--ok); color: #fff; box-shadow: 0 0 0 5px rgba(29, 154, 104, .14); }
.stepper li b { display: block; font-size: 14px; color: var(--ink); }
.stepper li span { font-size: 12.5px; color: var(--muted); }
.stepper-line { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--line-2); border-radius: 3px; overflow: hidden; }
.stepper-line em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--gold-2)); border-radius: 3px; animation: grow 1.2s var(--ease) .3s forwards; }
@keyframes grow { to { width: calc(var(--p) * 100%); } }
.kv { margin: 0 0 6px; display: flex; flex-direction: column; }
.kv > div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.kv dt { color: var(--muted); font-size: 13.5px; }
.kv dd { margin: 0; font-weight: 650; text-align: right; color: var(--ink); }
.kv dd small { font-weight: 500; color: var(--muted); display: block; }
.note-box { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--warn-soft); border: 1px solid #f1d9ad; }
.note-box b { font-size: 12.5px; color: #7d4f0a; }
.note-box p { margin-top: 3px; font-size: 13.5px; }
.checks { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.checks li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; }
.checks li i { width: 20px; height: 20px; border-radius: 50%; flex: none; background: var(--ok-soft); position: relative; }
.checks li i::after { content: ""; position: absolute; left: 6.5px; top: 3.5px; width: 5px; height: 9px; border: solid var(--ok); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checks li.warn i { background: var(--warn-soft); }
.checks li.warn i::after { left: 8.5px; top: 4px; width: 2px; height: 8px; border: 0; background: var(--warn); transform: none; border-radius: 1px; box-shadow: 0 10px 0 -1px var(--warn); }
.seal { display: flex; align-items: center; gap: 14px; padding: 16px; margin: 6px 0 16px; border-radius: 14px; background: linear-gradient(120deg, var(--ok-soft), #fff); border: 1px solid #bfe6d3; color: var(--ok); }
.seal .ic { animation: sealIn .8s var(--ease) both; }
@keyframes sealIn { from { opacity: 0; transform: scale(.4) rotate(-20deg); } }
.seal b { display: block; color: #12694a; }
.seal span { font-size: 13px; color: var(--muted); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 6px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline li { position: relative; display: flex; gap: 16px; padding: 8px 0 14px; }
.timeline li i { width: 12px; height: 12px; margin: 6px 0 0 0; border-radius: 50%; background: var(--blue); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--blue-soft); flex: none; position: relative; z-index: 1; left: 0; }
.tl-verify i { background: var(--ok); box-shadow: 0 0 0 2px var(--ok-soft); }
.tl-return i, .tl-unlock i { background: var(--bad); box-shadow: 0 0 0 2px var(--bad-soft); }
.tl-submit i { background: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }
.timeline b { display: block; font-size: 14px; color: var(--ink); }
.timeline span { font-size: 12.5px; color: var(--muted); }
.timeline p { margin-top: 5px; padding: 8px 12px; border-radius: 10px; background: #f6f9fc; font-size: 13.5px; }

/* ----------------------------------------------------------- toasts */
.toasts { position: fixed; z-index: 300; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: min(420px, calc(100vw - 32px)); padding: 13px 16px; border-radius: 14px; color: #fff; font-weight: 550; font-size: 14px; background: var(--navy); box-shadow: 0 14px 34px rgba(10, 24, 38, .35); animation: toastIn .45s var(--ease) both; }
.toast.ok { background: linear-gradient(135deg, #1f9f6c, #15704c); }
.toast.error { background: linear-gradient(135deg, #d44a4a, #a63030); }
.toast.out { animation: toastOut .3s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px) scale(.95); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px); } }

/* ----------------------------------------------------------- auth */
.auth-body { background: #fff; }
.auth-wrap { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.auth-art { position: relative; overflow: hidden; display: flex; align-items: center; padding: 56px; color: #fff; background: linear-gradient(150deg, #14283c 0%, #1e4166 55%, #2f6190 100%); }
.orb { position: absolute; border-radius: 50%; filter: blur(2px); animation: float 14s ease-in-out infinite; }
.orb.o1 { width: 420px; height: 420px; right: -120px; top: -100px; background: radial-gradient(circle at 30% 30%, rgba(214,171,114,.55), transparent 65%); }
.orb.o2 { width: 360px; height: 360px; left: -140px; bottom: -120px; background: radial-gradient(circle at 60% 40%, rgba(91,143,191,.55), transparent 65%); animation-delay: -5s; }
.orb.o3 { width: 150px; height: 150px; right: 18%; bottom: 14%; border: 22px solid rgba(255,255,255,.07); animation-delay: -9s; }
@keyframes float { 50% { transform: translate(24px, -30px) scale(1.06); } }
.auth-art-in { position: relative; z-index: 1; max-width: 480px; animation: pageIn .9s var(--ease) both; }
.logo-tile { width: 128px; padding: 10px; background: #fff; border-radius: 24px; box-shadow: 0 20px 50px rgba(0,0,0,.3); margin-bottom: 30px; }
.logo-tile img { display: block; width: 100%; }
.auth-art h2 { color: #fff; font-size: 34px; line-height: 1.2; font-weight: 760; }
.auth-art p { margin-top: 14px; color: #c9d9ea; font-size: 15.5px; }
.art-points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.art-points li { display: flex; align-items: center; gap: 12px; color: #e3edf7; font-weight: 550; opacity: 0; animation: pageIn .7s var(--ease) both; }
.art-points li:nth-child(1) { animation-delay: .35s; } .art-points li:nth-child(2) { animation-delay: .5s; } .art-points li:nth-child(3) { animation-delay: .65s; }
.art-points i { width: 10px; height: 10px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 0 5px rgba(214,171,114,.2); }
.auth-form-side { display: grid; place-items: center; align-content: center; padding: 32px 22px; background: var(--bg); }
.auth-card { width: min(420px, 100%); background: #fff; padding: 34px 32px 28px; border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow-2); animation: pageIn .8s var(--ease) .1s both; }
.auth-logo-sm { width: 70px; margin-bottom: 14px; }
.auth-card h1 { font-size: 26px; font-weight: 760; }
.auth-card > .muted { margin: 4px 0 22px; }
.auth-card .btn-block { height: 48px; margin: 4px 0 14px; font-size: 15px; }

/* install */
.install-body { background: var(--bg); }
.install-wrap { min-height: 100vh; display: grid; place-items: start center; padding: 40px 18px; }
.setup-card { width: min(760px, 100%); background: #fff; border-radius: 22px; padding: 30px; border: 1px solid var(--line); box-shadow: var(--shadow-2); animation: pageIn .6s var(--ease) both; }
.install-head { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.install-head img { width: 64px; }
.install-head h1 { font-size: 24px; }
.install-form h3 { margin: 22px 0 6px; font-size: 15px; color: var(--navy); }
.install-form .btn { margin-top: 8px; width: 100%; height: 48px; }
.check-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.check-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.check-list i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; }
.check-list .ok i { background: var(--ok-soft); color: var(--ok); }
.check-list .bad i { background: var(--bad-soft); color: var(--bad); }
.steps-list { padding-left: 20px; display: grid; gap: 8px; margin: 14px 0 20px; }

/* ----------------------------------------------------------- laporan: toolbar + preview */
.rbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rb-txt h3 { font-size: 17px; }
.rb-txt p { color: var(--muted); font-size: 13px; margin-top: 3px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rb-act { display: flex; gap: 10px; }
.rwrap { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 6px 0 10px; --rs: 1; }
.rslot { width: calc(var(--pw) * var(--rs) * 1px); height: calc(var(--ph) * var(--rs) * 1px); position: relative; flex: none; border-radius: 4px; box-shadow: 0 10px 34px rgba(20, 40, 60, .16), 0 0 0 1px rgba(20, 40, 60, .06); transition: transform .4s var(--ease), box-shadow .3s; background: #fff; }
.rslot[data-o="p"] { --pw: 794; --ph: 1123; }
.rslot[data-o="l"] { --pw: 1123; --ph: 794; }
.rslot:hover { box-shadow: 0 16px 44px rgba(20, 40, 60, .22), 0 0 0 1px rgba(20, 40, 60, .08); }
.rpage { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--rs)); overflow: hidden; background: #fff; color: #1c2b3a; font-family: var(--font); font-size: 11px; line-height: 1.4; }
.rpage.portrait { width: 794px; height: 1123px; }
.rpage.landscape { width: 1123px; height: 794px; }
.js .rslot { opacity: 0; transform: translateY(20px); }
.js .rslot.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rcontent { padding: 30px 38px 52px; height: 100%; }
.rf { position: absolute; left: 38px; right: 38px; bottom: 16px; display: flex; justify-content: space-between; gap: 10px; padding-top: 7px; border-top: 1px solid #d5dde6; font-size: 8.5px; color: #7a8a9c; }
.wm { position: absolute; inset: 0; display: grid; place-items: center; font-size: 74px; font-weight: 800; letter-spacing: .06em; color: rgba(184, 138, 88, .11); transform: rotate(-30deg); pointer-events: none; z-index: 5; white-space: nowrap; }
.rpage.landscape .wm { font-size: 80px; }
.rh { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 2.5px solid var(--navy); position: relative; }
.rh::after { content: ""; position: absolute; left: 0; bottom: -2.5px; width: 110px; height: 2.5px; background: var(--gold); }
.rh img { height: 42px; width: auto; }
.rh.mini img { height: 30px; }
.rh-t { flex: 1; min-width: 0; }
.rh-t b { display: block; font-size: 14px; color: var(--navy); letter-spacing: .02em; }
.rh.mini .rh-t b { font-size: 11.5px; }
.rh-t span { font-size: 10px; color: #6a7b8e; }
.rh-p { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.rh-p small { font-size: 8px; letter-spacing: .14em; color: var(--gold); font-weight: 700; }
.rh-p b { font-size: 14px; color: var(--navy); }
.rh.mini .rh-p b { font-size: 11.5px; }
.rst { font-style: normal; font-size: 8.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.rst.st-draft { background: #eceff3; color: #546477; } .rst.st-submitted { background: #fdf0dc; color: #9a6209; }
.rst.st-verified { background: #e3f5ec; color: #14774f; } .rst.st-returned { background: #fbe8e8; color: #b13434; }
.kpi-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 14px; }
.rk { padding: 9px 10px; border-radius: 9px; background: #eef4fa; border-left: 3px solid var(--blue); display: flex; flex-direction: column; gap: 1px; }
.rk.gold { background: #faf1e6; border-left-color: var(--gold); }
.rk span { font-size: 8px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: #6a7b8e; }
.rk b { font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.rk small { font-size: 8px; color: #6a7b8e; }
.rsec { display: flex; align-items: center; gap: 8px; margin: 12px 0 7px; font-size: 12.5px; color: var(--navy); }
.rsec i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--blue), var(--navy)); }
.rsec small { font-weight: 500; color: #7a8a9c; font-size: 9.5px; }
.rt { width: 100%; border-collapse: collapse; font-size: 9.5px; }
.rt th { text-align: left; padding: 5px 7px; background: var(--navy); color: #fff; font-size: 8.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .03em; }
.rt th.r, .rt td.r { text-align: right; }
.rt td { padding: 4px 7px; border-bottom: 1px solid #e6ecf2; font-variant-numeric: tabular-nums; }
.rt tbody tr:nth-child(even) td { background: #f7fafc; }
.rt tfoot td { padding: 5px 7px; font-weight: 700; background: #e1ebf5; color: var(--navy); }
.rt tr.sub td { background: #eef3f8 !important; font-weight: 600; }
.rt td.note { color: #6a7b8e; font-size: 8.5px; }
.rt.sm { font-size: 9px; }
.rt td.pbar { white-space: nowrap; }
.mbar { display: inline-block; width: 38px; height: 5px; border-radius: 3px; background: #e3eaf1; margin-right: 6px; vertical-align: middle; overflow: hidden; }
.mbar i { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.mbar.gold i { background: var(--gold); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.two.pan { grid-template-columns: 1.15fr 1fr; }
.cap { margin: 8px 0 3px; font-size: 9.5px; font-weight: 700; color: #6a7b8e; text-transform: uppercase; letter-spacing: .06em; }
.cbox { position: relative; width: 100%; margin-top: 6px; }
.cbox.h150 { height: 150px; } .cbox.h170 { height: 190px; } .cbox.h200x { height: 200px; } .cbox.h190 { height: 190px; } .cbox.h200 { height: 200px; } .cbox.h230 { height: 230px; }
.note-s { margin-top: 5px; font-size: 8.5px; color: #7a8a9c; }
.stamp { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; border: 1.5px dashed #c9a67a; background: #fdf8f0; color: #8a6a3f; }
.stamp.ok { border: 1.5px solid #2aa876; background: #effaf4; color: #14774f; }
.stamp b { display: block; font-size: 13px; letter-spacing: .06em; }
.stamp span { font-size: 9.5px; }
.sign-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 18px; }
.sig { text-align: center; font-size: 9.5px; }
.sig > span { color: #6a7b8e; }
.sig-space { height: 66px; display: grid; place-items: center; }
.sig-space em { font-size: 8.5px; color: #14774f; border: 1px solid #2aa876; border-radius: 5px; padding: 2px 7px; transform: rotate(-6deg); }
.sig b { display: block; border-top: 1px solid #1c2b3a; padding-top: 4px; font-size: 10.5px; }
.sig small { color: #6a7b8e; font-size: 9px; }
.rnote { margin-top: 14px; padding: 9px 12px; background: #f6f9fc; border-left: 3px solid var(--gold); font-size: 9.5px; border-radius: 4px; }
.rinfo { margin-top: 16px; font-size: 9px; color: #7a8a9c; }
.rg { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 9px; }
.rg th, .rg td { border: 1px solid #dbe3eb; padding: 2px 1px; text-align: center; height: 21px; overflow: hidden; }
.rg th { background: var(--navy); color: #fff; font-weight: 650; font-size: 8px; line-height: 1.15; }
.rg th small { display: block; font-size: 6px; color: #b4c6d8; font-weight: 500; }
.rg th.d.wk { background: var(--gold); } .rg th.d.wk small { color: #fff; }
.rg th.lb { width: 110px; text-align: left; padding-left: 5px; }
.rg th.lb:nth-child(2) { width: 150px; }
.rg th.lb.n { width: 36px; text-align: center; padding-left: 1px; }
.rg th:not(.d):not(.lb) { width: 40px; }
.rg td.lb { text-align: left; padding-left: 5px; white-space: nowrap; text-overflow: ellipsis; }
.rg td.lb.n { text-align: center; padding-left: 1px; color: #6a7b8e; }
.rg td.lb.b { font-weight: 650; color: var(--ink); }
.rg td.lb small { color: #7a8a9c; font-size: 6.5px; }
.rg td.d.wk { background: #fcf6ec; }
.rg td.d.has { background: #e9f1fa; font-weight: 600; }
.rg td.d.has.wk { background: #f9ecd6; }
.rg td.t { background: #f1f5f9; font-weight: 700; font-variant-numeric: tabular-nums; }
.rg tr.grp td { border-top: 1.5px solid #9fb3c8; }
.rg tfoot td { background: #dfeaf5; font-weight: 700; color: var(--navy); border-top: 1.5px solid var(--navy); }
.rg tfoot td.t { background: #cfdeed; }
.rg tfoot tr.grand td { background: #d6e5f4; border-top: 1.5px solid var(--navy); }
.rg tfoot tr.minor td { background: #f3f7fb; font-weight: 600; color: #6a7b8e; border-top: 1px solid #dbe3eb; }
.rg tfoot td.lb { text-align: left; }

.pdf-overlay { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(10, 24, 38, .6); backdrop-filter: blur(5px); animation: fade .25s ease both; }
.pdf-box { width: min(360px, calc(100vw - 40px)); padding: 28px; border-radius: 20px; background: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 30px 80px rgba(10, 24, 38, .45); animation: modalIn .4s var(--ease) both; }
.pdf-box b { font-size: 16px; color: var(--ink); }
.pdf-box span { font-size: 13px; color: var(--muted); }
.spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--blue-soft); border-top-color: var(--blue); border-right-color: var(--gold-2); animation: spin .8s linear infinite; }
.pbar2 { width: 100%; height: 8px; border-radius: 5px; background: var(--line-2); overflow: hidden; }
.pbar2 i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--blue), var(--gold-2)); transition: width .4s var(--ease); }
body.capturing .rslot { transform: none !important; transition: none !important; opacity: 1 !important; }


/* ==========================================================================
   Temuan (findings)
   ========================================================================== */
.btn.disabled { opacity: .45; pointer-events: none; }
.fx-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(120deg, #fff 0%, var(--gold-soft) 100%); }
.fx-title h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.fx-title h3 .ic { color: var(--gold); }
.fx-title p { color: var(--muted); font-size: 13px; margin-top: 3px; }
.fx-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fx-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.fx-stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-1); border-top: 3px solid var(--blue-2); transition: transform .3s var(--ease), box-shadow .3s; }
.fx-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.fx-stat span { display: block; font-size: 11.5px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; min-height: 28px; }
.fx-stat b { font-size: 28px; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.fx-stat.st-o { border-top-color: #d6694f; } .fx-stat.st-p { border-top-color: var(--gold); } .fx-stat.st-c { border-top-color: var(--ok); }
.fx-stat.st-h { border-top-color: var(--bad); } .fx-stat.st-w { border-top-color: #8d6a3f; }
.fx-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; position: sticky; top: 76px; z-index: 20; }
.fx-search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--muted); transition: border-color .2s, box-shadow .2s; }
.fx-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47, 97, 144, .14); color: var(--blue); }
.fx-search input { flex: 1; border: 0; outline: 0; background: transparent; min-width: 0; color: var(--text); height: 100%; }
.fx-filter select { height: 42px; border: 1px solid var(--line); border-radius: 12px; padding: 0 10px; background: #fff; font-weight: 550; color: var(--text); max-width: 200px; cursor: pointer; }
.fx-filter select:focus { outline: 0; border-color: var(--blue); }
.fx-count { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.fx-count b { color: var(--ink); }
.fx-list { display: flex; flex-direction: column; gap: 12px; }
.fx-card { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 14px; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--blue-2); border-radius: 16px; box-shadow: var(--shadow-1); color: var(--text); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.fx-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-2); }
.fx-card.sev-low { border-left-color: var(--blue-2); } .fx-card.sev-medium { border-left-color: var(--gold-2); } .fx-card.sev-high { border-left-color: #e08a2b; } .fx-card.sev-critical { border-left-color: var(--bad); }
.fx-thumb { position: relative; flex: none; width: 104px; height: 78px; border-radius: 12px; overflow: hidden; background: var(--line-2); display: grid; place-items: center; color: #b3c0cf; }
.fx-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.fx-card:hover .fx-thumb img { transform: scale(1.08); }
.fx-thumb em { position: absolute; right: 5px; bottom: 5px; display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: rgba(10, 24, 38, .72); color: #fff; }
.fx-body { flex: 1; min-width: 0; }
.fx-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 5px; }
.fx-ref { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .03em; margin-right: 4px; font-variant-numeric: tabular-nums; }
.fx-body h4 { font-size: 15.5px; font-weight: 680; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fx-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 7px; font-size: 12.5px; color: var(--muted); }
.fx-meta span { display: inline-flex; align-items: center; gap: 5px; }
.fx-meta .ic { color: var(--blue-2); }
.fx-go { flex: none; color: #b3c0cf; transform: rotate(-90deg); transition: transform .3s var(--ease), color .3s; }
.fx-card:hover .fx-go { color: var(--blue); transform: rotate(-90deg) translateY(4px); }
.chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.chip.cat { background: var(--blue-soft); color: var(--navy); }
.chip.sev-low { background: var(--blue-soft); color: var(--blue); } .chip.sev-medium { background: var(--gold-soft); color: #8a5f2f; }
.chip.sev-high { background: #fdebd3; color: #b4640b; } .chip.sev-critical { background: var(--bad-soft); color: #b13434; }
.chip.fst-open { background: #fbe4dc; color: #b04a2c; } .chip.fst-progress { background: var(--warn-soft); color: #9a6209; } .chip.fst-closed { background: var(--ok-soft); color: #14774f; }
.chip.warnc { background: #f3e1c7; color: #7a4b0f; }

/* form */
.fx-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.fx-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.req { color: var(--bad); font-style: normal; }
.dt-row { display: flex; gap: 8px; align-items: center; }
.dt-row input { flex: 1; }
.hint { color: var(--muted); font-size: 12.5px; font-weight: 550; }
.hint.bad { color: var(--bad); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill input, .sr input { position: absolute; opacity: 0; pointer-events: none; }
.pill { position: relative; cursor: pointer; }
.pill span { display: inline-block; padding: 8px 15px; border-radius: 22px; border: 1.5px solid var(--line); font-weight: 620; font-size: 13.5px; color: var(--text); background: #fff; transition: all .25s var(--ease); }
.pill:hover span { border-color: var(--blue-2); transform: translateY(-1px); }
.pill input:checked + span { background: linear-gradient(135deg, var(--blue), var(--navy)); border-color: transparent; color: #fff; box-shadow: 0 6px 14px rgba(27, 58, 87, .25); }
.pill input:focus-visible + span { outline: 2.5px solid rgba(47, 97, 144, .55); outline-offset: 2px; }
.seg-radio { display: flex; gap: 6px; flex-wrap: wrap; }
.sr { position: relative; flex: 1 1 0; min-width: 78px; cursor: pointer; }
.sr span { display: block; text-align: center; padding: 10px 8px; border-radius: 12px; border: 1.5px solid var(--line); font-weight: 650; font-size: 13px; background: #fff; transition: all .25s var(--ease); }
.sr:hover span { transform: translateY(-1px); }
.sr.sev-low input:checked + span { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.sr.sev-medium input:checked + span { background: var(--gold-soft); border-color: var(--gold); color: #8a5f2f; }
.sr.sev-high input:checked + span { background: #fdebd3; border-color: #e08a2b; color: #b4640b; }
.sr.sev-critical input:checked + span { background: var(--bad-soft); border-color: var(--bad); color: #b13434; }
.sr.fst-open input:checked + span { background: #fbe4dc; border-color: #d6694f; color: #b04a2c; }
.sr.fst-progress input:checked + span { background: var(--warn-soft); border-color: var(--warn); color: #9a6209; }
.sr.fst-closed input:checked + span { background: var(--ok-soft); border-color: var(--ok); color: #14774f; }
.sr input:focus-visible + span { outline: 2.5px solid rgba(47, 97, 144, .55); outline-offset: 2px; }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 22px 14px; border: 2px dashed #c3d2e1; border-radius: 16px; background: #fafcfe; color: var(--muted); transition: all .25s var(--ease); }
.dropzone .ic { color: var(--blue-2); margin-bottom: 4px; }
.dropzone b { color: var(--ink); }
.dropzone.over { border-color: var(--blue); background: var(--blue-soft); transform: scale(1.01); }
.center-row { justify-content: center; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-top: 14px; }
.ph { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--line-2); animation: itemIn .35s var(--ease) both; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph.busy img { filter: blur(3px) brightness(.8); }
.ph.err { outline: 2px solid var(--bad); }
.ph-sz { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px; font-size: 10.5px; font-weight: 650; color: #fff; text-align: center; background: linear-gradient(0deg, rgba(10, 24, 38, .75), transparent); }
.ph-x { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(10, 24, 38, .7); color: #fff; display: grid; place-items: center; transition: transform .2s, background .2s; }
.ph-x:hover { background: var(--bad); transform: scale(1.1); }
.fx-submit { position: sticky; bottom: 0; z-index: 25; display: flex; justify-content: flex-end; gap: 10px; padding: 12px 0 4px; margin-top: 6px; background: linear-gradient(0deg, var(--bg) 70%, transparent); }
.fx-submit .btn { min-width: 150px; }

/* detail */
.fx-back { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-back-act { display: flex; gap: 8px; }
.rot { display: inline-flex; transform: rotate(90deg); }
.fx-detail { border-left: 6px solid var(--blue-2); }
.fx-detail.sev-medium { border-left-color: var(--gold-2); } .fx-detail.sev-high { border-left-color: #e08a2b; } .fx-detail.sev-critical { border-left-color: var(--bad); }
.fx-detail h2 { font-size: 24px; margin: 8px 0 16px; font-weight: 740; }
.fx-info { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 24px; }
@media (max-width: 720px) { .fx-info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; } }
.fx-info dt { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.fx-info dd { margin: 2px 0 0; font-weight: 640; color: var(--ink); }
.fx-info dd small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
.fx-text { line-height: 1.7; font-size: 14.5px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.g-item { padding: 0; border: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--line-2); cursor: zoom-in; box-shadow: var(--shadow-1); transition: transform .3s var(--ease), box-shadow .3s; }
.g-item:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-2); }
.g-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox { position: fixed; inset: 0; z-index: 350; display: flex; align-items: center; justify-content: center; background: rgba(8, 18, 29, .94); animation: fade .25s ease both; touch-action: pan-y; }
.lightbox.out { animation: fadeOut .22s ease forwards; }
.lb-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; color: #fff; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,.5), transparent); }
.lb-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-ref { flex: 1; color: #b9c8d8; font-size: 12.5px; font-weight: 600; }
.lb-bar .icon-btn { color: #fff; } .lb-bar .icon-btn:hover { background: rgba(255,255,255,.15); }
.lb-stage { flex: 1; height: 100%; display: grid; place-items: center; padding: 64px 12px 24px; min-width: 0; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; opacity: 0; transform: scale(.97); transition: opacity .35s ease, transform .4s var(--ease); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lb-stage img.in { opacity: 1; transform: none; }
.lb-nav { flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; transition: background .2s, transform .2s; margin: 0 8px; z-index: 2; }
.lb-nav:hover { background: rgba(255,255,255,.25); } .lb-nav:active { transform: scale(.9); }
.yr-meta { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.yr-dl { margin-left: auto; }
.sec-h .yr-dl { font-weight: 620; }

@media (max-width: 1100px) { .fx-grid { grid-template-columns: minmax(0, 1fr); } .fx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .fx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fx-stat b { font-size: 24px; } .fx-stat span { min-height: 0; }
  .fx-filter { position: static; }
  .fx-filter select { flex: 1 1 45%; max-width: none; }
  .fx-count { margin-left: 0; width: 100%; }
  .fx-card { align-items: flex-start; padding: 12px; gap: 12px; }
  .fx-thumb { width: 82px; height: 82px; }
  .fx-go { display: none; }
  .fx-body h4 { font-size: 14.5px; }
  .fx-detail h2 { font-size: 20px; }
  .fx-head { align-items: stretch; } .fx-actions { width: 100%; } .fx-actions .btn { flex: 1; }
  .fx-submit { bottom: calc(66px + env(safe-area-inset-bottom)); }
  .fx-submit .btn { flex: 1; }
  .lb-nav { position: absolute; bottom: 20px; margin: 0; } .lb-nav.prev { left: 16px; } .lb-nav.next { right: 16px; }
  .lb-stage { padding: 64px 4px 84px; }
  .yr-dl { display: none; }
}
@media print { .fx-stats, .fx-filter { display: none; } }

/* ----------------------------------------------------------- PWA: pasang aplikasi + menu bawah */
.install-card { width: min(420px, 100%); margin: 16px auto 0; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, #fff, var(--gold-soft)); border: 1px solid #ecd9bd; box-shadow: var(--shadow-1); animation: pageIn .8s var(--ease) .3s both; }
.install-card img { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); flex: none; }
.install-card div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.install-card b { font-size: 14px; } .install-card span { font-size: 12px; color: var(--muted); }
.install-card .btn { flex: none; }
@media (max-width: 420px) { .install-card { flex-wrap: wrap; } .install-card .btn { width: 100%; } }
.is-pwa [data-install], .is-pwa .install-card { display: none !important; }
.tabbar { display: none; }

.pwa-back { position: fixed; inset: 0; z-index: 400; display: grid; place-items: end center; background: rgba(10, 24, 38, .55); backdrop-filter: blur(4px); animation: fade .25s ease both; }
.pwa-back.out { opacity: 0; transition: opacity .2s; }
.pwa-sheet { width: min(480px, 100%); max-height: 92vh; overflow: auto; background: #fff; border-radius: 22px 22px 0 0; padding: 10px 22px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px rgba(10,24,38,.3); animation: sheetUp .45s var(--ease) both; color: var(--text); }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.pwa-grip { width: 42px; height: 4px; border-radius: 4px; background: var(--line); margin: 0 auto 14px; }
.pwa-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.pwa-head img { width: 56px; height: 56px; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.pwa-head b { display: block; font-size: 16px; } .pwa-head span { font-size: 12.5px; color: var(--muted); }
.pwa-sheet h4 { margin: 4px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); }
.pwa-sheet ol { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 9px; }
.pwa-sheet li { counter-increment: s; position: relative; padding: 10px 12px 10px 46px; background: var(--bg); border-radius: 12px; font-size: 14px; line-height: 1.45; }
.pwa-sheet li::before { content: counter(s); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--blue), var(--navy)); }
.pwa-note { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; line-height: 1.5; }
.pwa-warn { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); color: #7a4b0f; font-size: 13px; line-height: 1.45; }
@media (min-width: 640px) { .pwa-back { place-items: center; } .pwa-sheet { border-radius: 22px; padding-bottom: 22px; } .pwa-grip { display: none; } }

@media (max-width: 1024px) {
  .tabbar { position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -8px 30px rgba(20,40,60,.09); }
  .tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 4px; border: 0; background: none; font: inherit; color: var(--muted); text-decoration: none; cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent; transition: color .25s, transform .2s var(--ease); }
  .tab:hover { text-decoration: none; }
  .tab:active { transform: scale(.93); }
  .tab-ic { position: relative; display: grid; place-items: center; width: 44px; height: 28px; border-radius: 14px; transition: background .3s var(--ease), color .3s; }
  .tab-l { font-size: 10.5px; font-weight: 650; letter-spacing: .01em; }
  .tab.active { color: var(--navy); }
  .tab.active .tab-ic { background: var(--blue-soft); color: var(--blue); }
  .tab em { position: absolute; top: -4px; right: 2px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: #fff; font-style: normal; font-size: 10px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
  .tab-fab .tab-ic { width: 52px; height: 52px; margin-top: -24px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--gold-2), var(--gold)); box-shadow: 0 8px 20px rgba(184,138,88,.5), 0 0 0 5px rgba(255,255,255,.94); }
  .tab-fab.active .tab-ic { background: linear-gradient(135deg, var(--blue), var(--navy)); color: #fff; box-shadow: 0 8px 20px rgba(27,58,87,.4), 0 0 0 5px rgba(255,255,255,.94); }
  .tab-fab .tab-l { margin-top: -1px; }
  body.menu-open .tabbar { opacity: 0; pointer-events: none; }
  .is-pwa .topbar { padding-top: calc(10px + env(safe-area-inset-top)); }
}
@media print { .tabbar, .pwa-back { display: none !important; } }

/* ----------------------------------------------------------- laporan: temuan */
.fxr-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0 4px; }
.fxr-strip .fs { border-radius: 8px; padding: 6px 8px; background: #eef4fa; display: flex; flex-direction: column; }
.fxr-strip .fs b { font-size: 15px; line-height: 1.1; color: var(--navy); }
.fxr-strip .fs span { font-size: 8px; font-weight: 650; color: #6a7b8e; }
.fxr-strip .fs-open { background: #fbe4dc; } .fxr-strip .fs-open b { color: #b04a2c; }
.fxr-strip .fs-progress { background: #fdf0dc; } .fxr-strip .fs-progress b { color: #9a6209; }
.fxr-strip .fs-closed { background: #e3f5ec; } .fxr-strip .fs-closed b { color: #14774f; }
.rt.fxl { table-layout: fixed; font-size: 8.5px; }
.rt.fxl td { vertical-align: top; line-height: 1.35; word-wrap: break-word; overflow-wrap: anywhere; }
.rt.fxl td small { color: #7a8a9c; font-size: 7.5px; }
.rt.fxl td.ref { font-weight: 700; color: var(--blue); }
.rfsv, .rfst { display: inline-block; padding: 1px 6px; border-radius: 10px; font-size: 7.5px; font-weight: 700; white-space: nowrap; }
.rfsv.sv-low { background: #e8f0f8; color: #2f6190; } .rfsv.sv-medium { background: #f8eddc; color: #8a5f2f; }
.rfsv.sv-high { background: #fdebd3; color: #b4640b; } .rfsv.sv-critical { background: #fbe0e0; color: #b13434; }
.rfst.st-open { background: #fbe4dc; color: #b04a2c; } .rfst.st-progress { background: #fdf0dc; color: #9a6209; } .rfst.st-closed { background: #e3f5ec; color: #14774f; }
.fxe { margin-bottom: 12px; break-inside: avoid; }
.fxe-h { display: flex; align-items: baseline; gap: 8px; padding: 5px 8px; background: #eef4fa; border-left: 3px solid var(--gold); border-radius: 4px; font-size: 9.5px; }
.fxe-h b { color: var(--navy); } .fxe-h span { font-weight: 650; flex: 1; } .fxe-h em { font-style: normal; color: #6a7b8e; font-size: 8.5px; }
.fxe-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.fxe-p { position: relative; height: 150px; border-radius: 6px; background: #f2f5f8 center / contain no-repeat; border: 1px solid #e1e8ef; }
.fxe-p i { position: absolute; left: 5px; top: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: rgba(27,58,87,.85); color: #fff; font-style: normal; font-size: 8.5px; font-weight: 700; display: grid; place-items: center; }

/* ----------------------------------------------------------- dashboard temuan */
.fx-status-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.fx-status-strip .fs { border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--blue-soft); }
.fx-status-strip .fs b { font-size: 22px; line-height: 1.1; color: var(--navy); font-variant-numeric: tabular-nums; }
.fx-status-strip .fs span { font-size: 11.5px; font-weight: 650; color: var(--muted); }
.fx-status-strip .fs-open { background: #fbe4dc; } .fx-status-strip .fs-open b { color: #b04a2c; }
.fx-status-strip .fs-progress { background: var(--warn-soft); } .fx-status-strip .fs-progress b { color: #9a6209; }
.fx-status-strip .fs-closed { background: var(--ok-soft); } .fx-status-strip .fs-closed b { color: #14774f; }
.fx-list-mini { gap: 10px; }

/* ----------------------------------------------------------- responsif */
@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rings-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .cols-2, .cols-2.narrow { grid-template-columns: minmax(0, 1fr); }
  .sign-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform .4s var(--ease); box-shadow: none; }
  body.menu-open .sidebar { transform: none; box-shadow: 20px 0 60px rgba(10, 24, 38, .4); }
  body.menu-open .scrim { opacity: 1; pointer-events: auto; }
  body.menu-open { overflow: hidden; }
  .menu-btn { display: inline-grid; }
  .topbar { padding: 10px 16px; }
  .content { padding: 18px 16px 30px; gap: 18px; }
  .nav-item.active::before { left: -14px; }
  .sec-nav { top: 66px; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .auth-form-side { background: linear-gradient(180deg, #1b3a57 0, #1b3a57 220px, var(--bg) 220px); align-items: start; padding-top: 48px; }
}
@media (max-width: 720px) {
  body { font-size: 14px; }
  .top-title h1 { font-size: 17px; }
  .top-title p { display: none; }
  .status-link { display: none; }
  .period-pick { height: 38px; padding: 0 9px; }
  .period-pick select { max-width: 118px; font-size: 13px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kpi { padding: 15px; }
  .kpi-v { font-size: 24px; }
  .kpi-txt { font-size: 21px; }
  .kpi-ring { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ring { width: 72px; height: 72px; }
  .ring .num { font-size: 15px; }
  .rings-row { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 16px; border-radius: 14px; }
  .dash-hero { padding: 20px; border-radius: 16px; }
  .dash-hero h2 { font-size: 24px; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .hero-actions .btn-primary { flex-basis: 100%; }
  .sr { min-width: 66px; }
  .sec-h { font-size: 16px; }
  .chart-box.h420 { height: 360px; }
  .grid2 { grid-template-columns: 1fr; }
  .toolbar { padding: 12px; gap: 12px; }
  .tb-stats { gap: 16px; order: 3; width: 100%; flex: none; }
  .tb-right { margin-left: 0; width: 100%; justify-content: space-between; order: 2; }
  .seg { width: 100%; } .seg-btn { flex: 1; justify-content: center; padding: 0 8px; }
  .grid-scroll { max-height: calc(100dvh - 250px); }
  .grid-hint { display: none; }
  .grid.kind-meals { --w1: 92px; --w2: 124px; }
  .grid.kind-laundry { --w1: 34px; --w2: 92px; --w3: 52px; }
  .grid.kind-pantry { --w1: 34px; --w2: 150px; --w3: 48px; }
  .grid .s { padding: 0 6px; font-size: 12px; }
  .seg-btn { padding: 0 6px; gap: 5px; font-size: 13px; }
  .stepper { flex-direction: column; padding-bottom: 20px; }
  .stepper li { opacity: 1; }
  .new-period { align-items: stretch; }
  .np-form { width: 100%; }
  .np-form .field.inline { flex: 1; min-width: 120px; }
  .np-form .btn { width: 100%; }
  .toasts { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
  .toast { max-width: none; }
  .modal-back { padding: 0; align-items: end; }
  .modal { border-radius: 20px 20px 0 0; max-height: 92dvh; width: 100%; }
  .rb-act { width: 100%; } .rb-act .btn { flex: 1; }
  .setup-card { padding: 20px; }
  .foot { padding: 14px 16px 20px; }
}
@media (max-width: 420px) {
  .kpi-grid { gap: 10px; }
  .kpi-v { font-size: 21px; }
  .kpi-l { font-size: 12px; }
  .day-item input.cell { width: 84px; }
}

/* ----------------------------------------------------------- gerak dikurangi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js .reveal, .js .rslot { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- cetak */
@page { margin: 0; }
@page portrait { size: A4 portrait; margin: 0; }
@page landscape { size: A4 landscape; margin: 0; }
@media print {
  html, body { background: #fff !important; }
  .progress-bar, .sidebar, .scrim, .topbar, .foot, .toasts, .rbar, .pdf-overlay, .alert { display: none !important; }
  .shell, .main, .content { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; animation: none !important; }
  .rwrap { display: block; padding: 0; gap: 0; --rs: 1 !important; }
  .rslot { --rs: 1 !important; width: auto !important; height: auto !important; box-shadow: none !important; border-radius: 0; opacity: 1 !important; transform: none !important; break-after: page; page-break-after: always; }
  .rslot:last-child { break-after: auto; page-break-after: auto; }
  .rpage { position: relative !important; transform: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; }
  .rpage.portrait { page: portrait; }
  .rpage.landscape { page: landscape; }
}

/* PWA: ruang untuk menu bawah (harus di akhir agar menimpa aturan responsif lain) */
@media (max-width: 1024px) {
  .content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .foot { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .toasts { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* ---------- Target Laundry */
.tl { display: grid; gap: 22px; padding-bottom: 90px; }
.tl-formula { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tl-formula > i { align-self: center; font-style: normal; font-size: 22px; color: var(--muted); font-weight: 600; }
.tf-box { min-width: 120px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; display: grid; gap: 1px; }
.tf-box small { color: var(--muted); font-size: 12px; }
.tf-box b { font-size: 24px; color: var(--navy); font-variant-numeric: tabular-nums; }
.tf-box span { font-size: 12px; color: var(--muted); }
.tf-box.res { background: linear-gradient(135deg, var(--navy), var(--blue)); border-color: transparent; }
.tf-box.res small, .tf-box.res span { color: rgba(255, 255, 255, .78); }
.tf-box.res b { color: #fff; }
.tl-mode { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tl-wrap { overflow-x: auto; }
.tl-table td, .tl-table th { vertical-align: middle; }
.tl-in { width: 120px; height: 38px; text-align: right; padding: 0 11px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font-variant-numeric: tabular-nums; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.tl-in:hover:not(:disabled) { border-color: #c9d6e3; }
.tl-in:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47, 97, 144, .14); }
.tl-in:disabled { background: var(--line-2); color: var(--muted); }
.tl-in.bad { border-color: var(--bad); background: var(--bad-soft); }
.tl-table tr.dirty .tl-in { border-color: var(--gold); background: #fffaf2; }
.tl-pc { min-width: 150px; display: flex; align-items: center; gap: 10px; }
.tl-pc .pbar2 { flex: 1; }
.tl-pc b { min-width: 52px; text-align: right; font-size: 13px; }
.pbar2 i.ok { background: linear-gradient(90deg, var(--ok), #3cc08c); }
.pbar2 i.low { background: linear-gradient(90deg, var(--warn), #e8a94e); }
.tl-savebar { position: sticky; bottom: 78px; z-index: 30; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 16px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 40px rgba(27, 58, 87, .18); animation: tlUp .35s var(--ease); }
.tl-savebar[hidden] { display: none; }
.tl-savebar span { margin-right: auto; font-size: 13.5px; }
@keyframes tlUp { from { transform: translateY(20px); opacity: 0; } }
@media (min-width: 1025px) { .tl-savebar { bottom: 16px; } }
@media (max-width: 720px) { .tl-mode { grid-template-columns: 1fr; } .tl-in { width: 96px; } .tl-savebar { flex-wrap: wrap; } }

/* ---------- Notifikasi (lonceng) */
.bell-wrap { position: relative; }
.bell { position: relative; }
.bell-dot { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: #fff; font: 700 10.5px/17px Inter, sans-serif; text-align: center; font-style: normal; box-shadow: 0 0 0 2px #fff; }
.bell-dot[hidden] { display: none; }
.bell.ring svg { transform-origin: 50% 0; animation: bellRing .9s ease; }
@keyframes bellRing { 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
.bell-pop { position: absolute; right: 0; top: calc(100% + 10px); width: min(380px, calc(100vw - 24px)); background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(27, 58, 87, .22); z-index: 120; overflow: hidden; transform-origin: top right; animation: popIn .22s var(--ease); }
.bell-pop[hidden] { display: none; }
@keyframes popIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.bp-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.bp-all { background: none; border: 0; color: var(--blue); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.bp-list { max-height: 420px; overflow-y: auto; }
.bp-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13.5px; }
.bp-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); color: inherit; text-decoration: none; transition: background .15s; }
.bp-item:hover { background: var(--line-2); }
.bp-item.unread { background: #f4f8fd; }
.bp-item i { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.bp-item.t-verify i { background: var(--ok-soft); color: var(--ok); }
.bp-item.t-return i, .bp-item.t-unlock i, .bp-item.t-withdraw i { background: var(--warn-soft); color: var(--warn); }
.bp-item.t-finding i, .bp-item.t-changed i { background: var(--bad-soft); color: var(--bad); }
.bp-item span { display: grid; gap: 2px; min-width: 0; }
.bp-item b { font-size: 13.5px; font-weight: 650; line-height: 1.3; }
.bp-item small { color: var(--muted); font-size: 12.5px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bp-item em { font-style: normal; font-size: 11.5px; color: #8a9bb0; }
@media (max-width: 720px) { .bell-pop { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; } }

/* ---------- Ringkasan temuan di Verifikasi / Laporan */
.fsum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.fsum > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; display: grid; gap: 2px; }
.fsum b { font-size: 22px; color: var(--navy); font-variant-numeric: tabular-nums; }
.fsum small { color: var(--muted); font-size: 12px; }
.fsum .warn { background: var(--warn-soft); border-color: #f0d6a8; } .fsum .warn b { color: var(--warn); }
.fsum .bad { background: var(--bad-soft); border-color: #f1c6c6; } .fsum .bad b { color: var(--bad); }
.fsum .good b { color: var(--ok); }
.fchg { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bad-soft); border: 1px solid #f1c6c6; font-size: 13.5px; }
.fchg b { color: var(--bad); display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.fchg ul { margin: 6px 0 0 18px; padding: 0; } .fchg li { margin: 2px 0; }
.fopen-list { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; }
.fopen-list a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; font-size: 13.5px; transition: border-color .2s, transform .2s; }
.fopen-list a:hover { border-color: var(--blue); transform: translateX(3px); }
@media (max-width: 720px) { .fsum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Grafik 3D interaktif (jnp3d) */
.j3d-box { position: relative; }
.j3d-cv, .j3d-ring-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; outline: none; }
.j3d-cv.grab, .j3d-ring-cv.grab { cursor: grabbing; }
.j3d-ui { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.j3d-ui > * { pointer-events: auto; }
.j3d-lab { position: absolute; left: 0; top: 0; pointer-events: none !important; white-space: nowrap; font-size: 10.5px; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; will-change: transform; transition: opacity .25s; }
.j3d-lab.cat { color: #44566a; font-weight: 560; padding-top: 3px; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.j3d-lab.tick { color: #8697aa; font-size: 10px; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.j3d-lab.val { color: var(--navy); font-weight: 700; font-size: 11px; padding: 0 2px 3px; }
.j3d-hint { position: absolute; right: 42px; top: 12px; font-size: 11px; color: #8697aa; pointer-events: none !important; transition: opacity .6s; animation: j3dHint 6s ease forwards; }
.j3d-hint.gone { opacity: 0 !important; animation: none; }
@keyframes j3dHint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.j3d-reset { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line); background: rgba(255, 255, 255, .9); color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .2s, color .2s, transform .2s; }
.j3d-box:hover .j3d-reset, .j3d-reset:focus-visible { opacity: 1; }
.j3d-reset:hover { color: var(--blue); transform: rotate(-40deg); }
.j3d-tip, .j3d-detail { position: absolute; left: 0; top: 0; z-index: 5; display: grid; gap: 3px; padding: 9px 12px; border-radius: 12px; background: rgba(20, 40, 60, .94); color: #fff; font-size: 12px; box-shadow: 0 12px 30px rgba(10, 25, 45, .35); pointer-events: none !important; max-width: 240px; backdrop-filter: blur(6px); }
.j3d-tip[hidden], .j3d-detail[hidden] { display: none; }
.j3d-tip b, .j3d-detail b { font-size: 12.5px; }
.j3d-tip small, .j3d-detail small { color: #aebfd1; }
.j3d-tip span, .j3d-detail span { display: flex; align-items: center; gap: 6px; }
.j3d-tip i, .j3d-detail i, .j3d-legend i { width: 9px; height: 9px; border-radius: 3px; flex: none; display: inline-block; }
.j3d-tip em, .j3d-detail em { font-style: normal; color: #d6ab72; font-size: 11.5px; }
.j3d-detail { left: auto; right: 8px; top: 8px; transform: none !important; pointer-events: auto !important; animation: j3dIn .25s var(--ease); padding-right: 30px; }
.j3d-detail button { position: absolute; right: 6px; top: 4px; border: 0; background: none; color: #aebfd1; font-size: 18px; line-height: 1; cursor: pointer; }
@keyframes j3dIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.j3d-legend.inline { position: absolute; left: 8px; top: 4px; display: flex; gap: 12px; font-size: 11.5px; color: #44566a; pointer-events: none !important; }
.j3d-legend.inline span { display: inline-flex; align-items: center; gap: 5px; }
.j3d-legend.list { position: absolute; display: grid; gap: 2px; align-content: center; overflow: auto; max-height: 100%; }
.j3d-legend.list:not(.side) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
.j3d-legend.list button { display: flex; align-items: center; gap: 7px; padding: 4px 7px; border: 0; border-radius: 8px; background: none; font-size: 12px; color: #33465a; cursor: pointer; text-align: left; transition: background .15s, opacity .2s, transform .2s; }
.j3d-legend.list button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j3d-legend.list button b { font-variant-numeric: tabular-nums; color: var(--navy); font-weight: 650; }
.j3d-legend.list button:hover, .j3d-legend.list button.hov { background: var(--blue-soft); transform: translateX(2px); }
.j3d-legend.list button.on { background: var(--blue-soft); box-shadow: inset 0 0 0 1.5px var(--blue); }
.j3d-legend.list button.dim { opacity: .5; }
.j3d-center { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 1px; pointer-events: none !important; text-align: center; will-change: transform; font-size: 14px; }
.j3d-center b { font-size: 1.7em; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.05; }
.j3d-center span { font-size: .8em; color: var(--muted); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j3d-center em { font-style: normal; font-size: .82em; color: var(--gold); font-weight: 700; }
.j3d-pop { position: fixed; z-index: 300; display: grid; gap: 3px; padding: 11px 14px; border-radius: 14px; background: rgba(20, 40, 60, .96); color: #fff; font-size: 12.5px; box-shadow: 0 16px 40px rgba(10, 25, 45, .4); opacity: 0; transform: translateY(6px) scale(.96); pointer-events: none; transition: opacity .2s, transform .25s var(--ease); max-width: 260px; }
.j3d-pop.on { opacity: 1; transform: none; }
.j3d-pop b { font-size: 13px; } .j3d-pop span { color: #c9d6e3; } .j3d-pop em { font-style: normal; color: #d6ab72; }
.ring.j3d-ringbox { overflow: visible; }
.ring .j3d-ring-cv { cursor: grab; }
.chart-box.j3d-box canvas.j3d-cv { height: 100% !important; width: 100% !important; }
.ring .num { pointer-events: none; }

/* =====================================================================
   MOTION & 3D UI  — aktif pada Efek Penuh/Ringan; dimatikan pada Mati
   ===================================================================== */
html:not([data-fx=off]) body { background-image: radial-gradient(60% 50% at 8% 0%, rgba(91, 143, 191, .10), transparent 70%), radial-gradient(50% 45% at 100% 12%, rgba(214, 171, 114, .12), transparent 70%); background-attachment: fixed; }

/* kartu: kedalaman berlapis */
html:not([data-fx=off]) .card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 2px rgba(20, 40, 60, .05), 0 14px 28px -14px rgba(20, 40, 60, .16); }
html:not([data-fx=off]) .card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 4px rgba(20, 40, 60, .06), 0 22px 38px -16px rgba(20, 40, 60, .24); }

/* masuk dengan perspektif 3D */
html:not([data-fx=off]) .js .reveal { opacity: 0; transform: perspective(1100px) translate3d(0, 30px, -50px) rotateX(9deg) scale(.97); transform-origin: 50% 100%; }
html:not([data-fx=off]) .js .reveal.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform 1s cubic-bezier(.2, .9, .25, 1.12); transition-delay: calc(var(--i, 0) * 80ms); }
html:not([data-fx=off]) .js .rslot { transform-origin: 50% 0; }
html:not([data-fx=off]) .content { animation: pageIn3d .75s var(--ease) both; }
@keyframes pageIn3d { from { opacity: 0; transform: perspective(1200px) translateY(18px) rotateX(3deg); } to { opacity: 1; transform: none; } }
html:not([data-fx=off]) body.leaving .content { opacity: 0; transform: perspective(1200px) translateY(-8px) rotateX(-2deg) scale(.99); transition: opacity .18s ease, transform .18s ease; }

/* tilt kartu (diaktifkan oleh motion.js) */
[data-tilt] { position: relative; }
[data-tilt].tilt-on { transform: perspective(900px) translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) !important; transition: transform .16s ease-out, box-shadow .3s !important; transition-delay: 0s !important; will-change: transform; }
[data-tilt].tilting { --lift: -3px; box-shadow: 0 26px 46px -18px rgba(20, 40, 60, .32) !important; }
.tilt-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .55), transparent 62%); mix-blend-mode: soft-light; z-index: 3; }
.tilting > .tilt-glare { opacity: 1; }
.dash-hero.tilting > .tilt-glare, .auth-card.tilting > .tilt-glare { mix-blend-mode: overlay; opacity: .5; }

/* tombol 3D: tebal & menekan */
html:not([data-fx=off]) .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .14), 0 3px 0 #11283f, 0 12px 20px rgba(27, 58, 87, .3); transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .2s; }
html:not([data-fx=off]) .btn-primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -2px 0 rgba(0, 0, 0, .14), 0 5px 0 #11283f, 0 18px 26px rgba(27, 58, 87, .34); }
html:not([data-fx=off]) .btn-primary:active { transform: translateY(3px) scale(.99); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25), 0 0 0 #11283f, 0 4px 8px rgba(27, 58, 87, .25); }
html:not([data-fx=off]) .dash-hero .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .1), 0 3px 0 #8a6a40, 0 12px 20px rgba(0, 0, 0, .28); }
html:not([data-fx=off]) .dash-hero .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 5px 0 #8a6a40, 0 18px 26px rgba(0, 0, 0, .32); }
html:not([data-fx=off]) .dash-hero .btn-primary:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .2), 0 0 0 #8a6a40; }
html:not([data-fx=off]) .btn-ghost { box-shadow: 0 2px 0 var(--line), 0 8px 14px -8px rgba(27, 58, 87, .18); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .2s, background .2s; }
html:not([data-fx=off]) .btn-ghost:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--line), 0 14px 20px -10px rgba(27, 58, 87, .26); }
html:not([data-fx=off]) .btn-ghost:active { transform: translateY(2px); box-shadow: 0 0 0 var(--line), inset 0 2px 4px rgba(27, 58, 87, .12); }
html:not([data-fx=off]) .dash-hero .btn-ghost { box-shadow: 0 2px 0 rgba(255, 255, 255, .14), 0 10px 16px -8px rgba(0, 0, 0, .3); }
html:not([data-fx=off]) .btn-success, html:not([data-fx=off]) .btn-danger-ghost { transition: transform .18s var(--ease), box-shadow .18s; }
html:not([data-fx=off]) .btn-success:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #0f6a47, 0 14px 22px rgba(21, 112, 76, .32); }
html:not([data-fx=off]) .btn-success:active { transform: translateY(2px); }
html[data-fx=full] .btn-primary::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .38) 50%, transparent 68%); transform: translateX(-130%); transition: transform .75s var(--ease); }
html[data-fx=full] .btn-primary:hover::after { transform: translateX(130%); }
html:not([data-fx=off]) .icon-btn { transition: transform .18s var(--ease), background .2s, box-shadow .2s; }
html:not([data-fx=off]) .icon-btn:hover { transform: translateY(-2px) scale(1.06); }
html:not([data-fx=off]) .icon-btn:active { transform: scale(.92); }

/* ikon bernyawa */
html[data-fx=full] .kpi-ic { animation: icBob 5s ease-in-out infinite; transform-style: preserve-3d; }
html[data-fx=full] .kpi:nth-child(2n) .kpi-ic { animation-delay: -1.6s; } html[data-fx=full] .kpi:nth-child(3n) .kpi-ic { animation-delay: -3.1s; }
@keyframes icBob { 0%, 100% { transform: translateY(0) rotateY(0); } 50% { transform: translateY(-4px) rotateY(14deg); } }
html:not([data-fx=off]) .nav-item .ic { transition: transform .3s var(--ease); }
html:not([data-fx=off]) .nav-item:hover .ic { animation: icWiggle .55s var(--ease); }
@keyframes icWiggle { 30% { transform: translateY(-3px) rotate(-10deg) scale(1.12); } 60% { transform: translateY(0) rotate(7deg) scale(1.06); } }
html:not([data-fx=off]) .nav-item { animation: navIn .6s var(--ease) both; }
html:not([data-fx=off]) .nav-group:nth-child(1) .nav-item { animation-delay: .05s; } html:not([data-fx=off]) .nav-group:nth-child(2) .nav-item { animation-delay: .14s; }
html:not([data-fx=off]) .nav-group:nth-child(3) .nav-item { animation-delay: .22s; } html:not([data-fx=off]) .nav-group:nth-child(4) .nav-item { animation-delay: .3s; }
@keyframes navIn { from { opacity: 0; transform: translateX(-14px) rotateY(-18deg); } }
html:not([data-fx=off]) .nav-item.active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 18px -8px rgba(0, 0, 0, .45); }

/* baris tabel masuk berurutan */
html:not([data-fx=off]) .tbl tbody tr, html:not([data-fx=off]) .rt tbody tr { animation: rowIn .5s var(--ease) both; }
html:not([data-fx=off]) tbody tr:nth-child(2) { animation-delay: .04s; } html:not([data-fx=off]) tbody tr:nth-child(3) { animation-delay: .08s; } html:not([data-fx=off]) tbody tr:nth-child(4) { animation-delay: .12s; }
html:not([data-fx=off]) tbody tr:nth-child(5) { animation-delay: .16s; } html:not([data-fx=off]) tbody tr:nth-child(6) { animation-delay: .2s; } html:not([data-fx=off]) tbody tr:nth-child(n+7) { animation-delay: .24s; }
@keyframes rowIn { from { opacity: 0; transform: translateY(8px) rotateX(-8deg); } }

/* bar persentase bertekstur 3D */
html:not([data-fx=off]) .pb-track, html:not([data-fx=off]) .pbar2 { box-shadow: inset 0 2px 3px rgba(20, 40, 60, .12); }
html:not([data-fx=off]) .pb-fill, html:not([data-fx=off]) .pbar2 i { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 2px 5px rgba(27, 58, 87, .28); }

/* modal & toast: masuk 3D */
html:not([data-fx=off]) .modal { animation: modalIn3d .45s cubic-bezier(.2, .9, .25, 1.1) both; transform-origin: 50% 100%; }
@keyframes modalIn3d { from { opacity: 0; transform: perspective(1000px) translateY(36px) rotateX(14deg) scale(.95); } }
html:not([data-fx=off]) .toast { animation: toastIn3d .5s cubic-bezier(.2, .9, .25, 1.15) both; }
@keyframes toastIn3d { from { opacity: 0; transform: perspective(800px) translateX(50px) rotateY(-35deg) scale(.92); } }
html:not([data-fx=off]) .bell-pop { transform-origin: top right; }

/* bentuk 3D melayang (hero & login) */
.fx-shapes { position: absolute; inset: 0; pointer-events: none; z-index: 0; perspective: 700px; overflow: hidden; }
.fx-s { position: absolute; width: var(--s); height: var(--s); transform: translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform .5s var(--ease); transform-style: preserve-3d; }
.fx-cube .cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(34deg); }
.fx-cube .cube i { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .35); background: linear-gradient(135deg, rgba(255, 255, 255, .24), rgba(214, 171, 114, .1)); backdrop-filter: blur(1px); }
.fx-cube .cube i:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); } .fx-cube .cube i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.fx-cube .cube i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); } .fx-cube .cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.fx-cube .cube i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); } .fx-cube .cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.fx-orb3 .o3 { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .85), rgba(214, 171, 114, .75) 38%, rgba(138, 106, 64, .85) 100%); box-shadow: inset -8px -10px 18px rgba(60, 38, 10, .45), 0 18px 30px rgba(0, 0, 0, .28); }
.fx-ring3 .r3 { width: 100%; height: 100%; border-radius: 50%; border: calc(var(--s) * .2) solid rgba(255, 255, 255, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 10px 22px rgba(0, 0, 0, .2); transform: rotateX(62deg) rotateY(14deg); }
.fx-shapes.live .fx-cube .cube { animation: cubeSpin var(--dur, 16s) linear infinite; }
.fx-shapes.live .fx-orb3 .o3 { animation: orbFloat var(--dur, 11s) ease-in-out infinite; }
.fx-shapes.live .fx-ring3 .r3 { animation: ringSpin var(--dur, 13s) linear infinite; }
@keyframes cubeSpin { to { transform: rotateX(336deg) rotateY(394deg); } }
@keyframes orbFloat { 50% { transform: translateY(-16px) scale(1.04); } }
@keyframes ringSpin { from { transform: rotateX(62deg) rotateZ(0); } to { transform: rotateX(62deg) rotateZ(360deg); } }
.dash-hero > :not(.fx-shapes) { position: relative; z-index: 1; }
.auth-art > .fx-shapes { z-index: 0; }

/* efek Mati / gerak dikurangi */
html[data-fx=off] *, html[data-fx=off] *::before, html[data-fx=off] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
html[data-fx=off] .reveal { opacity: 1 !important; transform: none !important; }
html[data-fx=off] .orb, html[data-fx=off] .fx-shapes { display: none; }
html[data-reduce="1"] .fx-shapes.live * { animation: none !important; }
html[data-fx=light] .orb { animation: none; }
html[data-fx=light] .kpi-ic { animation: none; }

/* laporan PDF: tanpa animasi agar tangkapan html2canvas utuh */
.rpage, .rpage * { animation: none !important; transition: none !important; }

/* perapihan layar kecil */
@media (max-width: 520px) {
  .top-title h1 { font-size: 18px; }
  .period-pick { padding: 0 8px; gap: 4px; height: 38px; }
  .period-pick > svg:first-child { display: none; }
  .period-pick select { font-size: 13px; max-width: 108px; }
  .top-actions { gap: 6px; }
  .tl-area .card-h { flex-wrap: wrap; }
  .tl-area .card-h .btn { width: 100%; }
  .tl-formula { gap: 8px; } .tf-box { min-width: 0; flex: 1 1 120px; padding: 10px 12px; } .tf-box b { font-size: 21px; }
  .tl-formula > i { display: none; }
}

/* ==========================================================================
   v3 — peran, input harian PIC, Quality Control, laporan masuk, unduhan
   ========================================================================== */
.r-admin { --rc: #1b3a57; --rcs: #e3ecf5; }
.r-pic_laundry, .m-laundry { --rc: #2f78b5; --rcs: #e4f0fb; }
.r-pic_meals, .m-meals { --rc: #b8742b; --rcs: #fbefe0; }
.r-pic_pantry, .m-pantry { --rc: #1d8f62; --rcs: #e1f4ea; }
.r-qc, .m-qc { --rc: #7450b0; --rcs: #efe8fa; }
.chip { gap: 5px; }
.chip.ok { background: var(--ok-soft); color: #14774f; }
.chip.warn { background: var(--warn-soft); color: #9a6209; }
.chip.bad { background: var(--bad-soft); color: #b13434; }
.chip.info { background: var(--blue-soft); color: var(--blue); }
.chip.muted { background: var(--line-2); color: var(--muted); }
em.bad, small .bad, span .bad { color: var(--bad); font-style: normal; font-weight: 650; }
.alert-info { background: var(--blue-soft); border-color: #c8dcef; color: var(--navy); }
.alert ul { margin: 6px 0; padding-left: 18px; }
.link-alert { align-items: center; color: var(--navy); }
.link-alert:hover { text-decoration: none; border-color: var(--blue-2); }
.link-alert > div { flex: 1; }
.link-alert > .ic:last-child { transform: rotate(-90deg); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.icon-btn.sm { width: 34px; height: 34px; border-radius: 10px; }
.icon-btn.danger { color: var(--bad); }
.main .icon-btn.danger:hover { background: var(--bad-soft); }
.rot90 { display: grid; transform: rotate(90deg); } .rot-90 { display: grid; transform: rotate(-90deg); }
[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.empty-s { list-style: none; padding: 18px 10px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* ---------- avatar & tema */
.avatar { overflow: hidden; }
.avatar.r-admin, .avatar.r-pic_laundry, .avatar.r-pic_meals, .avatar.r-pic_pantry, .avatar.r-qc { background: linear-gradient(135deg, var(--rc), color-mix(in srgb, var(--rc) 60%, #000)); }
.avatar.has-photo { padding: 0; background: var(--line-2); }
.avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.sm { width: 36px; height: 36px; border-radius: 11px; font-size: 13px; }
.avatar.xs { width: 24px; height: 24px; border-radius: 8px; font-size: 10px; }
.avatar.lg { width: 58px; height: 58px; border-radius: 17px; font-size: 19px; }
.avatar.xl { width: 104px; height: 104px; border-radius: 30px; font-size: 34px; box-shadow: 0 12px 30px rgba(20, 40, 60, .22); }
.top-me { display: block; border-radius: 12px; transition: transform .25s var(--ease), box-shadow .25s; }
.top-me:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20, 40, 60, .2); }
.top-me .avatar { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--gold-2); }
.role-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 20px; font-size: 12px; font-weight: 650; background: var(--rcs); color: var(--rc); white-space: nowrap; vertical-align: middle; }
.rc-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--rcs, var(--blue-soft)); color: var(--rc, var(--blue)); }
.theme-btn { color: var(--ink); }
.theme-btn > span { display: grid; place-items: center; }
.theme-btn .th-sun { display: none; }
[data-theme="dark"] .theme-btn .th-sun { display: grid; animation: thIn .5s var(--ease); }
[data-theme="dark"] .theme-btn .th-moon { display: none; }
:root:not([data-theme="dark"]) .theme-btn .th-moon { animation: thIn .5s var(--ease); }
@keyframes thIn { from { opacity: 0; transform: rotate(-90deg) scale(.5); } }
.theme-btn.ghost { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .45s ease, border-color .45s ease, color .3s ease, fill .3s ease, box-shadow .45s ease !important; transition-delay: 0s !important; }
.credit a { color: var(--gold); font-weight: 700; }
.foot .credit { white-space: nowrap; }

/* ---------- halaman masuk & daftar */
.auth-form-side { position: relative; gap: 0; }
.auth-tools { position: absolute; top: 16px; right: 16px; z-index: 5; display: flex; gap: 8px; }
.auth-card.portal { width: min(520px, 100%); }
.auth-card.reg { width: min(580px, 100%); }
.role-grid { display: grid; gap: 10px; margin-bottom: 6px; }
.role-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); color: var(--text); transition: transform .25s var(--ease), border-color .2s, box-shadow .25s, background .2s; animation: itemIn .5s var(--ease) both; animation-delay: calc(.15s + var(--i, 0) * 60ms); }
.role-card:hover { text-decoration: none; border-color: var(--rc); background: var(--rcs); transform: translateX(4px); box-shadow: 0 10px 22px -12px var(--rc); }
.role-card .rc-ic { width: 46px; height: 46px; border-radius: 14px; }
.rc-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.rc-t b { font-size: 15px; color: var(--ink); }
.rc-t small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.rc-go { color: var(--muted); transform: rotate(-90deg); transition: transform .25s var(--ease), color .2s; }
.role-card:hover .rc-go { color: var(--rc); transform: rotate(-90deg) translateY(3px); }
.auth-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 16px; }
.auth-back .ic { transform: rotate(90deg); }
.auth-back:hover { color: var(--blue); text-decoration: none; }
.auth-role { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--rcs); margin-bottom: 16px; }
.auth-role small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.auth-role b { color: var(--rc); font-size: 15.5px; }
.auth-alt { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 4px; line-height: 1.7; }
.auth-alt a { font-weight: 650; }
.auth-credit { margin-top: 20px; max-width: 520px; text-align: center; font-size: 12px; color: var(--muted); line-height: 1.6; }
.art-role { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 20px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: var(--gold-2); font-size: 13px; font-weight: 650; margin-bottom: 14px; }
.avatar-pick { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.avatar-pick b { display: block; font-size: 14px; color: var(--ink); }
.avatar-pick small { display: block; color: var(--muted); font-size: 12.5px; }
.ap-img { position: relative; flex: none; width: 92px; height: 92px; border-radius: 26px; overflow: hidden; display: grid; place-items: center; cursor: pointer; border: 2px dashed #c3d2e1; background: var(--line-2); color: var(--muted); transition: border-color .2s, transform .25s var(--ease), box-shadow .25s; }
.ap-img:hover, .ap-img:focus-visible { border-color: var(--blue); color: var(--blue); transform: scale(1.03); }
.ap-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ap-img input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ap-img.has { border-style: solid; border-color: var(--ok); box-shadow: 0 8px 20px -8px rgba(29, 154, 104, .5); }
.ap-size { display: block; margin-top: 4px; font-size: 12px; font-weight: 650; color: var(--ok); }
.role-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rp { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; background: var(--card); transition: border-color .2s, background .2s, box-shadow .2s; }
.rp:last-child:nth-child(odd) { grid-column: 1 / -1; }
.rp input { position: absolute; opacity: 0; pointer-events: none; }
.rp .rc-ic { width: 36px; height: 36px; border-radius: 11px; }
.rp b { display: block; font-size: 13.5px; color: var(--ink); }
.rp small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.rp:hover { border-color: var(--rc); }
.rp:has(input:checked) { border-color: var(--rc); background: var(--rcs); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc) 18%, transparent); }
.rp:has(input:focus-visible) { outline: 2.5px solid rgba(47, 97, 144, .55); outline-offset: 2px; }

/* ---------- kepala input harian */
.pin-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ph-ic { flex: none; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--blue), #1b3a57); box-shadow: 0 10px 22px -8px rgba(27, 58, 87, .55); }
.pin-head.is-locked .ph-ic { background: linear-gradient(135deg, #25b27c, #15704c); box-shadow: 0 10px 22px -8px rgba(21, 112, 76, .55); }
.ph-main { flex: 1; min-width: 220px; }
.ph-main h2 { font-size: 22px; font-weight: 740; margin-top: 2px; }
.ph-main p { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.date-switch { display: flex; gap: 8px; }
.ds-btn { display: flex; flex-direction: column; min-width: 128px; padding: 8px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); color: var(--text); transition: border-color .2s, background .2s, transform .2s var(--ease), box-shadow .2s; }
.ds-btn:hover { text-decoration: none; border-color: var(--blue-2); transform: translateY(-2px); }
.ds-btn small { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.ds-btn b { font-size: 14px; color: var(--ink); }
.ds-btn em { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 11.5px; font-weight: 650; color: var(--warn); }
.ds-btn.done em { color: var(--ok); }
.ds-btn.active { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px rgba(47, 97, 144, .12); }
.locked-card { border-left: 5px solid var(--ok); }
.lc-top { display: flex; gap: 14px; align-items: flex-start; }
.lc-ic { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.lc-top h3 { font-size: 16px; }
.lc-top p { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.lc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 16px 0 2px; }
.lc-stats > div { padding: 10px 12px; border-radius: 12px; background: var(--line-2); }
.lc-stats span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.lc-stats b { font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.lc-stats small { font-size: 12px; color: var(--muted); font-weight: 500; }
.lc-preview { margin-top: 14px; }
.lc-preview summary, .hist-d summary { cursor: pointer; font-weight: 650; font-size: 13.5px; color: var(--blue); width: max-content; }
.lc-preview textarea, .sb-text { width: 100%; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--line-2); color: var(--text); font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; outline: none; }
.btn-wa { color: #fff; background: linear-gradient(135deg, #2fd16f, #128c4a); box-shadow: 0 6px 16px rgba(18, 140, 74, .3); }
.btn-wa:hover { text-decoration: none; box-shadow: 0 10px 22px rgba(18, 140, 74, .38); }
html:not([data-fx=off]) .btn-wa { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #0c6635, 0 12px 20px rgba(18, 140, 74, .28); }
html:not([data-fx=off]) .btn-wa:hover { transform: translateY(-2px); }
html:not([data-fx=off]) .btn-wa:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .2); }

/* ---------- daftar isian PIC */
.pin-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; }
.pt-search, .fx-search { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--muted); transition: border-color .2s, box-shadow .2s; }
.pt-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47, 97, 144, .14); }
.pt-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; color: var(--text); }
.switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; user-select: none; white-space: nowrap; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch span { position: relative; flex: none; width: 42px; height: 24px; border-radius: 12px; background: #c9d5e1; transition: background .25s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); transition: transform .3s var(--ease); }
.switch input:checked + span { background: var(--ok); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2.5px solid rgba(47, 97, 144, .55); outline-offset: 2px; }
.pin-help { display: flex; align-items: center; gap: 8px; padding: 0 4px; font-size: 13px; color: var(--muted); }
.pin-help .ic { color: var(--blue); }
.pin-list { display: grid; gap: 14px; }
.pin-grp { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; }
.pg-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; background: linear-gradient(90deg, var(--blue-soft), transparent); border-bottom: 1px solid var(--line); }
.pg-h b { font-size: 14px; color: var(--navy); }
.pg-tot { font-size: 12.5px; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.pg-b { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.pin-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 16px; border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); cursor: text; transition: background .2s; animation: itemIn .4s var(--ease) both; animation-delay: calc(var(--k, 0) * 16ms); }
.pin-row:hover { background: var(--line-2); }
.pr-l { flex: 1; min-width: 0; }
.pr-l b { display: block; font-size: 14px; font-weight: 620; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-l small { display: block; font-size: 12px; color: var(--muted); }
.pr-bar { flex: none; width: 52px; height: 6px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.pr-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--blue-2), var(--blue)); transition: width .5s var(--ease); }
.pr-bar.over i { background: linear-gradient(90deg, #5fbf96, var(--ok)); }
.pr-in { flex: none; display: flex; align-items: center; gap: 6px; }
.pr-in input { width: 92px; height: 44px; padding: 0 10px; text-align: center; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); border: 1.5px solid var(--line); border-radius: 12px; background: var(--line-2); outline: none; transition: border-color .2s, background .2s, box-shadow .2s; }
.pr-in input:focus { border-color: var(--blue); background: var(--card); box-shadow: 0 0 0 4px rgba(47, 97, 144, .14); }
.pr-in em { min-width: 24px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); }
.pin-row.has input { border-color: #9fd8bd; background: var(--ok-soft); color: #11613f; }
.pin-row.bad input { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.pin-list.ro .pin-row { cursor: default; }
.pin-list.ro input { background: transparent; border-style: dashed; }
.pin-bar { position: sticky; bottom: 16px; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 44px rgba(27, 58, 87, .2); animation: tlUp .45s var(--ease) both; }
.pb-stat { flex: 1; min-width: 0; display: grid; }
.pb-stat small { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.pb-stat b { font-size: 22px; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.pb-stat span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-note.has { border-color: var(--gold-2); color: var(--gold); background: var(--gold-soft); }
.pb-save { height: 48px; padding: 0 22px; font-size: 15px; }
.confirm-sum .cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.cs-grid > div { padding: 10px 12px; border-radius: 12px; background: var(--line-2); }
.cs-grid span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.cs-grid b { font-size: 15px; color: var(--ink); }
.cs-warn, .cs-note { margin: 8px 0; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; background: var(--warn-soft); color: #7d4f0a; }
.cs-note { background: var(--blue-soft); color: var(--navy); }
.cs-lock { margin: 12px 0 2px; font-size: 13.5px; color: var(--muted); }
.sb-done { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: var(--ok-soft); margin-bottom: 14px; }
.sb-check { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #2bbd84, #15704c); box-shadow: 0 10px 22px -8px rgba(21, 112, 76, .7); animation: sealIn .7s cubic-bezier(.2, .9, .25, 1.4) both; }
.sb-done b { display: block; font-size: 15.5px; color: #11613f; }
.sb-done span { font-size: 13px; color: var(--muted); }
.sb-actions { margin-top: 4px; }
.sb-copy.done { border-color: var(--ok); color: var(--ok); }

/* ---------- Quality Control */
.qc-admin-act { display: flex; gap: 8px; flex-wrap: wrap; }
.day-strip { display: flex; gap: 6px; overflow-x: auto; padding: 10px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.dsx { flex: none; width: 46px; height: 60px; border-radius: 13px; border: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); scroll-snap-align: center; transition: transform .2s var(--ease), border-color .2s, background .2s; }
.dsx:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--blue-2); }
.dsx small { font-size: 10px; font-weight: 700; color: var(--muted); }
.dsx b { font-size: 15px; line-height: 1.2; }
.dsx i { width: 6px; height: 6px; border-radius: 50%; margin-top: 3px; background: transparent; }
.dsx.wk small { color: var(--gold); }
.dsx.draft i { background: var(--warn); } .dsx.sub i { background: var(--ok); } .dsx.nok i { background: var(--bad); }
.dsx.active { background: linear-gradient(135deg, #2f6190, #1b3a57); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -6px rgba(27, 58, 87, .6); }
.dsx.active small { color: rgba(255, 255, 255, .75); }
.qc-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.qs-card { display: grid; align-content: center; gap: 2px; padding: 14px 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); min-width: 0; }
.qs-card span { font-size: 12px; font-weight: 650; color: var(--muted); }
.qs-card > b, .qs-card div > b { font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.qs-card b small { font-size: 13px; color: var(--muted); font-weight: 550; }
.qs-card > small, .qs-card div > small { font-size: 12.5px; color: var(--muted); }
.qs-card.warn { border-color: #f0d6a8; background: var(--warn-soft); }
.qs-card.ring-c { display: flex; align-items: center; gap: 14px; }
.qs-card.ring-c .ring { width: 66px; height: 66px; }
.qs-card.ring-c > div:last-child { display: grid; gap: 1px; min-width: 0; }
.qs-dots { display: flex; gap: 4px; margin-top: 6px; }
.qs-dots i { flex: 1; max-width: 18px; height: 6px; border-radius: 3px; background: var(--line); }
.qs-dots i.ok { background: var(--ok); } .qs-dots i.nok { background: var(--bad); }
.qc-sections { display: grid; gap: 16px; }
.qs { padding: 0; overflow: hidden; }
.qs-h { display: flex; align-items: center; gap: 14px; padding: 16px 18px; flex-wrap: wrap; }
.qs-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.qs.filled .qs-ic { background: var(--ok-soft); color: var(--ok); }
.qs.has-nok .qs-ic { background: var(--bad-soft); color: var(--bad); }
.qs-t { flex: 1; min-width: 200px; }
.qs-t h3 { font-size: 15.5px; }
.qs-t p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
em.ref { display: inline-block; font-style: normal; font-size: 10.5px; font-weight: 750; letter-spacing: .04em; color: var(--gold); background: var(--gold-soft); padding: 2px 7px; border-radius: 6px; margin-left: 6px; vertical-align: 2px; }
.qs-st { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.qs-b { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; padding: 14px 18px 18px; border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--line-2), transparent 70%); }
.qe { display: grid; gap: 10px; align-content: start; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--ok); box-shadow: var(--shadow-1); animation: itemIn .4s var(--ease) both; }
.qe.nok { border-left-color: var(--bad); }
.qe.nophoto { border-left-color: var(--warn); }
.qe-h { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.qe-h b { display: block; font-size: 14px; color: var(--ink); }
.qe-h span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.qe-kv { display: flex; flex-wrap: wrap; gap: 6px; }
.kv { display: inline-flex; flex-direction: column; padding: 5px 9px; border-radius: 9px; background: var(--line-2); font-size: 12.5px; font-weight: 650; color: var(--ink); line-height: 1.3; }
.kv small { font-size: 10px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kv.r-ok { background: var(--ok-soft); color: #14774f; }
.kv.r-nok { background: var(--bad-soft); color: #b13434; }
.qe-dev { margin: 0; padding: 8px 12px 8px 26px; border-radius: 10px; background: var(--bad-soft); color: #8f2626; font-size: 12.5px; }
.qe-note { padding: 8px 10px; border-radius: 10px; background: var(--line-2); font-size: 13px; }
.qe-note.demo { font-style: italic; color: var(--muted); }
.qe-f { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.qe-ph { display: flex; flex-wrap: wrap; gap: 6px; }
.qph { width: 56px; height: 56px; border: 0; border-radius: 11px; background: var(--line-2) center / cover no-repeat; cursor: zoom-in; box-shadow: 0 3px 8px rgba(20, 40, 60, .18); transition: transform .25s var(--ease), box-shadow .25s; }
.qph:hover { transform: scale(1.08) rotate(-2deg); box-shadow: 0 8px 16px rgba(20, 40, 60, .25); }
.qe-noph { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--warn); }
.qe-act { display: flex; gap: 4px; }
.qform .qf-ref { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; margin-bottom: 14px; border-radius: 12px; background: var(--line-2); font-size: 13px; color: var(--muted); }
.qf-ref .chip { background: var(--gold-soft); color: var(--gold); }
.qf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.qf-sub { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 8px 0 10px; font-size: 13.5px; color: var(--navy); }
.qf-sub small { font-size: 12px; font-weight: 500; color: var(--muted); }
.link-btn { margin-left: auto; border: 0; background: none; padding: 0; font-size: 12.5px; font-weight: 650; color: var(--blue); }
.link-btn:hover { text-decoration: underline; }
.qf-checks, .qf-scores { display: grid; gap: 8px; margin-bottom: 14px; }
.qf-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qf-check, .qf-score { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); transition: border-color .2s, background .2s; }
.qc-l { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 550; }
.tri { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--line-2); }
.tri label, .score label, .chips-pick label { position: relative; }
.tri input, .score input, .chips-pick input { position: absolute; opacity: 0; pointer-events: none; }
.tri span { display: block; padding: 6px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 650; color: var(--muted); cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.tri span:active { transform: scale(.94); }
.tri .t-ok input:checked + span { background: var(--ok); color: #fff; box-shadow: 0 3px 8px rgba(29, 154, 104, .35); }
.tri .t-nok input:checked + span { background: var(--bad); color: #fff; box-shadow: 0 3px 8px rgba(209, 67, 67, .35); }
.tri .t-na input:checked + span { background: #8a9aac; color: #fff; }
.tri input:focus-visible + span, .score input:focus-visible + span, .chips-pick input:focus-visible + span { outline: 2.5px solid rgba(47, 97, 144, .55); outline-offset: 1px; }
.qf-check:has(.t-nok input:checked) { border-color: #efb4b4; background: var(--bad-soft); }
.score { display: inline-flex; gap: 4px; flex: none; }
.score span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; border: 1.5px solid var(--line); font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; background: var(--card); transition: all .2s var(--ease); }
.score input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(47, 97, 144, .35); }
.score label:nth-child(-n+2) input:checked + span { background: var(--bad); border-color: var(--bad); box-shadow: 0 4px 10px rgba(209, 67, 67, .35); }
.chips-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-pick span { display: inline-block; padding: 8px 13px; border-radius: 20px; border: 1.5px solid var(--line); font-size: 13px; font-weight: 620; background: var(--card); color: var(--text); cursor: pointer; transition: all .2s var(--ease); }
.chips-pick input:checked + span { background: var(--blue-soft); border-color: var(--blue); color: var(--navy); }
.chips-pick label.bad input:checked + span { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.num-in { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.num-in:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47, 97, 144, .14); }
.field .num-in input { border: 0; box-shadow: none; border-radius: 0; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; background: transparent; }
.num-in em { display: grid; place-items: center; padding: 0 12px; font-style: normal; font-size: 12.5px; font-weight: 650; color: var(--muted); background: var(--line-2); }
.eval { display: block; font-size: 12.5px; font-weight: 650; }
.eval.e-ok { color: var(--ok); } .eval.e-nok { color: var(--bad); } .eval.e-na { color: var(--muted); }
.qf-photos { margin: 4px 0 14px; padding: 12px 14px; border: 1.5px dashed #c3d2e1; border-radius: 14px; background: var(--line-2); }
.qp-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.qp-h b { font-size: 13.5px; color: var(--ink); }
.qp-h small { font-size: 12px; color: var(--muted); }
.qp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin: 10px 0 2px; }
.qp-empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 13px; color: var(--muted); }
.qp-grid + .btn-row { margin-top: 10px; }
.qf-result:empty { display: none; }
.qf-result { margin-bottom: 8px; }
.qf-actions { position: sticky; bottom: -1px; justify-content: flex-end; margin: 0 -2px; padding: 12px 2px 2px; background: var(--card); border-top: 1px solid var(--line-2); }
.sec-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sec-pick button { display: flex; align-items: center; gap: 10px; padding: 12px; text-align: left; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); color: var(--blue); transition: border-color .2s, background .2s, transform .2s var(--ease); }
.sec-pick button:hover { border-color: var(--blue); background: var(--blue-soft); transform: translateY(-2px); }
.sec-pick b { display: block; font-size: 13.5px; color: var(--ink); }
.sec-pick small { display: block; font-size: 11.5px; color: var(--muted); }
.qlb { position: relative; display: grid; place-items: center; min-height: 280px; border-radius: 12px; overflow: hidden; background: #08121c; }
.qlb img { max-width: 100%; max-height: 70vh; object-fit: contain; display: block; animation: fade .3s ease; }
.qlb-n { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .5); transition: background .2s, transform .2s; }
.qlb-n:hover { background: rgba(0, 0, 0, .75); }
.qlb-n.prev { left: 10px; } .qlb-n.prev .ic { transform: rotate(90deg); }
.qlb-n.next { right: 10px; } .qlb-n.next .ic { transform: rotate(-90deg); }
.qlb-c { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 3px 11px; border-radius: 10px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; font-weight: 600; }

/* ---------- riwayat & dashboard PIC */
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--line-2); border: 1px solid var(--line); }
.cal-legend i.ok { background: var(--ok); border-color: var(--ok); }
.cal-legend i.edt { background: var(--gold-2); border-color: var(--gold-2); }
.cal-legend i.miss { background: var(--bad-soft); border-color: #e7a3a3; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dn { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding-bottom: 2px; }
.cal-d { min-height: 60px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--ink); transition: transform .2s var(--ease), box-shadow .2s; }
.cal-d:hover { text-decoration: none; }
.cal-d b { font-size: 15px; }
.cal-d small { font-size: 10.5px; font-weight: 650; color: inherit; opacity: .8; font-variant-numeric: tabular-nums; }
.cal-d.wk b { color: var(--gold); }
.cal-d.ok { background: var(--ok-soft); border-color: #bfe6d3; color: #11613f; }
.cal-d.ok:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgba(21, 112, 76, .5); }
.cal-d.miss { background: var(--bad-soft); border: 1px dashed #e7a3a3; color: #b13434; pointer-events: none; }
.cal-d.fut { opacity: .45; pointer-events: none; }
.hist-list { display: grid; gap: 14px; }
.hist-h { display: flex; align-items: center; gap: 14px; }
.hd { flex: none; width: 54px; height: 54px; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #2f6190, #1b3a57); box-shadow: 0 8px 18px -8px rgba(27, 58, 87, .6); }
.hd b { font-size: 20px; line-height: 1; } .hd small { font-size: 10.5px; opacity: .8; }
.ht { flex: 1; min-width: 0; }
.ht h3 { font-size: 15px; }
.ht p { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.hv { text-align: right; }
.hv b { display: block; font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.hv small { font-size: 12px; color: var(--muted); }
.hist-d { margin-top: 12px; }
.hist-d table { margin-top: 10px; }
.tbl tr.grp td { background: var(--line-2); font-weight: 700; color: var(--navy); font-size: 12.5px; }
.hist-note { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--gold-soft); font-size: 13.5px; }
.hist-f { margin-top: 12px; display: flex; justify-content: flex-end; }
.hist-qc { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.hist-qc li { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid var(--ok); font-size: 13.5px; }
.hist-qc li.nok { border-left-color: var(--bad); }
.hist-qc small { display: block; margin-top: 4px; font-size: 12px; color: var(--bad); }
.hist-ph { display: flex; gap: 4px; margin-top: 6px; }
.hist-ph img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.hero-today { margin-top: 4px; }
.home-hero .chip.ok { background: rgba(95, 191, 150, .22); color: #bff0d8; }
.home-hero .chip.warn { background: rgba(214, 171, 114, .25); color: #ffe1b8; }
.home-hero .chip.bad { background: rgba(239, 107, 107, .25); color: #ffd0d0; }
.recent-list { display: grid; gap: 8px; }
.rl-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--text); transition: border-color .2s, transform .25s var(--ease), box-shadow .25s; }
a.rl-item:hover { text-decoration: none; border-color: var(--rc, var(--blue-2)); transform: translateX(3px); box-shadow: var(--shadow-1); }
.rl-d { flex: none; width: 46px; height: 46px; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--rcs, var(--blue-soft)); color: var(--rc, var(--blue)); }
.rl-d b { font-size: 17px; line-height: 1; } .rl-d small { font-size: 10.5px; font-weight: 600; }
.rl-t { flex: 1; min-width: 0; }
.rl-t b { display: block; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-t span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.rl-v { text-align: right; }
.rl-v b { display: block; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.rl-v small { font-size: 11.5px; color: var(--muted); }

/* ---------- dashboard admin */
.mod-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mod-card { display: flex; align-items: center; gap: 14px; color: var(--text); border-top: 3px solid var(--rc); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.mod-card:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-2); }
.mod-card .ring { width: 78px; height: 78px; }
.mc-t { display: grid; gap: 2px; min-width: 0; }
.mc-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--rcs); color: var(--rc); margin-bottom: 4px; }
.mc-t b { font-size: 15px; color: var(--ink); }
.mc-t span { font-size: 12.5px; color: var(--muted); }
.mc-t small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heat { display: grid; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.heat-row { display: grid; grid-template-columns: 150px repeat(var(--n), minmax(17px, 1fr)); gap: 3px; align-items: center; min-width: calc(150px + var(--n) * 20px); }
.heat-row > span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--ink); }
.heat-row.head b { text-align: center; font-size: 10px; font-weight: 650; color: var(--muted); }
.heat-row.head b.wk { color: var(--gold); }
.hc { display: block; height: 22px; border-radius: 5px; background: var(--line-2); transition: transform .2s var(--ease); }
.hc:hover { transform: scale(1.3); position: relative; z-index: 1; }
.hc.ok { background: linear-gradient(180deg, #34b07d, var(--ok)); }
.hc.edt { background: linear-gradient(180deg, var(--gold-2), var(--gold)); }
.hc.miss { background: var(--bad-soft); box-shadow: inset 0 0 0 1px rgba(209, 67, 67, .35); }
.dev-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.dev-list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); transition: border-color .2s, transform .2s var(--ease); }
.dev-list a:hover { text-decoration: none; border-color: var(--bad); transform: translateX(3px); }
.dv-d { flex: none; width: 42px; height: 42px; border-radius: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bad-soft); color: var(--bad); }
.dv-d b { font-size: 16px; line-height: 1; } .dv-d small { font-size: 10px; font-weight: 600; }
.dv-t { min-width: 0; }
.dv-t b { display: block; font-size: 13.5px; color: var(--ink); }
.dv-t small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; color: var(--muted); }
.pb-fill.ok { background: linear-gradient(90deg, #5fbf96, var(--ok)); }
.pb-fill.bad { background: linear-gradient(90deg, #ec8a8a, var(--bad)); }
td.bad, b.bad { color: var(--bad); }

/* ---------- laporan masuk & rincian */
.filter-tabs { display: flex; gap: 4px; width: max-content; max-width: 100%; overflow-x: auto; padding: 5px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-1); scrollbar-width: none; }
.ft { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 620; color: var(--muted); white-space: nowrap; transition: color .2s, background .2s; }
.ft:hover { text-decoration: none; color: var(--ink); background: var(--line-2); }
.ft.active { color: #fff; background: linear-gradient(135deg, #2f6190, #1b3a57); box-shadow: 0 4px 12px rgba(27, 58, 87, .3); }
.ft em { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-style: normal; font-size: 11.5px; font-weight: 700; background: var(--line-2); color: var(--muted); }
.ft.active em { background: rgba(255, 255, 255, .2); color: #fff; }
.ft em.hot { background: var(--bad); color: #fff; animation: pulse 2s infinite; }
.inbox { display: grid; gap: 22px; }
.ib-day { display: grid; gap: 8px; }
.ib-dh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 0 4px; }
.ib-dh b { font-size: 14.5px; color: var(--ink); }
.ib-dh span { font-size: 12.5px; color: var(--muted); }
.ib-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 16px; border-left: 4px solid var(--rc); }
.ib-ic { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--rcs); color: var(--rc); }
.ib-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ib-main > b { font-size: 14.5px; color: var(--ink); }
.ib-by { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.ib-note { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 8px; background: var(--line-2); font-size: 12px; color: var(--muted); }
.ib-val { text-align: right; }
.ib-val b { display: block; font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ib-val small { font-size: 12px; color: var(--muted); }
.ib-act { display: flex; align-items: center; gap: 4px; }
.det-head { display: flex; align-items: center; gap: 12px; }
.dh-main { flex: 1; min-width: 0; text-align: center; }
.dh-main h2 { font-size: 20px; margin-top: 2px; }
.dh-main p { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.det-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 22px; align-items: start; }
.det-stats { display: grid; gap: 10px; }
.det-stats > div { padding: 12px 14px; border-radius: 12px; background: var(--line-2); }
.det-stats span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.det-stats b { font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.det-stats small { font-size: 12px; font-weight: 500; color: var(--muted); }
.det-stats em { margin-left: 6px; font-style: normal; font-size: 12px; font-weight: 700; }
.det-stats em.up { color: var(--ok); } .det-stats em.down { color: var(--bad); }
.det-by { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; }
.det-by b { display: block; font-size: 14px; color: var(--ink); }
.det-by span { font-size: 12.5px; color: var(--muted); }
.det-tbl td { vertical-align: middle; }
.det-in { width: 112px; height: 36px; padding: 0 10px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; border: 1.5px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.det-in:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47, 97, 144, .14); }
.det-in.chg { border-color: var(--gold); background: var(--gold-soft); }
.det-edit .form-actions { position: sticky; bottom: 0; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; background: var(--card); border-top: 1px solid var(--line-2); }

/* ---------- pengguna */
.role-sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.rs { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.rs b { display: block; font-size: 20px; line-height: 1.1; color: var(--ink); }
.rs small { font-size: 12px; color: var(--muted); }
.user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.user-card { display: flex; flex-direction: column; gap: 14px; }
.user-card header { display: flex; align-items: center; gap: 14px; }
.uc-t { min-width: 0; display: grid; gap: 3px; justify-items: start; }
.uc-t b { font-size: 15px; color: var(--ink); }
.uc-t > span:not(.role-chip) { font-size: 12.5px; color: var(--muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.you { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--gold); background: var(--gold-soft); padding: 1px 7px; border-radius: 6px; margin-left: 4px; vertical-align: 2px; }
.uc-dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.uc-dl > div { padding: 8px 10px; border-radius: 10px; background: var(--line-2); min-width: 0; }
.uc-dl dt { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.uc-dl dd { margin: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-card footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
.uc-role { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; color: var(--muted); }
.uc-role select { flex: 1; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); font-weight: 600; }
.user-card.st-pending { border-top: 3px solid var(--warn); }
.user-card.st-disabled { opacity: .72; }

/* ---------- pusat unduhan */
.dl-center { display: grid; gap: 20px; }
.dl-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dl-part { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s, transform .2s var(--ease); animation: itemIn .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
.dl-part:hover { border-color: var(--blue-2); transform: translateY(-2px); }
.dl-part input, .fmt input { position: absolute; opacity: 0; pointer-events: none; }
.dp-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.dp-t { flex: 1; min-width: 0; }
.dp-t b { display: block; font-size: 14.5px; color: var(--ink); }
.dp-t small { display: block; font-size: 12.5px; color: var(--muted); }
.dp-v { text-align: right; }
.dp-v b { display: block; font-size: 14.5px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp-v small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.dp-check { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); color: transparent; transition: all .25s var(--ease); }
.dl-part:has(input:checked) { border-color: var(--blue); background: linear-gradient(135deg, var(--blue-soft), var(--card)); box-shadow: 0 0 0 3px rgba(47, 97, 144, .1); }
.dl-part:has(input:checked) .dp-check { background: var(--blue); border-color: var(--blue); color: #fff; transform: scale(1.08); }
.dl-part:has(input:focus-visible), .fmt:has(input:focus-visible) { outline: 2.5px solid rgba(47, 97, 144, .55); outline-offset: 2px; }
.dl-fmt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fmt { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
.fmt b { display: block; font-size: 15px; color: var(--ink); }
.fmt small { display: block; font-size: 12.5px; color: var(--muted); }
.f-ic { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; }
.f-ic.xl { background: #e2f4ea; color: #1d7a4f; }
.f-ic.pdf { background: #fbe6e6; color: #c43c3c; }
.fmt:has(input:checked) { border-color: var(--blue); background: linear-gradient(135deg, var(--blue-soft), var(--card)); box-shadow: 0 0 0 3px rgba(47, 97, 144, .1); }
.dl-go { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dl-go b { display: block; font-size: 16px; color: var(--ink); }
.dl-go span { font-size: 13px; color: var(--muted); }
.dl-go .btn { height: 48px; padding: 0 26px; font-size: 15px; }

/* ---------- akun */
.profile-hero { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ph-avatar { position: relative; cursor: pointer; border-radius: 30px; }
.ph-avatar:hover .avatar { filter: brightness(.92); }
.ph-cam { position: absolute; right: -6px; bottom: -6px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--gold-2), var(--gold)); border: 3px solid var(--card); box-shadow: 0 6px 14px rgba(0, 0, 0, .2); transition: transform .25s var(--ease); }
.ph-avatar:hover .ph-cam { transform: scale(1.12) rotate(-8deg); }
.ph-avatar.busy .avatar { opacity: .5; }
.ph-txt { min-width: 0; flex: 1; }
.ph-txt h2 { font-size: 23px; }
.ph-txt p { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ph-txt p .ic { display: inline-block; vertical-align: -2px; }
.theme-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.theme-opts b .ic, .vfx-opts b .ic { display: inline-block; vertical-align: -2px; margin-right: 3px; }
.vfx-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.alert-card { border-left: 4px solid var(--warn); }

/* ---------- grid admin: tanda tersimpan */
.grid th.dh .sdot { display: none; }
.grid th.dh.sub .sdot { display: block; width: 6px; height: 6px; margin: 2px auto 0; border-radius: 50%; background: var(--ok); }
.grid th.dh.edt .sdot { background: var(--gold); }
.sdot-demo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); vertical-align: 1px; }
.sdot-demo.edt { background: var(--gold); }

/* ---------- laporan cetak: QC */
.qcl td { font-size: 8px; }
.qok { color: #14774f; font-weight: 650; }
.qbad { color: #b13434; font-weight: 700; }
td.qbad { background: #fbe8e8; }
.qrow-bad td { background: #fff5f5; }
.mbar.ok i { background: #1d9a68; }

/* ---------- responsif v3 */
@media (max-width: 1280px) { .role-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .mod-grid, .qc-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .det-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) {
  .pin-bar { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .auth-tools .theme-btn.ghost { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff; box-shadow: none; }
}
@media (max-width: 720px) {
  .pin-head { gap: 14px; }
  .ph-ic { width: 48px; height: 48px; border-radius: 15px; }
  .ph-main h2 { font-size: 18px; }
  .date-switch { width: 100%; }
  .ds-btn { flex: 1; min-width: 0; }
  .qc-admin-act { width: 100%; } .qc-admin-act .btn { flex: 1; }
  .pg-b { grid-template-columns: minmax(0, 1fr); }
  .pin-row { border-right: 0; padding: 8px 10px 8px 14px; }
  .pr-in input { width: 84px; }
  .pr-bar { width: 34px; }
  .pin-bar { padding: 10px 10px 10px 14px; gap: 8px; border-radius: 16px; }
  .pb-stat b { font-size: 19px; }
  .pb-note span { display: none; } .pb-note { padding: 0 12px; }
  .pb-save { height: 46px; padding: 0 16px; }
  .confirm-sum .cs-grid { grid-template-columns: minmax(0, 1fr); }
  .qc-summary { gap: 10px; }
  .qs-card { padding: 12px; }
  .qs-card.ring-c { grid-column: 1 / -1; }
  .qs-h { padding: 14px; }
  .qs-st { width: 100%; justify-content: space-between; }
  .qs-b { padding: 12px; grid-template-columns: minmax(0, 1fr); }
  .qf-grid, .qf-scores, .sec-pick, .role-pick, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .qf-check { flex-wrap: wrap; }
  .cal { gap: 4px; }
  .cal-d { min-height: 48px; border-radius: 10px; }
  .cal-d small { font-size: 9px; }
  .hv b { font-size: 17px; }
  .mod-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mod-card .ring { width: 64px; height: 64px; }
  .heat-row { grid-template-columns: 104px repeat(var(--n), minmax(15px, 1fr)); min-width: calc(104px + var(--n) * 17px); }
  .heat-row > span { font-size: 11.5px; }
  .ib-item { flex-wrap: wrap; gap: 10px 12px; }
  .ib-main { flex-basis: calc(100% - 60px); }
  .ib-val { text-align: left; flex: 1; }
  .ib-val b { display: inline; margin-right: 6px; }
  .role-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .user-grid { grid-template-columns: minmax(0, 1fr); }
  .dl-parts, .dl-fmt { grid-template-columns: minmax(0, 1fr); }
  .dl-go .btn { width: 100%; }
  .theme-opts, .vfx-opts { grid-template-columns: minmax(0, 1fr); }
  .profile-hero { flex-direction: column; text-align: center; }
  .ph-txt p { justify-content: center; }
  .avatar.xl { width: 92px; height: 92px; }
  .auth-card { padding: 26px 20px 22px; }
  .filter-tabs { width: 100%; }
}
@media (max-width: 420px) {
  .rl-v small { display: none; }
  .ds-btn { padding: 7px 10px; }
  .ds-btn b { font-size: 13px; }
}
@media print { .pin-bar, .date-switch, .theme-btn, .top-me { display: none !important; } }
.ap-img.busy { opacity: .6; pointer-events: none; }

/* ==========================================================================
   MODE GELAP  — <html data-theme="dark">
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e7eef7;
  --navy: #b8d0ea;
  --navy-2: #9cbcde;
  --blue: #67a0d8;
  --blue-2: #7fb1e0;
  --blue-soft: #16304a;
  --gold: #d6a874;
  --gold-2: #e4bd88;
  --gold-soft: #33281b;
  --bg: #0a131d;
  --card: #101d2b;
  --line: #213549;
  --line-2: #18293a;
  --text: #d3dfec;
  --muted: #8ba1b7;
  --ok: #35c189;
  --ok-soft: #10342a;
  --warn: #e3a447;
  --warn-soft: #382a13;
  --bad: #f07272;
  --bad-soft: #3a1b20;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .22);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 34px rgba(0, 0, 0, .4);
}
[data-theme="dark"] .r-admin { --rc: #8fb6dd; --rcs: #172d44; }
[data-theme="dark"] .r-pic_laundry, [data-theme="dark"] .m-laundry { --rc: #6db3f0; --rcs: #12304a; }
[data-theme="dark"] .r-pic_meals, [data-theme="dark"] .m-meals { --rc: #e9a35a; --rcs: #3a2815; }
[data-theme="dark"] .r-pic_pantry, [data-theme="dark"] .m-pantry { --rc: #4fcf98; --rcs: #10352a; }
[data-theme="dark"] .r-qc, [data-theme="dark"] .m-qc { --rc: #b394ea; --rcs: #2a2142; }
[data-theme="dark"] .avatar.r-admin { background: linear-gradient(135deg, #2f6190, #1b3a57); }
[data-theme="dark"] .avatar.r-pic_laundry { background: linear-gradient(135deg, #2f78b5, #1b4a73); }
[data-theme="dark"] .avatar.r-pic_meals { background: linear-gradient(135deg, #c27a2c, #7d4a14); }
[data-theme="dark"] .avatar.r-pic_pantry { background: linear-gradient(135deg, #1d9a68, #0f5e3e); }
[data-theme="dark"] .avatar.r-qc { background: linear-gradient(135deg, #8a62c8, #4f3283); }

/* latar & permukaan */
[data-theme="dark"] body { background-color: var(--bg); }
html[data-theme="dark"]:not([data-fx=off]) body { background-image: radial-gradient(60% 50% at 8% 0%, rgba(91, 143, 191, .12), transparent 70%), radial-gradient(50% 45% at 100% 12%, rgba(214, 171, 114, .07), transparent 70%); }
html[data-theme="dark"]:not([data-fx=off]) .card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .3), 0 14px 28px -14px rgba(0, 0, 0, .55); }
html[data-theme="dark"]:not([data-fx=off]) .card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 2px 4px rgba(0, 0, 0, .35), 0 22px 38px -16px rgba(0, 0, 0, .7); }
[data-theme="dark"] .tilt-glare { background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .14), transparent 62%); }
[data-theme="dark"] .topbar { background: rgba(10, 19, 29, .82); border-bottom-color: rgba(33, 53, 73, .9); }
[data-theme="dark"] .sidebar { background: radial-gradient(120% 70% at 0% 0%, #1d3d5e 0%, transparent 60%), linear-gradient(180deg, #0f2236 0%, #08111b 100%); border-right: 1px solid #172a3d; }
[data-theme="dark"] .sec-nav, [data-theme="dark"] .tl-savebar, [data-theme="dark"] .pin-bar { background: rgba(16, 29, 43, .92); }
@media (max-width: 1024px) {
  [data-theme="dark"] .tabbar { background: rgba(12, 22, 33, .95); box-shadow: 0 -8px 30px rgba(0, 0, 0, .4); }
  [data-theme="dark"] .tab em { box-shadow: 0 0 0 2px #0c1621; }
  [data-theme="dark"] .tab-fab .tab-ic { box-shadow: 0 8px 20px rgba(184, 138, 88, .35), 0 0 0 5px rgba(12, 22, 33, .95); }
  [data-theme="dark"] .tab-fab.active .tab-ic { background: linear-gradient(135deg, #2f6190, #1b3a57); box-shadow: 0 8px 20px rgba(0, 0, 0, .5), 0 0 0 5px rgba(12, 22, 33, .95); }
  [data-theme="dark"] .auth-form-side { background: linear-gradient(180deg, #0f2236 0, #0f2236 220px, var(--bg) 220px); }
}
[data-theme="dark"] kbd,
[data-theme="dark"] .period-pick, [data-theme="dark"] .btn-ghost, [data-theme="dark"] .btn-danger-ghost,
[data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea,
[data-theme="dark"] .grid th, [data-theme="dark"] .grid td, [data-theme="dark"] .grid .s,
[data-theme="dark"] .day-chips button, [data-theme="dark"] .day-item, [data-theme="dark"] .day-item input.cell:focus,
[data-theme="dark"] .modal, [data-theme="dark"] .mrow, [data-theme="dark"] .mrow input, [data-theme="dark"] .mrow select,
[data-theme="dark"] .madd input, [data-theme="dark"] .madd select, [data-theme="dark"] .stepper li.on i,
[data-theme="dark"] .auth-card, [data-theme="dark"] .setup-card, [data-theme="dark"] .pdf-box, [data-theme="dark"] .fx-stat,
[data-theme="dark"] .fx-search, [data-theme="dark"] .fx-filter select, [data-theme="dark"] .fx-card, [data-theme="dark"] .pill span,
[data-theme="dark"] .sr span, [data-theme="dark"] .pwa-sheet, [data-theme="dark"] .tf-box, [data-theme="dark"] .tl-in,
[data-theme="dark"] .bell-pop, [data-theme="dark"] .fsum > div, [data-theme="dark"] .grid input.cell:focus { background-color: var(--card); }
[data-theme="dark"] .auth-body, [data-theme="dark"] .install-body { background: var(--bg); }
[data-theme="dark"] .logo-tile, [data-theme="dark"] .brand-logo { background: #fff; }
[data-theme="dark"] .sg, [data-theme="dark"] .madd, [data-theme="dark"] .dropzone, [data-theme="dark"] .grid-hint,
[data-theme="dark"] .day-item input.cell, [data-theme="dark"] .tbl tr.sub td, [data-theme="dark"] .timeline p,
[data-theme="dark"] .tbl tbody tr:hover, [data-theme="dark"] .bp-item.unread { background: var(--line-2); }
[data-theme="dark"] .field input:hover, [data-theme="dark"] .field select:hover, [data-theme="dark"] .field textarea:hover, [data-theme="dark"] .tl-in:hover:not(:disabled) { border-color: #335170; }
[data-theme="dark"] .field input:disabled, [data-theme="dark"] .tl-in:disabled { background: var(--line-2); }
[data-theme="dark"] .btn-danger-ghost { border-color: #5a2a30; }
[data-theme="dark"] .btn-primary, [data-theme="dark"] .day-chips button.active, [data-theme="dark"] .pill input:checked + span,
[data-theme="dark"] .sec-thumb, [data-theme="dark"] .seg-thumb, [data-theme="dark"] .sec-no, [data-theme="dark"] .tf-box.res { background: linear-gradient(135deg, #3a74ad 0%, #1d4369 100%); color: #fff; }
[data-theme="dark"] .grid th.mon { background: linear-gradient(90deg, #1b3a57, #2f6190); }
html[data-theme="dark"]:not([data-fx=off]) .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 3px 0 #08182a, 0 12px 20px rgba(0, 0, 0, .45); }
html[data-theme="dark"]:not([data-fx=off]) .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 5px 0 #08182a, 0 18px 26px rgba(0, 0, 0, .5); }
html[data-theme="dark"]:not([data-fx=off]) .btn-ghost { box-shadow: 0 2px 0 #08121c, 0 8px 14px -8px rgba(0, 0, 0, .6); }
html[data-theme="dark"]:not([data-fx=off]) .btn-ghost:hover { box-shadow: 0 4px 0 #08121c, 0 14px 20px -10px rgba(0, 0, 0, .7); }
[data-theme="dark"] .btn-ghost { color: var(--ink); }
[data-theme="dark"] .btn-ghost.loading::after, [data-theme="dark"] .btn-danger-ghost.loading::after { border-color: rgba(255, 255, 255, .2); border-top-color: #fff; }
[data-theme="dark"] .dash-hero { background: radial-gradient(90% 140% at 100% 0%, rgba(214, 171, 114, .3) 0%, transparent 55%), linear-gradient(120deg, #11263b 0%, #1f4a73 100%); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); border: 1px solid #1d3550; }
[data-theme="dark"] .dash-hero h2 { color: #fff; }
[data-theme="dark"] .scrim { background: rgba(0, 0, 0, .6); }
[data-theme="dark"] .modal { box-shadow: 0 30px 80px rgba(0, 0, 0, .7); border: 1px solid var(--line); }
[data-theme="dark"] .toast { background: #1d3550; }
[data-theme="dark"] code { background: var(--blue-soft); color: var(--navy); }
[data-theme="dark"] ::selection { background: rgba(103, 160, 216, .35); }

/* teks status berwarna (kontras di latar gelap) */
[data-theme="dark"] .alert-error { border-color: #5a2a30; color: #ffb3b3; }
[data-theme="dark"] .alert-ok { border-color: #1d5a43; color: #9fe6c6; }
[data-theme="dark"] .alert-warn { border-color: #5e4519; color: #f7d08f; }
[data-theme="dark"] .alert-lock, [data-theme="dark"] .alert-info { border-color: #24476a; color: var(--navy); }
[data-theme="dark"] .st-draft { background: var(--line-2); color: var(--muted); }
[data-theme="dark"] .st-submitted, [data-theme="dark"] .chip.warn, [data-theme="dark"] .chip.fst-progress { color: #f2c477; }
[data-theme="dark"] .st-verified, [data-theme="dark"] .chip.ok, [data-theme="dark"] .chip.fst-closed, [data-theme="dark"] .kv.r-ok, [data-theme="dark"] .seal b, [data-theme="dark"] .sb-done b { color: #7ee0b3; }
[data-theme="dark"] .st-returned, [data-theme="dark"] .chip.bad, [data-theme="dark"] .chip.sev-critical, [data-theme="dark"] .kv.r-nok, [data-theme="dark"] .qe-dev { color: #ffadad; }
[data-theme="dark"] .chip.sev-medium { color: #e9bf8b; }
[data-theme="dark"] .chip.sev-high, [data-theme="dark"] .sr.sev-high input:checked + span { background: #3d2812; color: #f6b36a; }
[data-theme="dark"] .chip.fst-open, [data-theme="dark"] .sr.fst-open input:checked + span { background: #3d2219; color: #f6a58c; }
[data-theme="dark"] .chip.warnc { background: #3a2a14; color: #f0c98d; }
[data-theme="dark"] .sr.fst-closed input:checked + span { color: #7ee0b3; }
[data-theme="dark"] .fsum .warn { border-color: #5e4519; } [data-theme="dark"] .fsum .bad { border-color: #5a2a30; }
[data-theme="dark"] .fx-status-strip .fs-open { background: #3d2219; }
[data-theme="dark"] .fx-status-strip .fs-open b { color: #f6a58c; } [data-theme="dark"] .fx-status-strip .fs-closed b { color: #7ee0b3; }
[data-theme="dark"] .cs-warn { color: #f7d08f; }
[data-theme="dark"] .pin-row.has input { border-color: #22654a; color: #8fe5bf; }
[data-theme="dark"] .cal-d.ok { border-color: #1d5a43; color: #8fe5bf; }
[data-theme="dark"] .cal-d.miss { border-color: #6a2f36; color: #ffadad; }
[data-theme="dark"] .qs-card.warn { border-color: #5e4519; }
[data-theme="dark"] .qf-check:has(.t-nok input:checked) { border-color: #6a2f36; }
[data-theme="dark"] .tri .t-na input:checked + span { background: #4c5e72; }
[data-theme="dark"] .f-ic.xl { background: #10342a; color: #4fcf98; }
[data-theme="dark"] .f-ic.pdf { background: #3a1b20; color: #f58a8a; }
[data-theme="dark"] .det-in.chg { border-color: var(--gold); }
[data-theme="dark"] .switch span { background: #2b4058; }
[data-theme="dark"] .ap-img, [data-theme="dark"] .qf-photos, [data-theme="dark"] .dropzone { border-color: #2e4862; }
[data-theme="dark"] .hc.miss { box-shadow: inset 0 0 0 1px rgba(240, 114, 114, .35); }
[data-theme="dark"] .home-hero .chip.ok { color: #bff0d8; } [data-theme="dark"] .home-hero .chip.warn { color: #ffe1b8; } [data-theme="dark"] .home-hero .chip.bad { color: #ffd0d0; }

/* grid bulanan admin */
[data-theme="dark"] .grid thead th { background: #13263a; color: var(--navy); }
[data-theme="dark"] .grid thead .s, [data-theme="dark"] .grid tfoot td, [data-theme="dark"] .grid tr.sub td.s,
[data-theme="dark"] .grid tr.sub td.plan, [data-theme="dark"] .grid tr.sub td.tot, [data-theme="dark"] .grid tr.sub td.pc, [data-theme="dark"] .grid th.tc { background: #15304b; color: var(--navy); }
[data-theme="dark"] .grid th.dh.wk, [data-theme="dark"] .grid td.dc.wk { background: #1f1b14; }
[data-theme="dark"] .grid td.dc.has { background: #142b42; }
[data-theme="dark"] .grid td.dc.has.wk { background: #2b2316; }
[data-theme="dark"] .grid td.tot, [data-theme="dark"] .grid td.avg, [data-theme="dark"] .grid td.pc, [data-theme="dark"] .grid td.plan, [data-theme="dark"] .grid td.frq,
[data-theme="dark"] .grid tr.sub td, [data-theme="dark"] .grid tfoot tr.sum.minor td { background: #122233; }
[data-theme="dark"] .grid tfoot tr.sum.minor td.s { background: #142638; }
[data-theme="dark"] .grid tfoot td, [data-theme="dark"] .grid tr.sub td { border-top-color: #2a4560; }
[data-theme="dark"] .grid tr.grp td { border-top-color: #2a4560; }
[data-theme="dark"] .mrow.dirty, [data-theme="dark"] .tl-table tr.dirty .tl-in { background: #2a2216; }

/* 3D & grafik */
[data-theme="dark"] .j3d-legend.inline { color: #a9bccf; }
[data-theme="dark"] .j3d-legend.list button { color: #c3d3e3; }
[data-theme="dark"] .j3d-reset { background: rgba(16, 29, 43, .9); }
[data-theme="dark"] .fx-cube .cube i { border-color: rgba(255, 255, 255, .22); }

/* pratinjau laporan tetap seperti kertas putih */
[data-theme="dark"] .rslot { box-shadow: 0 10px 34px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06); }
[data-theme="dark"] .rpage, [data-theme="dark"] .rslot {
  color-scheme: light;
  --ink: #14283c; --navy: #1b3a57; --navy-2: #234a6e; --blue: #2f6190; --blue-2: #5b8fbf; --blue-soft: #e8f0f8;
  --gold: #b88a58; --gold-2: #d6ab72; --gold-soft: #f8efe3; --card: #fff; --line: #e2e8ef; --line-2: #eef2f6;
  --text: #1c2b3a; --muted: #6a7b8e; --ok: #1d9a68; --ok-soft: #e3f5ec; --warn: #c9811a; --warn-soft: #fdf0dc; --bad: #d14343; --bad-soft: #fbe8e8;
}
@media print {
  :root[data-theme="dark"] {
    color-scheme: light;
    --ink: #14283c; --navy: #1b3a57; --navy-2: #234a6e; --blue: #2f6190; --blue-2: #5b8fbf; --blue-soft: #e8f0f8;
    --gold: #b88a58; --gold-2: #d6ab72; --gold-soft: #f8efe3; --bg: #fff; --card: #fff; --line: #e2e8ef; --line-2: #eef2f6;
    --text: #1c2b3a; --muted: #6a7b8e; --ok: #1d9a68; --ok-soft: #e3f5ec; --warn: #c9811a; --warn-soft: #fdf0dc; --bad: #d14343; --bad-soft: #fbe8e8;
  }
}
.kpi-grid.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1280px) { .kpi-grid.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hist { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
.hist-h { grid-column: 1 / -1; }
.hist-d { grid-column: 1; }
.hist-f { grid-column: 2; grid-row: 2; align-self: start; margin-top: 8px; }
.cal-d.ok.wk b, .cal-d.miss.wk b { color: inherit; }
.day-strip { position: relative; }
[data-theme="dark"] .install-card { background: linear-gradient(135deg, var(--card), var(--gold-soft)); border-color: #4a3a24; }
[data-theme="dark"] .install-card b { color: var(--ink); }
[data-theme="dark"] .install-card img { background: #fff; }
[data-theme="dark"] .grid th.dh.wk, [data-theme="dark"] .grid td.dc.wk { background: #1a1a17; }
.top-title h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-theme { display: none; color: #cfdcea; }
.sidebar .theme-btn { color: #cfdcea; }
.pin-help { display: block; }
.pin-help .ic { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.ph-main .chip, .ib-main .chip, .ht .chip, .dh-main .chip { white-space: normal; }
.ht p { display: block; }
.ht p .ic { display: inline-block; vertical-align: -2px; }
.ph-txt p.tiny { display: block; }
@media (max-width: 1024px) { .side-theme { display: inline-grid; } }
@media (max-width: 720px) {
  .top-actions { gap: 6px; }
  .top-actions > .theme-btn, .top-me { display: none; }
}
.modal-b .qf-actions { bottom: -22px; margin: 0 -22px -22px; padding: 12px 22px 16px; }
.num-in em:empty { display: none; }
.bp-item.t-submit_meals i { background: #fbefe0; color: #b8742b; }
.bp-item.t-submit_laundry i { background: #e4f0fb; color: #2f78b5; }
.bp-item.t-submit_pantry i { background: #e1f4ea; color: #1d8f62; }
.bp-item.t-submit_qc i { background: #efe8fa; color: #7450b0; }
.bp-item.t-account i { background: var(--gold-soft); color: var(--gold); }
.bp-item.t-reopen i { background: var(--warn-soft); color: var(--warn); }
[data-theme="dark"] .bp-item.t-submit_meals i { background: #3a2815; color: #e9a35a; }
[data-theme="dark"] .bp-item.t-submit_laundry i { background: #12304a; color: #6db3f0; }
[data-theme="dark"] .bp-item.t-submit_pantry i { background: #10352a; color: #4fcf98; }
[data-theme="dark"] .bp-item.t-submit_qc i { background: #2a2142; color: #b394ea; }
/* laporan QC: matriks lembar harian & evidence ringkas */
.rg.qmx th, .rg.qmx td { height: 15.5px; padding: 1px; font-size: 7.5px; }
.rg.qmx th { font-size: 7px; height: 24px; }
.rg.qmx th.lb { width: 175px; }
.rg.qmx td.lb { font-size: 7.5px; }
.rg.qmx tr.grp td { background: #eef4fa; color: var(--navy); font-size: 8px; }
.qev { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.qev-c { border: 1px solid #e1e8ef; border-top: 3px solid #1d9a68; border-radius: 6px; overflow: hidden; break-inside: avoid; background: #fff; }
.qev-c.nok { border-top-color: #d14343; }
.qev-p { position: relative; height: 128px; background: #f2f5f8 center / cover no-repeat; }
.qev-p i { position: absolute; right: 5px; top: 5px; padding: 1px 6px; border-radius: 8px; background: rgba(27, 58, 87, .85); color: #fff; font-style: normal; font-size: 8px; font-weight: 700; }
.qev-t { display: grid; gap: 1px; padding: 5px 7px 6px; font-size: 8.5px; line-height: 1.3; }
.qev-t b { color: var(--navy); font-size: 8.5px; }
.qev-t span { color: #33465a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qev-t em { font-style: normal; font-weight: 650; color: #14774f; font-size: 8px; }
.qev-c.nok .qev-t em { color: #b13434; }
/* laporan harian QC (PDF) */
.qd-status { display: grid; grid-template-columns: 1.1fr 1.4fr 1.1fr; gap: 8px; margin-bottom: 4px; }
.qd-status > div { padding: 8px 10px; border-radius: 8px; background: #f3f6fa; border-left: 3px solid var(--navy); display: grid; gap: 1px; }
.qd-status > div.ok { background: #e3f5ec; border-left-color: #1d9a68; }
.qd-status > div.warn { background: #fdf0dc; border-left-color: #c9811a; }
.qd-status > div.wide { grid-column: 1 / -1; }
.qd-status span { font-size: 7.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: #6a7b8e; }
.qd-status b { font-size: 11px; color: var(--ink); }
.qd-status b.n { font-size: 9.5px; font-weight: 500; }
.qd-status small { font-size: 8px; color: #6a7b8e; }
.rinfo.ok { padding: 8px 10px; border-radius: 8px; background: #e3f5ec; color: #14774f; font-size: 9.5px; margin-top: 0; }
.qdev td { vertical-align: top; }
.qd-sec { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 6px; padding: 4px 8px; border-left: 3px solid var(--gold); background: #f8f1e7; border-radius: 3px; }
.qd-sec b { font-size: 10.5px; color: var(--navy); }
.qd-sec span { font-size: 8px; color: #6a7b8e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qd-card { border: 1px solid #dfe6ee; border-left: 3px solid #1d9a68; border-radius: 6px; padding: 7px 9px 8px; margin-bottom: 8px; break-inside: avoid; background: #fff; }
.qd-card.nok { border-left-color: #d14343; background: #fffafa; }
.qd-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.qd-h b { font-size: 10.5px; color: var(--ink); }
.qd-h span { flex: 1; font-size: 8px; color: #6a7b8e; }
.qd-h em { font-style: normal; font-size: 8px; font-weight: 700; padding: 1px 7px; border-radius: 8px; background: #e3f5ec; color: #14774f; }
.qd-h em.bad { background: #fbe8e8; color: #b13434; }
.qd-h em.na { background: #eef2f6; color: #6a7b8e; }
.qd-kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; margin-bottom: 4px; }
.qd-kv div { padding: 3px 6px; border-radius: 4px; background: #f3f6fa; min-width: 0; }
.qd-kv span { display: block; font-size: 7px; text-transform: uppercase; letter-spacing: .04em; color: #7a8a9c; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qd-kv b { display: block; font-size: 9px; color: var(--ink); font-weight: 650; }
.qd-kv b.qok { color: #14774f; } .qd-kv b.qbad { color: #b13434; }
.qd-ck { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 12px; font-size: 8.5px; color: #33465a; }
.qd-ck li { display: flex; gap: 5px; align-items: baseline; line-height: 1.35; }
.qd-ck i { flex: none; width: 11px; font-style: normal; font-weight: 800; text-align: center; }
.qd-ck li.ok i { color: #1d9a68; } .qd-ck li.nok { color: #b13434; font-weight: 650; } .qd-ck li.nok i { color: #d14343; } .qd-ck li.na i { color: #9aa8b6; }
.qd-note { margin: 4px 0; padding: 4px 7px; border-radius: 4px; background: #f8f1e7; font-size: 8.5px; color: #4a3a24; }
.qd-phs { display: flex; gap: 6px; margin-top: 5px; }
.qd-ph { position: relative; width: 108px; height: 74px; border-radius: 4px; border: 1px solid #e1e8ef; background: #f2f5f8 center / cover no-repeat; }
.qd-ph i { position: absolute; left: 3px; top: 3px; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 7px; background: rgba(27, 58, 87, .85); color: #fff; font-style: normal; font-size: 7.5px; font-weight: 700; text-align: center; line-height: 13px; }
.qd-noph { margin-top: 4px; font-size: 8px; color: #c9811a; font-weight: 650; }
.qev.qev3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.qev3 .qev-p { height: 178px; background-size: cover; }
.dl-day { border-top: 3px solid var(--rc, #7450b0); }
.dl-day .dd-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #efe8fa; color: #7450b0; }
[data-theme="dark"] .dl-day .dd-ic { background: #2a2142; color: #b394ea; }
.dd-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.dd-row .field { flex: 1 1 320px; }
.dd-act { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 720px) { .dd-act { width: 100%; } .dd-act .btn { flex: 1; } }
.qc-head:has(.qc-admin-act) .qc-admin-act { flex-basis: 100%; padding-top: 12px; border-top: 1px solid var(--line-2); }
@media (min-width: 721px) { .qc-head:has(.qc-admin-act) .qc-admin-act { justify-content: flex-end; } }
/* unduhan QC (menu Quality Control) */
.qc-dl { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; border-left: 4px solid #7450b0; }
.qc-dl .qd-i { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; }
.qc-dl .qd-ic { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: #efe8fa; color: #7450b0; }
[data-theme="dark"] .qc-dl .qd-ic { background: #2a2142; color: #b394ea; }
.qc-dl .qd-i b { display: block; font-size: 15px; color: var(--ink); }
.qc-dl .qd-i small { font-size: 12.5px; color: var(--muted); }
.qc-dl .qd-g { display: flex; gap: 12px; flex-wrap: wrap; }
.qc-dl .qd-b { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--line-2); }
.qc-dl .qd-b > span { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.qc-dl .qd-b > div { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 720px) { .qc-dl .qd-g, .qc-dl .qd-b { width: 100%; } .qc-dl .qd-b .btn { flex: 1; } }

/* ==========================================================================
   Data Supplier
   ========================================================================== */
.sup-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; border-top: 3px solid var(--gold); }
.sup-head .sh-ic { flex: none; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--gold-2), var(--gold)); box-shadow: 0 10px 22px -8px rgba(184, 138, 88, .7); }
.sup-head .sh-t { flex: 1 1 320px; min-width: 0; }
.sup-head h2 { font-size: 22px; margin-top: 2px; }
.sup-head p { color: var(--muted); font-size: 13.5px; margin-top: 4px; max-width: 720px; }
.sup-head .sh-act { display: flex; gap: 8px; flex-wrap: wrap; }
.sup-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.sk { display: grid; gap: 1px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--blue-2); box-shadow: var(--shadow-1); min-width: 0; }
.sk span { font-size: 12px; font-weight: 650; color: var(--muted); }
.sk b { font-size: 24px; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.sk small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk.ok { border-top-color: var(--ok); } .sk.warn { border-top-color: var(--warn); } .sk.muted { border-top-color: #9aa8b6; } .sk.bad { border-top-color: var(--bad); }
.sup-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; }
.sup-tools select { height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); font-weight: 550; max-width: 220px; }
.sup-count { margin-left: auto; font-size: 12.5px; font-weight: 650; color: var(--muted); white-space: nowrap; }
.sup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.sup-card { display: flex; flex-direction: column; gap: 10px; border-top: 3px solid var(--ok); animation: itemIn .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.sup-card.st-evaluasi { border-top-color: var(--warn); }
.sup-card.st-nonaktif { border-top-color: #9aa8b6; opacity: .82; }
.sup-card.flash { animation: supFlash 1.4s var(--ease); }
@keyframes supFlash { 0% { box-shadow: 0 0 0 0 rgba(184, 138, 88, .7); } 100% { box-shadow: 0 0 0 14px rgba(184, 138, 88, 0); } }
.sup-card header { display: flex; align-items: flex-start; gap: 12px; }
.sc-ic { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.sc-ic.j-basah { background: #e4f0fb; color: #2f78b5; } .sc-ic.j-kering { background: #fbefe0; color: #b8742b; } .sc-ic.j-campuran { background: #e1f4ea; color: #1d8f62; }
.sc-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sc-t small { font-size: 11px; font-weight: 750; letter-spacing: .06em; color: var(--gold); }
.sc-t b { font-size: 15.5px; color: var(--ink); line-height: 1.25; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.chip.j-basah { background: #e4f0fb; color: #2f78b5; } .chip.j-kering { background: #fbefe0; color: #9a5f1f; } .chip.j-campuran { background: #e1f4ea; color: #14774f; }
.chip.s-aktif { background: var(--ok-soft); color: #14774f; } .chip.s-evaluasi { background: var(--warn-soft); color: #9a6209; } .chip.s-nonaktif { background: var(--line-2); color: var(--muted); }
.sc-act { display: flex; gap: 2px; }
.sc-prod { font-size: 13px; color: var(--text); padding: 7px 10px; border-radius: 10px; background: var(--line-2); }
.sc-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.sc-contact li { display: inline-flex; align-items: flex-start; gap: 5px; min-width: 0; }
.sc-contact li.w { flex-basis: 100%; }
.sc-contact .ic { margin-top: 1px; color: var(--blue-2); }
.sc-certs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.sc-cert { display: grid; gap: 1px; padding: 6px 9px; border-radius: 9px; border: 1px solid var(--line); min-width: 0; }
.sc-cert span { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sc-cert b { font-size: 12.5px; color: var(--ink); word-break: break-word; }
.sc-cert em { font-style: normal; font-size: 11.5px; font-weight: 650; }
.cs-ok { color: var(--ok); } .cs-soon { color: var(--warn); } .cs-expired { color: var(--bad); } .cs-none { color: var(--muted); font-weight: 500 !important; }
.sup-card.cw-expired .sc-certs { padding: 4px; margin: -4px; border-radius: 12px; background: var(--bad-soft); }
.sup-card.cw-soon .sc-certs { padding: 4px; margin: -4px; border-radius: 12px; background: var(--warn-soft); }
.sup-card footer { margin-top: auto; padding-top: 9px; border-top: 1px dashed var(--line); display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.sc-qc { display: inline-flex; align-items: center; gap: 5px; }
.sc-qc .ic { color: #7450b0; }
.sc-qc b { color: var(--ink); }
.sc-note { font-style: italic; }
.sup-form .sf-h { margin: 6px 0 10px; padding-bottom: 5px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--gold); border-bottom: 1px solid var(--line-2); }
.sf-status { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.sf-status .sr { min-width: 130px; }
.sf-status .sr input { position: absolute; opacity: 0; pointer-events: none; }
.sf-status .sr { position: relative; flex: 1; }
.sf-status .s-aktif input:checked + span { background: var(--ok-soft); border-color: var(--ok); color: #14774f; }
.sf-status .s-evaluasi input:checked + span { background: var(--warn-soft); border-color: var(--warn); color: #9a6209; }
.sf-status .s-nonaktif input:checked + span { background: var(--line-2); border-color: #9aa8b6; color: var(--ink); }
[data-theme="dark"] .sc-ic.j-basah, [data-theme="dark"] .chip.j-basah { background: #12304a; color: #6db3f0; }
[data-theme="dark"] .sc-ic.j-kering, [data-theme="dark"] .chip.j-kering { background: #3a2815; color: #e9a35a; }
[data-theme="dark"] .sc-ic.j-campuran, [data-theme="dark"] .chip.j-campuran { background: #10352a; color: #4fcf98; }
[data-theme="dark"] .chip.s-aktif, [data-theme="dark"] .sf-status .s-aktif input:checked + span { color: #7ee0b3; }
[data-theme="dark"] .chip.s-evaluasi, [data-theme="dark"] .sf-status .s-evaluasi input:checked + span { color: #f2c477; }
@media (max-width: 1100px) { .sup-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .sup-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sup-grid { grid-template-columns: minmax(0, 1fr); }
  .sup-head .sh-act { width: 100%; } .sup-head .sh-act .btn { flex: 1; }
  .sup-head .sh-act .btn-primary { flex-basis: 100%; order: -1; }
  .sup-tools select { flex: 1 1 45%; max-width: none; }
  .sup-count { margin-left: 0; width: 100%; }
}
/* laporan PDF data supplier */
.rfst.st-none { background: #eef2f6; color: #6a7b8e; }
.sp-filter { margin: -4px 0 4px; }
.sp-tbl td { vertical-align: top; line-height: 1.35; }
.sp-tbl td.c { text-align: center; }
.sp-tbl td small { display: block; color: #6a7b8e; font-size: 8px; }
.sp-tbl td small.sp-n { font-style: italic; color: #8a6a3f; }
.sp-tbl td small.qbad { color: #b13434; }
.sp-tbl .sp-m { color: #2f6190; font-size: 8.5px; word-break: break-all; }
td.sp-code, small.sp-code { color: #b88a58; font-weight: 700; font-size: 8.5px; }
small.sp-code { display: block; }
.sp-c { font-size: 8.5px; }
.sp-c span { font-weight: 700; color: #6a7b8e; font-size: 7.5px; text-transform: uppercase; letter-spacing: .04em; }
.sp-c em { font-style: normal; font-weight: 650; }
.sp-c em.cs-ok { color: #14774f; } .sp-c em.cs-soon { color: #b4640b; } .sp-c em.cs-expired { color: #b13434; } .sp-c em.cs-none { color: #6a7b8e; }
.sc-qc { display: block; line-height: 1.5; }
.sc-qc .ic { display: inline-block; vertical-align: -3px; margin-right: 4px; }
.sc-certs { align-items: start; }
/* saat membuat PDF: angka tabular membuat html2canvas memberi jarak pada "-" dan ":" (mis. "SUP- 002", "07 :13") */
body.capturing .rpage, body.capturing .rpage * { font-variant-numeric: normal !important; font-feature-settings: normal !important; }

/* ==========================================================================
   v3.1 — DESAIN KACA MINIMALIS
   Menu ikon di atas, kartu kaca transparan, latar gradasi lembut warna JNP.
   (lapisan ini menimpa gaya sebelumnya; kerangka halaman & data tidak berubah)
   ========================================================================== */
:root {
  --bg: #edf1f6;
  --glass: rgba(255, 255, 255, .58);
  --glass-2: rgba(255, 255, 255, .78);
  --glass-brd: rgba(255, 255, 255, .72);
  --glass-hair: rgba(20, 40, 60, .07);
  --glass-blur: 22px;
  --glass-shadow: 0 1px 1px rgba(20, 40, 60, .03), 0 12px 32px -14px rgba(20, 40, 60, .2);
  --glass-shadow-h: 0 1px 1px rgba(20, 40, 60, .04), 0 22px 44px -18px rgba(20, 40, 60, .3);
  --radius: 20px;
  --pill: 999px;
  --nav-h: 62px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
:root[data-theme="dark"] {
  --bg: #070f18;
  --glass: rgba(15, 28, 43, .56);
  --glass-2: rgba(17, 31, 47, .82);
  --glass-brd: rgba(255, 255, 255, .08);
  --glass-hair: rgba(0, 0, 0, .25);
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 14px 36px -16px rgba(0, 0, 0, .7);
  --glass-shadow-h: 0 1px 1px rgba(0, 0, 0, .25), 0 24px 48px -18px rgba(0, 0, 0, .85);
}

/* ---------- latar: gradasi abstrak lembut (biru baja + emas JNP) */
body.app, body.auth-body, body.install-body { background: var(--bg) !important; background-image: none !important; }
.bg-aura { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-aura i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .9; will-change: transform; }
.bg-aura .a1 { width: 62vmax; height: 62vmax; left: -18vmax; top: -24vmax; background: radial-gradient(circle at 50% 50%, rgba(47, 97, 144, .34), rgba(47, 97, 144, 0) 68%); }
.bg-aura .a2 { width: 52vmax; height: 52vmax; right: -16vmax; top: 8vmax; background: radial-gradient(circle at 50% 50%, rgba(214, 171, 114, .34), rgba(214, 171, 114, 0) 66%); }
.bg-aura .a3 { width: 58vmax; height: 58vmax; left: 18vmax; bottom: -30vmax; background: radial-gradient(circle at 50% 50%, rgba(91, 143, 191, .26), rgba(91, 143, 191, 0) 68%); }
[data-theme="dark"] .bg-aura .a1 { background: radial-gradient(circle, rgba(47, 97, 144, .42), rgba(47, 97, 144, 0) 68%); }
[data-theme="dark"] .bg-aura .a2 { background: radial-gradient(circle, rgba(184, 138, 88, .22), rgba(184, 138, 88, 0) 66%); }
[data-theme="dark"] .bg-aura .a3 { background: radial-gradient(circle, rgba(36, 74, 110, .45), rgba(36, 74, 110, 0) 68%); }
html[data-fx="full"] .bg-aura .a1 { animation: aura1 34s ease-in-out infinite alternate; }
html[data-fx="full"] .bg-aura .a2 { animation: aura2 40s ease-in-out infinite alternate; }
html[data-fx="full"] .bg-aura .a3 { animation: aura3 46s ease-in-out infinite alternate; }
@keyframes aura1 { to { transform: translate(8vmax, 6vmax) scale(1.08); } }
@keyframes aura2 { to { transform: translate(-7vmax, 9vmax) scale(.94); } }
@keyframes aura3 { to { transform: translate(-6vmax, -7vmax) scale(1.06); } }
.bg-aura::after { content: ""; position: absolute; inset: 0; opacity: .035; background-image: radial-gradient(rgba(20, 40, 60, .9) .6px, transparent .7px); background-size: 3px 3px; }
[data-theme="dark"] .bg-aura::after { opacity: .05; background-image: radial-gradient(rgba(255, 255, 255, .9) .6px, transparent .7px); }

/* ---------- kerangka: tanpa sidebar */
.app .shell { display: block; min-height: 0; position: relative; z-index: 1; }
.app .sidebar, .app .topbar { display: none !important; }
.app .main { min-height: calc(100vh - var(--nav-h)); }
.page-head { max-width: 1480px; margin: 0 auto; padding: 22px 28px 0; display: flex; align-items: flex-end; gap: 16px; }
.page-head .top-title h1 { font-size: 24px; font-weight: 720; letter-spacing: -.02em; color: var(--ink); }
.page-head .top-title p { margin-top: 3px; color: var(--muted); font-size: 13.5px; }
.app .content { max-width: 1480px; padding: 18px 28px 36px; position: relative; z-index: 1; }
.app .foot { position: relative; z-index: 1; }

/* ---------- bilah menu kaca di atas */
.gnav { position: sticky; top: 0; z-index: 80; padding: 12px 16px 0; pointer-events: none; }
.gnav-in { pointer-events: auto; max-width: 1480px; margin: 0 auto; height: var(--nav-h); display: flex; align-items: center; gap: 10px; padding: 0 10px 0 12px;
  background: var(--glass-2); backdrop-filter: blur(var(--glass-blur)) saturate(1.6); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  border: 1px solid var(--glass-brd); border-radius: 22px; box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .55); }
[data-theme="dark"] .gnav-in { box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .05); }
.g-brand { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 2px; border-radius: 14px; color: var(--ink); }
.g-brand:hover { text-decoration: none; }
.g-brand img { width: 38px; height: 38px; object-fit: contain; background: #fff; border-radius: 11px; padding: 4px; box-shadow: 0 2px 8px rgba(20, 40, 60, .12); }
.g-brand-t { display: grid; line-height: 1.15; }
.g-brand-t b { font-size: 13px; font-weight: 700; white-space: nowrap; }
.g-brand-t small { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.g-links { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 2px; }
.g-grp { display: flex; align-items: center; gap: 2px; }
.g-glbl { display: none; }
.g-sep { width: 1px; height: 22px; margin: 0 6px; background: linear-gradient(transparent, var(--line), transparent); flex: none; }
.g-item, .g-act > .icon-btn, .g-act > .bell, .g-me { position: relative; }
.g-item { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 13px; color: var(--muted); transition: color .25s, background .25s, transform .35s var(--spring); z-index: 1; }
.g-item:hover { text-decoration: none; color: var(--ink); }
.g-item:active { transform: scale(.9); }
.g-item .ic { stroke-width: 1.55; transition: transform .35s var(--spring); }
.g-item:hover .ic { transform: translateY(-1px) scale(1.06); }
.g-item.active { color: #fff; background: linear-gradient(140deg, #2f6190, #1b3a57); box-shadow: 0 6px 16px -6px rgba(27, 58, 87, .6), inset 0 1px 0 rgba(255, 255, 255, .18); }
.g-item.active::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 8px rgba(214, 171, 114, .9); }
.g-hov { position: absolute; z-index: 0; top: 50%; left: 0; width: 42px; height: 42px; margin-top: -21px; border-radius: 13px; background: rgba(47, 97, 144, .1); opacity: 0; transform: translateX(var(--hx, 0)); transition: transform .38s var(--ease-out), opacity .2s; pointer-events: none; }
[data-theme="dark"] .g-hov { background: rgba(255, 255, 255, .08); }
.g-links.hov .g-hov { opacity: 1; }
.g-badge { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: grid; place-items: center; font: 700 9.5px/1 var(--font); font-style: normal; color: #2b1d0c; background: linear-gradient(135deg, var(--gold-2), var(--gold)); box-shadow: 0 0 0 2px var(--glass-2); }
.g-lbl { position: absolute; left: 50%; top: calc(100% + 10px); z-index: 5; padding: 4px 9px; border-radius: 8px; white-space: nowrap; pointer-events: none;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: #fff; background: rgba(20, 40, 60, .88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px -6px rgba(10, 25, 45, .5); opacity: 0; transform: translate(-50%, -5px) scale(.96); transition: opacity .2s ease, transform .3s var(--ease-out); transition-delay: 0s; }
[data-theme="dark"] .g-lbl { background: rgba(230, 238, 247, .94); color: #102233; }
.g-item:hover .g-lbl, .g-item:focus-visible .g-lbl, .g-act:hover > .g-lbl, .g-act:focus-within > .g-lbl { opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: .12s; }
.bell-wrap.open > .g-lbl { opacity: 0 !important; }
.g-actions { flex: none; display: flex; align-items: center; gap: 4px; }
.g-act { position: relative; display: inline-flex; }
.g-actions .icon-btn { width: 40px; height: 40px; border-radius: 13px; color: var(--muted); }
.g-actions .icon-btn:hover { color: var(--ink); background: rgba(47, 97, 144, .1); }
[data-theme="dark"] .g-actions .icon-btn:hover { background: rgba(255, 255, 255, .08); }
.g-actions .icon-btn .ic { stroke-width: 1.55; }
.gnav .period-pick { height: 38px; padding: 0 12px; margin-right: 4px; border-radius: var(--pill); background: rgba(255, 255, 255, .55); border: 1px solid var(--glass-hair); box-shadow: none; color: var(--blue); }
[data-theme="dark"] .gnav .period-pick { background: rgba(255, 255, 255, .05); }
.gnav .period-pick select { font-size: 13px; }
.g-me { width: 42px; height: 42px; margin-left: 4px; border: 0; padding: 0; border-radius: 14px; background: none; display: grid; place-items: center; }
.g-me .avatar { box-shadow: 0 0 0 2px var(--glass-2), 0 0 0 3.5px var(--gold-2); transition: transform .35s var(--spring); }
.g-me:hover .avatar { transform: scale(1.06); }
.g-me-wrap { position: relative; }
.me-pop { position: absolute; right: 0; top: calc(100% + 12px); width: 270px; padding: 8px; border-radius: 18px; z-index: 120;
  background: var(--glass-2); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); border: 1px solid var(--glass-brd); box-shadow: 0 24px 60px -20px rgba(10, 25, 45, .45);
  transform-origin: top right; animation: popIn .26s var(--ease-out); }
.mp-h { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2); }
.mp-h b { display: block; font-size: 14px; color: var(--ink); }
.mp-h span { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.mp-i { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 11px; background: none; color: var(--text); font-size: 13.5px; font-weight: 550; text-align: left; transition: background .2s; }
.mp-i:hover { background: rgba(47, 97, 144, .09); text-decoration: none; }
.mp-i .ic { color: var(--muted); }
.mp-i.danger, .mp-i.danger .ic { color: var(--bad); }
.mp-i.danger:hover { background: var(--bad-soft); }
.gnav .bell-pop { top: calc(100% + 12px); background: var(--glass-2); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); border-color: var(--glass-brd); border-radius: 18px; }
.gnav .menu-btn { display: none; }

/* ---------- kaca untuk kartu & panel */
.card, .pin-grp, .qs-card, .sk, .rs, .filter-tabs, .sec-nav, .fx-stat, .tf-box, .fsum > div, .fx-filter, .auth-card, .setup-card, .install-card, .pin-bar, .tl-savebar {
  background-color: var(--glass) !important; backdrop-filter: blur(var(--glass-blur)) saturate(1.5); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  border: 1px solid var(--glass-brd) !important; box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .5) !important; }
[data-theme="dark"] .card, [data-theme="dark"] .pin-grp, [data-theme="dark"] .qs-card, [data-theme="dark"] .sk, [data-theme="dark"] .rs, [data-theme="dark"] .filter-tabs, [data-theme="dark"] .sec-nav,
[data-theme="dark"] .fx-stat, [data-theme="dark"] .tf-box, [data-theme="dark"] .fsum > div, [data-theme="dark"] .fx-filter, [data-theme="dark"] .auth-card, [data-theme="dark"] .setup-card,
[data-theme="dark"] .install-card, [data-theme="dark"] .pin-bar, [data-theme="dark"] .tl-savebar { box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .04) !important; }
.card { border-radius: var(--radius); }
html:not([data-fx=off]) .card:hover { box-shadow: var(--glass-shadow-h), inset 0 1px 0 rgba(255, 255, 255, .55) !important; }
/* sorotan cahaya mengikuti kursor pada kaca (tanpa mengubah posisi elemen) */
html[data-fx="full"] .card.lit { background-image: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .42), transparent 48%) !important; }
html[data-fx="full"][data-theme="dark"] .card.lit { background-image: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .06), transparent 48%) !important; }
.pin-grp .pg-h { background: rgba(232, 240, 248, .55); }
[data-theme="dark"] .pin-grp .pg-h { background: rgba(22, 48, 74, .4); }
.tbl tbody tr:hover { background: rgba(47, 97, 144, .05) !important; }
.rt, .tbl { background: transparent; }

/* ---------- tombol: pil minimalis */
.btn { border-radius: var(--pill); height: 42px; padding: 0 20px; font-weight: 620; letter-spacing: .005em; }
.btn-sm { height: 34px; padding: 0 14px; border-radius: var(--pill); }
.btn-primary, html:not([data-fx=off]) .btn-primary { background: linear-gradient(140deg, #2f6190 0%, #1b3a57 100%); box-shadow: 0 8px 20px -8px rgba(27, 58, 87, .65), inset 0 1px 0 rgba(255, 255, 255, .2) !important; transition: transform .3s var(--spring), box-shadow .3s, filter .2s; }
.btn-primary:hover, html:not([data-fx=off]) .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 14px 26px -10px rgba(27, 58, 87, .7), inset 0 1px 0 rgba(255, 255, 255, .24) !important; }
.btn-primary:active, html:not([data-fx=off]) .btn-primary:active { transform: scale(.96); box-shadow: 0 4px 10px -6px rgba(27, 58, 87, .6) !important; }
[data-theme="dark"] .btn-primary { background: linear-gradient(140deg, #3a74ad 0%, #1d4369 100%) !important; }
.btn-ghost, html:not([data-fx=off]) .btn-ghost { background: rgba(255, 255, 255, .55); border: 1px solid var(--glass-hair); box-shadow: 0 1px 2px rgba(20, 40, 60, .05) !important; color: var(--navy); transition: transform .3s var(--spring), background .2s, border-color .2s; }
.btn-ghost:hover, html:not([data-fx=off]) .btn-ghost:hover { background: rgba(255, 255, 255, .9); border-color: rgba(47, 97, 144, .25); transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(20, 40, 60, .3) !important; }
.btn-ghost:active, html:not([data-fx=off]) .btn-ghost:active { transform: scale(.96); }
[data-theme="dark"] .btn-ghost { background: rgba(255, 255, 255, .05) !important; color: var(--ink); }
[data-theme="dark"] .btn-ghost:hover { background: rgba(255, 255, 255, .1) !important; }
.btn-danger-ghost { background: rgba(255, 255, 255, .55); border-color: rgba(209, 67, 67, .25); }
[data-theme="dark"] .btn-danger-ghost { background: rgba(240, 114, 114, .06) !important; }
html[data-fx=full] .btn-primary::after { display: none; }
.dash-hero .btn-primary { background: linear-gradient(140deg, var(--gold-2), var(--gold)) !important; color: #2b1d0c; }
.dash-hero .btn-ghost { background: rgba(255, 255, 255, .12) !important; color: #fff; border-color: rgba(255, 255, 255, .25); }
.icon-btn { border-radius: 12px; }

/* ---------- input */
.field input, .field select, .field textarea, .pt-search, .fx-search, .sup-tools select, .fx-filter select, .uc-role select { background: rgba(255, 255, 255, .7) !important; border-color: var(--glass-hair) !important; border-radius: 13px; }
.field input:focus, .field select:focus, .field textarea:focus { background: #fff !important; border-color: var(--blue) !important; }
[data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea, [data-theme="dark"] .pt-search, [data-theme="dark"] .fx-search,
[data-theme="dark"] .sup-tools select, [data-theme="dark"] .fx-filter select, [data-theme="dark"] .uc-role select { background: rgba(255, 255, 255, .04) !important; border-color: rgba(255, 255, 255, .09) !important; }
[data-theme="dark"] .field input:focus, [data-theme="dark"] .field select:focus, [data-theme="dark"] .field textarea:focus { background: rgba(255, 255, 255, .07) !important; }

/* ---------- hero dashboard: kaca biru JNP */
.dash-hero { border-radius: 24px; background: linear-gradient(120deg, rgba(27, 58, 87, .94) 0%, rgba(47, 97, 144, .86) 100%), radial-gradient(90% 140% at 100% 0%, rgba(214, 171, 114, .45), transparent 55%);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 20px 44px -22px rgba(27, 58, 87, .7); }
.dash-hero::after { opacity: .6; }
.fx-shapes { display: none !important; }

/* ---------- popover, modal, toast */
.modal-back { background: rgba(10, 20, 32, .32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal { background: var(--glass-2) !important; backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); border: 1px solid var(--glass-brd); border-radius: 24px; box-shadow: 0 40px 90px -30px rgba(10, 25, 45, .55) !important; }
.modal-h { border-bottom-color: var(--line-2); }
.qf-actions, .det-edit .form-actions { background: transparent !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.toast { border-radius: 16px; background: rgba(20, 40, 60, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.bell-pop { border-radius: 18px; }

/* ---------- HP & layar sedang: menu jadi panel kaca */
@media (max-width: 1180px) {
  .g-brand-t { display: none; }
  .gnav .menu-btn { display: inline-grid; }
  .g-links { position: fixed; z-index: 90; left: 12px; right: 12px; top: calc(var(--nav-h) + 22px + env(safe-area-inset-top, 0px)); max-height: calc(100dvh - var(--nav-h) - 130px); overflow-y: auto;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 6px; padding: 14px; justify-content: stretch;
    background: var(--glass-2); backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); border: 1px solid var(--glass-brd); border-radius: 22px; box-shadow: 0 30px 70px -24px rgba(10, 25, 45, .5);
    opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.98); transform-origin: top center; transition: opacity .25s, transform .35s var(--ease-out), visibility 0s .35s; }
  body.menu-open .g-links { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .35s var(--ease-out); }
  .g-grp { display: contents; }
  .g-glbl { display: block; grid-column: 1 / -1; padding: 8px 4px 2px; font-size: 10.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
  .g-sep, .g-hov { display: none; }
  .g-item { width: auto; height: auto; min-height: 74px; padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 16px; }
  .g-item .g-lbl { position: static; opacity: 1; transform: none; padding: 0; background: none; box-shadow: none; backdrop-filter: none; color: inherit; font-size: 11px; font-weight: 600; white-space: normal; text-align: center; line-height: 1.2; }
  [data-theme="dark"] .g-item .g-lbl { background: none; color: inherit; }
  .g-item.active::after { display: none; }
  .g-item:not(.active) { background: rgba(47, 97, 144, .05); }
  .g-badge { top: 6px; right: 14px; }
  body.menu-open .scrim { opacity: 1; pointer-events: auto; background: rgba(10, 20, 32, .25); }
  body.menu-open { overflow: hidden; }
  .g-act > .g-lbl { display: none; }
}
@media (max-width: 1024px) {
  .gnav { padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 0; }
  .gnav-in { height: 56px; border-radius: 18px; }
  :root { --nav-h: 56px; }
  .page-head { padding: 16px 16px 0; }
  .page-head .top-title h1 { font-size: 20px; }
  .app .content { padding: 14px 16px 30px; }
  .app .content { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .sec-nav, .fx-filter { top: 74px; }
  .tabbar { margin: 0 10px calc(10px + env(safe-area-inset-bottom)); left: 0; right: 0; border-radius: 22px; padding: 6px 6px 6px !important; background: var(--glass-2) !important; backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); border: 1px solid var(--glass-brd) !important; box-shadow: 0 18px 40px -16px rgba(10, 25, 45, .45) !important; }
  .tab-fab .tab-ic { box-shadow: 0 8px 20px rgba(184, 138, 88, .45), 0 0 0 5px var(--glass-2) !important; }
}
@media (max-width: 720px) {
  .gnav .period-pick { padding: 0 9px; }
  .gnav .period-pick select { max-width: 104px; font-size: 12.5px; }
  .gnav .period-pick .ic { display: none; }
  .g-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-actions .theme-btn { display: none; }
  .page-head .top-title p { display: block; font-size: 12.5px; }
}
@media (min-width: 1181px) { .sec-nav, .fx-filter { top: 86px; } }
@media print { .gnav, .bg-aura { display: none !important; } }
/* aksen warna tetap tampil di atas kaca (garis tipis) */
.fx-stat { border-top: 2px solid var(--blue-2) !important; }
.fx-stat.st-o { border-top-color: #d6694f !important; } .fx-stat.st-p { border-top-color: var(--gold) !important; } .fx-stat.st-c { border-top-color: var(--ok) !important; }
.fx-stat.st-h { border-top-color: var(--bad) !important; } .fx-stat.st-w { border-top-color: #8d6a3f !important; }
.locked-card { border-left: 3px solid var(--ok) !important; }
.mod-card { border-top: 2px solid var(--rc) !important; }
.ib-item { border-left: 3px solid var(--rc) !important; }
.user-card.st-pending { border-top: 2px solid var(--warn) !important; }
.alert-card { border-left: 3px solid var(--warn) !important; }
.dl-day { border-top: 2px solid #7450b0 !important; }
.qc-dl { border-left: 3px solid #7450b0 !important; }
.sup-head { border-top: 2px solid var(--gold) !important; }
.sk { border-top: 2px solid var(--blue-2) !important; }
.sk.ok { border-top-color: var(--ok) !important; } .sk.warn { border-top-color: var(--warn) !important; } .sk.muted { border-top-color: #9aa8b6 !important; } .sk.bad { border-top-color: var(--bad) !important; }
.sup-card { border-top: 2px solid var(--ok) !important; }
.sup-card.st-evaluasi { border-top-color: var(--warn) !important; } .sup-card.st-nonaktif { border-top-color: #9aa8b6 !important; }
.qs-card.warn { background-color: rgba(253, 240, 220, .72) !important; }
[data-theme="dark"] .qs-card.warn { background-color: rgba(56, 42, 19, .6) !important; }
.fsum .warn { background-color: rgba(253, 240, 220, .72) !important; } .fsum .bad { background-color: rgba(251, 232, 232, .72) !important; }
[data-theme="dark"] .fsum .warn { background-color: rgba(56, 42, 19, .6) !important; } [data-theme="dark"] .fsum .bad { background-color: rgba(58, 27, 32, .6) !important; }
.fx-card { background: var(--glass) !important; border-color: var(--glass-brd); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }

/* ---------- motion v3.1: muncul dari buram ke tajam, berurutan (gaya video Glassy Dashboard) */
html:not([data-fx=off]) .js .reveal { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(10px); transform-origin: 50% 50%; }
html:not([data-fx=off]) .js .reveal.in { opacity: 1; transform: none; filter: none; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out), filter .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
html[data-fx="light"] .js .reveal { filter: none; }
html:not([data-fx=off]) .content { animation: pageBlurIn .7s var(--ease-out) both; }
@keyframes pageBlurIn { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: none; } }
html:not([data-fx=off]) body.leaving .content, html:not([data-fx=off]) body.leaving .page-head { opacity: 0; filter: blur(8px); transform: translateY(-6px) scale(.995); transition: opacity .22s ease, filter .22s ease, transform .22s ease; }
html:not([data-fx=off]) .page-head { animation: pageBlurIn .6s var(--ease-out) both; }
html:not([data-fx=off]) .page-head h1 { animation: titleIn .8s var(--ease-out) both; }
@keyframes titleIn { from { opacity: 0; letter-spacing: .02em; filter: blur(4px); } }
/* skeleton berkilau pada kotak grafik sebelum tergambar */
.chart-box.skel::before { content: ""; position: absolute; inset: 6px; border-radius: 14px; pointer-events: none; z-index: 0; transition: opacity .5s ease;
  background: linear-gradient(100deg, rgba(47, 97, 144, .05) 20%, rgba(255, 255, 255, .55) 40%, rgba(47, 97, 144, .05) 60%) 0 0 / 220% 100%, repeating-linear-gradient(90deg, transparent 0 7%, rgba(47, 97, 144, .07) 7% 11%, transparent 11% 15%);
  animation: skel 1.4s linear infinite; }
[data-theme="dark"] .chart-box.skel::before { background: linear-gradient(100deg, rgba(255, 255, 255, .02) 20%, rgba(255, 255, 255, .08) 40%, rgba(255, 255, 255, .02) 60%) 0 0 / 220% 100%; }
.chart-box.skel.drawn::before { opacity: 0; animation: none; }
@keyframes skel { to { background-position: -220% 0, 0 0; } }
/* angka KPI & cincin: sedikit membesar saat selesai menghitung */
html:not([data-fx=off]) .kpi-v { display: inline-block; }
/* item daftar & baris muncul berurutan */
html:not([data-fx=off]) .tbl tbody tr, html:not([data-fx=off]) .rt tbody tr { animation: rowBlur .55s var(--ease-out) both; }
@keyframes rowBlur { from { opacity: 0; transform: translateY(6px); filter: blur(4px); } }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1 !important; transform: none !important; filter: none !important; } .bg-aura i { animation: none !important; } }
.sfx-btn > span { display: grid; place-items: center; }
.sfx-btn .sfx-mute { display: none; }
.sfx-off .sfx-btn .sfx-on { display: none; }
.sfx-off .sfx-btn .sfx-mute { display: grid; color: var(--bad); }
.sfx-try { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ======================================================================
   v3.1 EFEK TOMBOL — Simpan (menyusut → cincin → centang) & Hapus (tong memakan label)
   ====================================================================== */
.btn { --ring-c: #fff; --ring-t: rgba(255,255,255,.28); }
.btn-ghost, .btn-danger-ghost, .btn-soft { --ring-c: var(--navy); --ring-t: rgba(27,58,87,.16); }
.btn-danger-ghost { --ring-c: #d64545; --ring-t: rgba(214,69,69,.18); }
[data-theme="dark"] .btn-ghost, [data-theme="dark"] .btn-soft { --ring-c: #fff; --ring-t: rgba(255,255,255,.18); }
.btn.mo, .btn.bin-run { transition: width .38s cubic-bezier(.65,0,.35,1), padding .38s cubic-bezier(.65,0,.35,1), border-radius .38s, transform .2s, background .25s, box-shadow .25s !important; }
.btn.mo { padding: 0 !important; border-radius: 999px !important; flex: none !important; overflow: visible; }
.btn-block.mo { margin-left: auto; margin-right: auto; display: flex; }
.btn.mo::after { display: none !important; }
.btn.mo > :not(.b-ring):not(.b-check) { opacity: 0 !important; transition: opacity .12s; }
.b-ring { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); pointer-events: none; opacity: 1 !important; animation: bRingSpin .9s linear infinite; }
.b-ring circle { fill: none; stroke: var(--ring-t); stroke-width: 3; }
.btn.mo .b-ring, .btn.bin-run .b-ring { inset: 0; width: 100%; height: 100%; }
.b-ring circle { stroke: var(--ring-c); stroke-linecap: round; stroke-dasharray: 138.2; stroke-dashoffset: 100; transform-origin: 50% 50%; transition: stroke-dashoffset .45s var(--ease); }
.btn.mo .b-ring, .btn.bin-run .b-ring { animation: bRingSpin .85s linear infinite; }
.btn.mo.ok .b-ring { animation: none; }
.btn.mo.ok .b-ring circle { stroke-dashoffset: 0; }
.btn.mo .b-ring circle { stroke-width: 2.6; }
.b-check { position: absolute; width: 20px; height: 20px; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 1 !important; }
.b-check path { fill: none; stroke: var(--ring-c); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; animation: bCheck .36s .08s var(--ease) forwards; }
.btn.mo.ok { transform: scale(1.06); }
.btn.mo.fail { animation: bShake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes bRingSpin { to { transform: rotate(360deg); } }
@keyframes bCheck { to { stroke-dashoffset: 0; } }
@keyframes bShake { 10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(3px); } 30%,50%,70% { transform: translateX(-5px); } 40%,60% { transform: translateX(5px); } }

/* Hapus: tong + huruf */
.btn.bin-run { justify-content: flex-start; padding-left: 14px; gap: 8px; overflow: hidden; pointer-events: none; }
.btn.bin-run .bb { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; z-index: 2; transition: transform .38s cubic-bezier(.65,0,.35,1); }
.btn.bin-run .bb .lid { transform-origin: 18% 70%; transition: transform .28s cubic-bezier(.34,1.56,.64,1); }
.btn.bin-run.open .bb .lid { transform: translate(-1px,-2px) rotate(-32deg); }
.btn.bin-run.open .bb { animation: bBinBob .5s .2s ease-in-out 2; }
.btn.bin-run .bl-w { display: inline-flex; white-space: pre; }
.btn.bin-run .bl { display: inline-block; }
.btn.bin-run.open .bl { animation: bLetter .5s calc(140ms + var(--k) * 45ms) cubic-bezier(.55,-.3,.7,.5) forwards; }
.btn.bin-run.shrink { padding: 0 !important; justify-content: center; border-radius: 999px !important; }
.btn.bin-run.shrink .bl-w { display: none; }
.btn.bin-run.ringing .bb { transform: scale(.82); }
@keyframes bLetter { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 45% { transform: translate(calc(var(--dx) * .5), -16px) rotate(-90deg) scale(.85); opacity: 1; } 100% { transform: translate(var(--dx), 2px) rotate(-200deg) scale(.2); opacity: 0; } }
@keyframes bBinBob { 50% { transform: translateY(-1.5px) rotate(-4deg); } }
/* sentuhan halus pada tombol hapus biasa */
.btn-danger-ghost:hover svg, [data-del]:hover svg { animation: bWiggle .45s ease; }
@keyframes bWiggle { 30% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } }
[data-fx="off"] .btn-danger-ghost:hover svg, [data-fx="off"] [data-del]:hover svg { animation: none; }
@media (prefers-reduced-motion: reduce) { .b-ring { animation-duration: 2s !important; } .btn.bin-run.open .bl { animation: none; opacity: 0; } }

/* ======================================================================
   v3.1 HALAMAN MASUK — kaca, captcha, lupa kata sandi
   ====================================================================== */
.auth-wrap { position: relative; z-index: 1; }
.auth-form-side { background: transparent !important; }
.auth-art { border-radius: 0 28px 28px 0; box-shadow: 20px 0 60px -30px rgba(20,40,60,.45); }
.r-key { --rc: #0f8070; --rcs: rgba(20,150,130,.1); }
.auth-role .rc-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--rc) 14%, transparent); color: var(--rc); flex: none; }
.cap-field > span:first-child { display: block; }
.cap-row { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; margin-top: 6px; }
.cap-img { display: block; width: 140px; height: 44px; border-radius: 12px; overflow: hidden; border: 1px solid var(--glass-brd, var(--line)); background: #f4f8fb; box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
[data-theme="dark"] .cap-img { background: #182636; }
.cap-img img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .25s, filter .3s; }
.cap-img img.re { opacity: .35; filter: blur(3px); }
.cap-img img:not([src]) { opacity: 0; }
.cap-re { width: 40px; height: 40px; flex: none; }
.cap-re:active svg { transform: rotate(-180deg); transition: transform .35s var(--ease); }
.cap-row input { height: 44px; min-width: 0; letter-spacing: .28em; font-weight: 700; text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 16px; }
.cap-row input::placeholder { letter-spacing: normal; font-weight: 500; text-transform: none; font-family: inherit; font-size: 14px; }
.cap-hint { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
@media (max-width: 400px) { .cap-row { grid-template-columns: 1fr auto; } .cap-img { width: 100%; height: 52px; } .cap-row input { grid-column: 1 / -1; } }
.auth-row { display: flex; justify-content: flex-end; margin: -2px 0 12px; }
.auth-forgot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--teal, #0f8070); }
.auth-forgot:hover { text-decoration: none; opacity: .8; }
.auth-forgot svg { transition: transform .3s var(--ease); }
.auth-forgot:hover svg { transform: rotate(-20deg); }
.sent-card { text-align: center; }
.sent-card .auth-back { display: flex; justify-content: flex-start; }
.sent-ic { width: 68px; height: 68px; border-radius: 22px; margin: 6px auto 16px; display: grid; place-items: center; color: #0f8070; background: rgba(20,150,130,.12); box-shadow: 0 0 0 8px rgba(20,150,130,.06); animation: sentPop .7s cubic-bezier(.34,1.56,.64,1) .2s both; }
.sent-ic.warn { color: #c0731e; background: rgba(214,140,40,.13); box-shadow: 0 0 0 8px rgba(214,140,40,.06); }
@keyframes sentPop { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }
.sent-card > .muted { margin: 6px 0 16px !important; line-height: 1.6; }
.sent-tips { text-align: left; margin: 0 0 18px; padding: 12px 14px 12px 30px; border-radius: 14px; background: color-mix(in srgb, var(--text) 4%, transparent); font-size: 13px; line-height: 1.6; color: var(--muted); }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 5px; align-items: center; margin: -6px 0 14px; }
.pw-meter i { height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--text) 10%, transparent); transition: background .3s; }
.pw-meter span { font-size: 11.5px; font-weight: 650; color: var(--muted); min-width: 70px; text-align: right; }
.pw-meter[data-s="1"] i:nth-child(-n+1) { background: #d64545; }
.pw-meter[data-s="2"] i:nth-child(-n+2) { background: #d68c28; }
.pw-meter[data-s="3"] i:nth-child(-n+3) { background: #1d8f62; }
.pw-meter[data-s="4"] i:nth-child(-n+4) { background: #0f8070; }
@media (max-width: 900px) { .auth-art { border-radius: 0 0 28px 28px; } }
/* pengaturan email SMTP */
.smtp-grid { display: grid; grid-template-columns: 1.4fr .6fr 1.3fr; gap: 0 16px; }
.smtp-grid > :nth-child(n+4) { grid-column: span 1; }
.smtp-grid > :nth-child(4), .smtp-grid > :nth-child(6), .smtp-grid > :nth-child(8) { grid-column: 1 / span 2; }
@media (max-width: 860px) { .smtp-grid { grid-template-columns: 1fr 1fr; } .smtp-grid > * { grid-column: auto !important; } .smtp-grid > :nth-child(1), .smtp-grid > :nth-child(3), .smtp-grid > :nth-child(8) { grid-column: 1 / -1 !important; } }
@media (max-width: 520px) { .smtp-grid { grid-template-columns: 1fr; } }
.seg-r { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid var(--glass-brd, var(--line)); margin-top: 6px; }
.seg-r label { position: relative; display: grid; place-items: center; padding: 6px 4px; border-radius: 10px; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; color: var(--muted); }
.seg-r input { position: absolute; opacity: 0; pointer-events: none; }
.seg-r b { font-size: 13px; font-weight: 650; }
.seg-r small { font-size: 10.5px; opacity: .75; }
.seg-r label:has(input:checked) { background: var(--card, #fff); color: var(--navy); box-shadow: 0 4px 14px -6px rgba(20,40,60,.35); }
[data-theme="dark"] .seg-r label:has(input:checked) { background: rgba(255,255,255,.12); color: #fff; }
.seg-r label:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 1px; }
.smtp-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.smtp-actions .smtp-to { flex: 1 1 240px; margin: 0; }
/* perbaikan: judul halaman selebar konten & tombol sekunder di hero tetap terbaca */
.page-head { width: 100%; box-sizing: border-box; }
.dash-hero .btn-ghost { color: #fff !important; background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.24) !important; }
.dash-hero .btn-ghost:hover { background: rgba(255,255,255,.2) !important; }
.smtp-preset { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; color: var(--muted); font-weight: 600; }