/* =====================================================================
   AMBS EXAM CARD — UI admin
   Hijau (utama) · Putih (sekunder) · Biru (aksen)
   ===================================================================== */
:root {
  --g900: #073b28; --g800: #0a5238; --g700: #0d6b47; --g600: #11845a; --g500: #14915f; --g400: #3fb283;
  --g100: #d6f0e3; --g50: #ecf8f2;
  --b700: #17588f; --b600: #1d6fb8; --b500: #2a86d1; --b100: #d8e9f8; --b50: #edf5fd;
  --ink: #12261e; --ink2: #33473f; --muted: #66786f; --line: #e2ebe6; --line2: #edf2ef;
  --bg: #f3f7f5; --card: #ffffff;
  --ok: #138a5e; --ok-bg: #e7f6ee;
  --warn: #b25e09; --warn-bg: #fff4e5;
  --bad: #c0392b; --bad-bg: #fdecea;
  --grad: linear-gradient(120deg, #0d6b47 0%, #14915f 45%, #1d6fb8 100%);
  --grad-soft: linear-gradient(120deg, #ecf8f2 0%, #edf5fd 100%);
  --r: 14px; --r-sm: 10px;
  --sh: 0 1px 2px rgba(10, 60, 40, .05), 0 4px 16px rgba(10, 60, 40, .06);
  --sh-lg: 0 10px 40px rgba(10, 60, 40, .14);
  --side: 264px;
  --font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); font-size: 14.5px; color: var(--ink); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--b600); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--line2); padding: 1px 6px; border-radius: 6px; font-size: .9em; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
.ic { width: 18px; height: 18px; stroke-width: 2; flex: none; vertical-align: middle; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.hide { display: none !important; }

/* ---- Layout -------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--side); flex: none; background: #fff; border-right: 1px solid var(--line);
  position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: 40;
  transition: transform .25s ease;
}
.brand { display: flex; gap: 12px; align-items: center; padding: 20px 20px 18px; border-bottom: 1px solid var(--line2); }
.brand img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 3px var(--g50); }
.brand strong { display: block; font-size: 15px; font-weight: 800; letter-spacing: .02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand span { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.nav { flex: 1; overflow-y: auto; padding: 12px 12px 20px; }
.nav-sec { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #93a39b; padding: 16px 12px 6px; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px;
  color: var(--ink2); font-weight: 500; text-decoration: none; margin: 1px 0; transition: background .15s, color .15s;
}
.nav a .ic { color: #8aa197; }
.nav a:hover { background: var(--g50); color: var(--g700); }
.nav a.active { background: var(--grad); color: #fff; box-shadow: 0 6px 16px rgba(17, 132, 90, .25); }
.nav a.active .ic { color: #fff; }
.nav .sub a { padding-left: 41px; font-size: 13.5px; }
.nav .sub a.active { background: var(--g50); color: var(--g700); box-shadow: none; font-weight: 700; }
.nav .sub a.active::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--g500); margin-left: -17px; margin-right: 5px; }
.side-foot { padding: 14px 16px; border-top: 1px solid var(--line2); font-size: 12px; color: var(--muted); }

.main { flex: 1; margin-left: var(--side); min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; height: 64px; background: rgba(255,255,255,.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 0 28px;
}
.topbar h1 { font-size: 18px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .menu-btn { display: none; }
.chip-year { font-size: 12.5px; font-weight: 600; background: var(--b50); color: var(--b700); padding: 5px 12px; border-radius: 99px; white-space: nowrap; }
.user-pill { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 12px; border-radius: 99px; border: 1px solid var(--line); background: #fff; }
.user-pill .who { text-align: right; line-height: 1.2; }
.user-pill .who b { display: block; font-size: 13px; }
.user-pill .who span { font-size: 11px; color: var(--muted); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.content { padding: 26px 28px 48px; max-width: 1400px; width: 100%; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h2 { font-size: 22px; font-weight: 800; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.page-head > * { min-width: 0; max-width: 100%; }
select { max-width: 100%; text-overflow: ellipsis; }
.backdrop { display: none; }

/* ---- Card / panel -------------------------------------------------- */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); }
.panel + .panel { margin-top: 20px; }
.grid > .panel + .panel, .grid > * > .panel:first-child { margin-top: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line2); flex-wrap: wrap; }
.panel-head h3 { font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.panel-head h3 .ic { color: var(--g600); }
.panel-body { padding: 20px; }
.grid { display: grid; gap: 20px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-side { grid-template-columns: minmax(0, 1fr) 360px; }

/* ---- Stat tile ----------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 18px 16px; box-shadow: var(--sh); }
.stat .lbl { font-size: 12.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stat .val { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat .val small { font-size: 15px; font-weight: 600; color: var(--muted); }
.stat .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.stat .chip { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--g50); color: var(--g600); }
.stat .chip.blue { background: var(--b50); color: var(--b600); }
.stat .chip.warn { background: var(--warn-bg); color: var(--warn); }
.stat .chip.bad { background: var(--bad-bg); color: var(--bad); }
.stat.hero { background: var(--grad); border: 0; color: #fff; }
.stat.hero .lbl, .stat.hero .sub, .stat.hero .val small { color: rgba(255,255,255,.85); }
.stat.hero .val { color: #fff; }
.stat.hero .chip { background: rgba(255,255,255,.18); color: #fff; }
.meter { height: 8px; background: rgba(255,255,255,.25); border-radius: 99px; margin-top: 10px; overflow: hidden; }
.meter i { display: block; height: 100%; background: #fff; border-radius: 99px; }

/* ---- Bar (statistik per kelas / sesi) ------------------------------ */
.bars { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 120px 1fr 92px; gap: 12px; align-items: center; font-size: 13px; }
.bar-row .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 12px; background: var(--line2); border-radius: 4px; position: relative; cursor: default; }
.bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 0 4px 4px 0; background: var(--g500); min-width: 2px; transition: width .6s ease; }
.bar-row .num { text-align: right; color: var(--ink2); font-variant-numeric: tabular-nums; }
.bar-row .num b { color: var(--ink); }
.bar-row:hover .bar-fill { background: var(--g700); }

/* ---- Tombol -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink2); font: 600 13.5px var(--font);
  cursor: pointer; text-decoration: none !important; transition: all .15s; white-space: nowrap;
}
.btn:hover { border-color: #c9d8d0; background: #fafcfb; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn .ic { width: 17px; height: 17px; }
.btn-primary { background: var(--grad); color: #fff; border: 0; box-shadow: 0 6px 16px rgba(17, 132, 90, .22); }
.btn-primary:hover { background: var(--grad); filter: brightness(1.06); }
.btn-green { background: var(--g600); border-color: var(--g600); color: #fff; }
.btn-green:hover { background: var(--g700); }
.btn-blue { background: var(--b600); border-color: var(--b600); color: #fff; }
.btn-blue:hover { background: var(--b700); }
.btn-soft { background: var(--g50); border-color: var(--g100); color: var(--g700); }
.btn-danger { color: var(--bad); }
.btn-danger:hover { background: var(--bad-bg); border-color: #f5c6c0; }
.btn-sm { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.btn-icon { width: 34px; height: 34px; padding: 0; border-radius: 9px; }
.btn-block { width: 100%; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---- Form ---------------------------------------------------------- */
.form-grid { display: grid; gap: 16px; }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.field > span { font-weight: 600; color: var(--ink2); }
.field small { color: var(--muted); font-size: 12px; }
.span-2 { grid-column: span 2; }
input[type=text], input[type=password], input[type=search], input[type=date], input[type=time], input[type=number], input[type=email], input[type=url], input:not([type]), select, textarea {
  width: 100%; height: 40px; padding: 0 12px; border: 1px solid #d6e2dc; border-radius: 10px; background: #fff;
  font: 500 14px var(--font); color: var(--ink); outline: none; transition: border .15s, box-shadow .15s;
}
textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--g400); box-shadow: 0 0 0 4px rgba(20, 145, 95, .12); }
input[readonly] { background: var(--line2); color: var(--ink2); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; cursor: pointer; }
.check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--g600); flex: none; }
input[type=checkbox] { accent-color: var(--g600); width: 16px; height: 16px; cursor: pointer; }
.input-icon { position: relative; }
.input-icon .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #93a39b; pointer-events: none; }
.input-icon input { padding-left: 38px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line2); }
.toolbar .grow { flex: 1 1 240px; }
.toolbar select { width: auto; min-width: 140px; }
.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.radio-card { position: relative; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; cursor: pointer; transition: all .15s; background: #fff; }
.radio-card input { position: absolute; opacity: 0; }
.radio-card b { display: block; font-size: 14px; }
.radio-card span { font-size: 12px; color: var(--muted); }
.radio-card:has(input:checked) { border-color: var(--g500); background: var(--g50); box-shadow: 0 0 0 3px rgba(20, 145, 95, .12); }
.radio-card .mini { display: flex; gap: 3px; margin-bottom: 10px; height: 46px; align-items: center; }
.radio-card .mini i { display: block; background: var(--grad); border-radius: 3px; opacity: .85; }

/* ---- Tabel --------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: #f8fbf9; padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: #f9fcfa; }
.tbl tr.selected { background: var(--g50) !important; }
.tbl .w-check { width: 40px; }
.tbl .actions { white-space: nowrap; text-align: right; }
.stu { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.stu img { width: 38px; height: 46px; border-radius: 8px; object-fit: cover; background: var(--g50); flex: none; }
.stu b { display: block; font-weight: 700; }
.stu span { font-size: 12px; color: var(--muted); }

.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b-ok { background: var(--ok-bg); color: var(--ok); }
.b-blue { background: var(--b50); color: var(--b600); }
.b-warn { background: var(--warn-bg); color: var(--warn); }
.b-bad { background: var(--bad-bg); color: var(--bad); }
.b-gray { background: var(--line2); color: var(--muted); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line2); flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.pager .btn-group a, .pager .btn-group span { min-width: 34px; }
.pager .cur { background: var(--g600); color: #fff; border-color: var(--g600); }

.selbar {
  position: sticky; bottom: 16px; z-index: 20; margin: 16px auto 0; max-width: 860px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px 12px 20px;
  background: var(--g900); color: #fff; border-radius: 14px; box-shadow: var(--sh-lg);
  animation: rise .25s ease;
}
.selbar b { flex: 1; }
.selbar .btn { height: 36px; }

/* ---- Alert / toast ------------------------------------------------- */
.alert { padding: 12px 16px; border-radius: 12px; font-size: 13.5px; margin-bottom: 16px; display: flex; gap: 10px; align-items: flex-start; border: 1px solid transparent; }
.alert-success { background: var(--ok-bg); color: #0b5e3e; border-color: #bfe6d2; }
.alert-danger { background: var(--bad-bg); color: #922b21; border-color: #f5c6c0; }
.alert-warning { background: var(--warn-bg); color: #8a4a06; border-color: #fbd9a8; }
.alert-info { background: var(--b50); color: var(--b700); border-color: var(--b100); }
.toasts { position: fixed; right: 20px; top: 76px; z-index: 100; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); }
.toast { background: #fff; border-radius: 12px; box-shadow: var(--sh-lg); padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; border-left: 4px solid var(--g500); animation: slidein .25s ease; font-size: 13.5px; }
.toast.err { border-left-color: var(--bad); }
.toast.warn { border-left-color: var(--warn); }
.toast.out { animation: fadeout .3s ease forwards; }

/* ---- Empty / loading ---------------------------------------------- */
.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty .em-ic { width: 64px; height: 64px; border-radius: 18px; background: var(--grad-soft); display: grid; place-items: center; margin: 0 auto 14px; color: var(--g600); }
.empty .em-ic .ic { width: 28px; height: 28px; }
.empty h4 { color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
.spinner.dark { border-color: var(--g100); border-top-color: var(--g600); }
.loading-overlay { position: fixed; inset: 0; background: rgba(243, 247, 245, .75); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 200; }
.loading-overlay .box { background: #fff; padding: 22px 28px; border-radius: 14px; box-shadow: var(--sh-lg); display: flex; gap: 14px; align-items: center; font-weight: 600; }
.skeleton { background: linear-gradient(90deg, var(--line2), #f8fbf9, var(--line2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 8px; }

/* ---- Halaman login ------------------------------------------------- */
.auth-body { min-height: 100vh; background: linear-gradient(135deg, rgba(7, 59, 40, .86), rgba(23, 88, 143, .78)), url('../img/gedung.jpg') center/cover fixed; display: grid; place-items: center; padding: 24px 16px; }
.auth-wrap { width: 100%; max-width: 980px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.auth-hero { color: #fff; padding: 48px 44px; background: rgba(255,255,255,.06); backdrop-filter: blur(6px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; border-right: 1px solid rgba(255,255,255,.15); }
.auth-hero h1 { font-size: 34px; font-weight: 800; letter-spacing: .01em; }
.auth-hero p { opacity: .9; margin: 10px 0 0; font-size: 15px; }
.auth-hero .logos { display: flex; gap: 12px; }
.auth-hero .logos img { width: 60px; height: 60px; border-radius: 50%; background: #fff; padding: 4px; object-fit: contain; }
.auth-hero ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: 14px; }
.auth-hero li { display: flex; gap: 10px; align-items: center; }
.auth-hero li .ic { background: rgba(255,255,255,.18); border-radius: 8px; padding: 6px; width: 30px; height: 30px; }
.auth-card { background: #fff; padding: 44px 40px; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.auth-brand img { width: 52px; height: 52px; border-radius: 50%; }
.auth-brand strong { display: block; font-size: 18px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-brand span { font-size: 13px; color: var(--muted); }
.auth-card h2 { font-size: 22px; margin-bottom: 4px; }

/* ---- Scanner ------------------------------------------------------- */
.scan-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.scanner-box { position: relative; aspect-ratio: 1 / 1; max-height: 520px; width: 100%; background: #0b1f18; border-radius: var(--r); overflow: hidden; }
#reader { width: 100%; height: 100%; }
#reader video { width: 100% !important; height: 100% !important; object-fit: cover; }
#reader__dashboard, #reader img[alt="Info icon"] { display: none !important; }
.scan-frame { position: absolute; inset: 14%; pointer-events: none; border-radius: 20px; box-shadow: 0 0 0 2000px rgba(0,0,0,.35); }
.scan-frame::before, .scan-frame::after { content: ""; position: absolute; inset: 0; border-radius: 20px; border: 3px solid transparent; }
.scan-frame span { position: absolute; width: 34px; height: 34px; border-color: #5fe0a8; border-style: solid; }
.scan-frame span:nth-child(1) { top: 0; left: 0; border-width: 4px 0 0 4px; border-top-left-radius: 18px; }
.scan-frame span:nth-child(2) { top: 0; right: 0; border-width: 4px 4px 0 0; border-top-right-radius: 18px; }
.scan-frame span:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 4px 4px; border-bottom-left-radius: 18px; }
.scan-frame span:nth-child(4) { bottom: 0; right: 0; border-width: 0 4px 4px 0; border-bottom-right-radius: 18px; }
.scan-line { position: absolute; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, transparent, #5fe0a8, transparent); box-shadow: 0 0 12px #5fe0a8; animation: scanline 2.2s ease-in-out infinite; top: 10%; }
.scanner-box.paused .scan-line { animation-play-state: paused; opacity: .3; }
.scanner-box.flash-ok { animation: flashok .6s ease; }
.scanner-box.flash-bad { animation: flashbad .6s ease; }
.scan-idle { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #cfe9de; padding: 24px; }
.scan-idle .ic { width: 48px; height: 48px; margin-bottom: 10px; }
.scan-result { padding: 22px; text-align: center; }
.scan-result .res-head { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .06em; padding: 8px 16px; border-radius: 99px; font-size: 14px; margin-bottom: 18px; }
.res-ok .res-head { background: var(--ok-bg); color: var(--ok); }
.res-dup .res-head { background: var(--b50); color: var(--b600); }
.res-bad .res-head { background: var(--bad-bg); color: var(--bad); }
.scan-result .res-photo { width: 120px; height: 150px; border-radius: 14px; object-fit: cover; margin: 0 auto 14px; display: block; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--g100), var(--sh); }
.scan-result h3 { font-size: 20px; font-weight: 800; }
.res-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; text-align: left; max-width: 340px; margin: 16px auto 0; font-size: 14px; }
.res-grid dt { color: var(--muted); }
.res-grid dd { margin: 0; font-weight: 700; }
.pop { animation: pop .35s cubic-bezier(.2, 1.4, .4, 1); }
.session-pick { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; min-width: 0; max-width: 100%; }
.session-pick select { flex: 1 1 260px; min-width: 0; width: 100%; }
.toolbar > * { min-width: 0; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--g400); box-shadow: 0 0 0 0 rgba(63, 178, 131, .6); animation: pulse 1.6s infinite; display: inline-block; }
.hist-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--line2); font-size: 13px; }
.hist-item img { width: 34px; height: 40px; border-radius: 7px; object-fit: cover; }
.hist-item .t { margin-left: auto; text-align: right; color: var(--muted); font-size: 12px; white-space: nowrap; }
.hist-item.new { animation: highlight 1.6s ease; }

/* ---- Info list ----------------------------------------------------- */
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 10px 16px; font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; word-break: break-word; }
pre.code { background: #0f2a22; color: #d7f5e6; padding: 16px; border-radius: 12px; font-size: 12.5px; overflow-x: auto; line-height: 1.55; margin: 0; }
.flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 600; }
.flow span { padding: 8px 12px; border-radius: 10px; background: var(--g50); color: var(--g700); }
.flow span:nth-child(odd):last-child { background: var(--b50); color: var(--b700); }
.flow .ic { color: #93a39b; }

/* ---- Animasi ------------------------------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } }
@keyframes fadeout { to { transform: translateX(30px); opacity: 0; } }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
@keyframes scanline { 0%, 100% { top: 14%; } 50% { top: 84%; } }
@keyframes flashok { 0% { box-shadow: 0 0 0 0 rgba(20,145,95,.9); } 100% { box-shadow: 0 0 0 18px rgba(20,145,95,0); } }
@keyframes flashbad { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(63, 178, 131, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 178, 131, 0); } }
@keyframes highlight { from { background: var(--g50); } }

/* ---- Responsif ----------------------------------------------------- */
@media (max-width: 1180px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-side { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--sh-lg); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .backdrop { display: block; position: fixed; inset: 0; background: rgba(7, 30, 22, .4); z-index: 35; }
  .main { margin-left: 0; }
  .topbar .menu-btn { display: inline-flex; }
  .scan-layout { grid-template-columns: 1fr; }
  .g-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .content { padding: 18px 16px 40px; }
  .topbar { padding: 0 16px; height: 58px; }
  .user-pill .who, .chip-year { display: none; }
  .g-2, .g-3, .g-4, .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .auth-card { padding: 32px 22px; }
  .bar-row { grid-template-columns: 76px 1fr 78px; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 8px; }
  .toolbar select { flex: 1 1 140px; }
  .stat .val { font-size: 26px; }
  .page-head h2 { font-size: 19px; }
  .tbl .hide-sm { display: none; }
}