/* anchor: WinTalent admin + papan NYT/BBC, diverge: aksen/latar desa, bidang papan putih, bahaya tetap merah, Plus Jakarta lokal */ */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("../fonts/jetbrains-mono-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
    --latar: #FFFFFF;
    --background: var(--latar);
    --foreground: #1A1A1A;
    --muted: #6B6B6B;
    --border: #E6E6E6;
    --primary: #B42318;
    --bahaya: #B42318;
    --kedip-naik: #18794E;
    --di-aksen: #fff;
    --bidang: #FFFFFF;
    --lembut: color-mix(in srgb, var(--primary) 14%, var(--latar));
    --garis: color-mix(in srgb, var(--primary) 32%, var(--latar));
    --surface: color-mix(in srgb, var(--foreground) 4%, var(--latar));
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--background);
    color: var(--foreground);
    font-family: "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

a { color: var(--foreground); }
button, .tombol, .tombol-calon, .garis, a.garis, a.bahaya {
    font: inherit;
    min-height: 44px;
    border-radius: 8px;
    cursor: pointer;
}
button:not(.garis):not(.bahaya):not(.teks):not(.ikon):not(.admin-lapis):not(.layar-geser):not(.tombol-calon):not(.kurang):not(.pilih-tombol), .tombol {
    background: var(--primary);
    color: var(--di-aksen);
    border: 1px solid var(--primary);
    padding: 8px 16px;
    text-decoration: none;
}
a.tombol, a.garis { display: inline-flex; align-items: center; }
.garis, .teks, a.garis {
    background: transparent;
    color: var(--foreground);
}
.garis, a.garis { border: 1px solid var(--foreground); padding: 8px 16px; text-decoration: none; }
.teks { border: 0; padding: 8px 0; text-decoration: underline; background: transparent; }
.bahaya { background: var(--bahaya); border: 1px solid var(--bahaya); color: var(--di-aksen); }
a.ikon, button.ikon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; padding: 0; }
.ikon svg, .admin-sisi nav svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ikon .petunjuk { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ikon:focus-visible { z-index: 5; }
.ikon:focus-visible .petunjuk { width: auto; height: auto; margin: 0; clip-path: none; overflow: visible; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 4px 8px; background: var(--foreground); color: var(--background); border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.3; pointer-events: none; }
.meja-aksi .ikon:focus-visible .petunjuk { bottom: auto; top: calc(100% + 6px); }
@media (hover: hover) and (pointer: fine) {
    .ikon:hover { z-index: 5; }
    .ikon:hover .petunjuk { width: auto; height: auto; margin: 0; clip-path: none; overflow: visible; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 4px 8px; background: var(--foreground); color: var(--background); border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.3; pointer-events: none; }
    .meja-aksi .ikon:hover .petunjuk { bottom: auto; top: calc(100% + 6px); }
    button:not(.garis):not(.bahaya):not(.teks):not(.ikon):not(.admin-lapis):not(.layar-geser):not(.tombol-calon):not(.kurang):not(.pilih-tombol):hover, .tombol:hover { background: color-mix(in srgb, var(--primary) 72%, #000); border-color: color-mix(in srgb, var(--primary) 72%, #000); }
    .garis:hover, a.garis:hover { border-color: var(--garis); background: var(--lembut); }
    .bahaya:hover { background: color-mix(in srgb, var(--bahaya) 72%, #000); border-color: color-mix(in srgb, var(--bahaya) 72%, #000); }
    .rel-pindah.aktif:hover { background: color-mix(in srgb, var(--primary) 72%, #000); color: var(--di-aksen); border-color: var(--primary); }
    .meja .kurang:hover { background: color-mix(in srgb, var(--primary) 72%, #000); }
    .pilih-tombol:hover { border-color: var(--garis); }
    .pilih-daftar li:hover { background: var(--surface); }
    .pilih-daftar li[aria-selected="true"]:hover { background: var(--lembut); }
}
@media (hover: none) {
    a.ikon, button.ikon { width: auto; padding: 8px 10px; gap: 6px; }
    .ikon .petunjuk { position: static; width: auto; height: auto; margin: 0; clip-path: none; overflow: visible; }
    .meja-aksi button.ikon, .admin-shell a.ikon, .admin-shell button.ikon { width: 44px; min-width: 44px; padding: 0; gap: 0; }
    .meja-aksi .ikon .petunjuk, .admin-shell .ikon .petunjuk { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
}
button:disabled { opacity: 0.45; }
:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }
input, select {
    font: inherit;
    font-size: 16px;
    min-height: 44px;
    width: 100%;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    border-radius: 8px;
    padding: 8px 12px;
}
select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-color: var(--bidang);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}
select::-ms-expand { display: none; }
.pilih { position: relative; width: 100%; min-width: 0; }
.pilih-asli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pilih-tombol {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 8px 40px 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--bidang);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    color: var(--foreground);
    font: inherit;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}
.pilih-daftar {
    display: none;
    position: absolute;
    z-index: 6;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--bidang);
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 5%, transparent), 0 8px 24px -4px color-mix(in srgb, var(--foreground) 12%, transparent);
    max-height: 16rem;
    overflow: auto;
}
.pilih.terbuka .pilih-daftar { display: block; }
.pilih-daftar li {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
}
.pilih-daftar li[aria-selected="true"] { background: var(--lembut); color: var(--primary); font-weight: 600; }
label { display: block; margin: 12px 0; font-weight: 600; }
.centang { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.centang input { width: auto; }

.pesan, .kabar { margin: 0 0 16px; padding: 12px 16px; border-radius: 8px; }
.pesan { background: color-mix(in srgb, var(--bahaya) 14%, var(--latar)); }
.pesan[hidden] { display: none; }
.kabar { background: var(--surface); }

.admin-shell { font-family: "Plus Jakarta Sans", sans-serif; display: block; min-height: 100vh; background: var(--latar); }
.admin-sisi { position: fixed; z-index: 4; top: 0; bottom: 0; left: 0; width: 288px; display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--surface); border-right: 1px solid var(--border); transform: translateX(-105%); }
.admin-shell.terbuka .admin-sisi { transform: none; }
.admin-sisi .merk-tautan { margin-bottom: 8px; }
/* anchor: sidebar brand block (Linear/GitHub sticky nav), diverge: primary only behind logo+nama di desktop */
@media (min-width: 900px) {
    .admin-sisi .merk-tautan {
        margin: -16px -16px 12px;
        padding: 20px 16px;
        background: var(--primary);
        color: var(--di-aksen);
        border-radius: 0;
    }
}
.admin-sisi nav { display: flex; flex-direction: column; gap: 4px; }
.admin-sisi nav a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.admin-sisi nav a.aktif { background: var(--lembut); color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.admin-sisi .petunjuk { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.admin-sisi form { margin-top: auto; }
.admin-sisi form button.garis { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.admin-sisi form button svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.admin-lapis { position: fixed; z-index: 3; inset: 0; border: 0; border-radius: 0; background: rgb(26 26 26 / 40%); color: transparent; }
.admin-lapis[hidden] { display: none; }
.admin-kerja { min-width: 0; max-width: 80rem; padding: 16px; overflow-x: clip; }
.admin-batang { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; min-height: 64px; margin: -16px -16px 16px; padding: 0 16px; background: var(--primary); color: var(--di-aksen); }
.admin-batang-judul { min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-batang .garis { color: var(--di-aksen); border-color: color-mix(in srgb, #fff 55%, transparent); background: transparent; }
.admin-shell input, .admin-shell select, .admin-shell button:not(.ikon):not(.admin-lapis) { min-height: 48px; }
.admin-shell .bantuan { margin: 0; }
.masuk-desa { margin: 0 0 4px; font-weight: 700; }
.pita { margin: 0 0 16px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.bantuan { color: var(--muted); font-size: 14px; font-weight: 400; }
.daftar { list-style: none; margin: 0; padding: 0; }
.daftar-item { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.daftar-item form { margin: 0; }
.nama-daftar { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.panel .kepala-baris h2 { margin: 0; }
.konfirmasi { width: min(28rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--bidang); color: var(--foreground); }
.konfirmasi::backdrop { background: rgb(26 26 26 / 40%); }
.konfirmasi h2 { margin: 0 0 8px; font-size: 1.125rem; }
.konfirmasi p { margin: 0 0 16px; }
.konfirmasi-aksi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.konfirmasi-aksi button { width: 100%; min-height: 48px; margin: 0; }
/* anchor: form-satu field stack, diverge: blok kode monospace untuk modal embed */
.dialog-embed { width: min(36rem, calc(100vw - 32px)); }
.dialog-embed .embed-label { display: block; margin: 0 0 8px; font-weight: 600; font-size: 14px; }
.dialog-embed .embed-kode {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 6rem;
    margin: 0 0 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--foreground);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 13px;
    line-height: 1.5;
    resize: none;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
#kabar-dialog form { margin: 0; }
#kabar-dialog button { width: 100%; min-height: 48px; }
.gulir { overflow-x: auto; }
.aksi-kepala, .aksi-tabel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aksi-kepala form, .aksi-tabel form { margin: 0; }
.aksi-kepala form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aksi-kepala input[type="file"] { flex: 1; min-width: 0; width: auto; }
.aksi-tabel { width: max-content; max-width: 100%; }
@media (hover: hover) and (pointer: fine) {
    .admin-sisi nav a:hover { background: var(--lembut); }
    .admin-sisi nav a.aktif:hover { background: color-mix(in srgb, var(--primary) 22%, var(--latar)); }
    .admin-batang .garis:hover { background: color-mix(in srgb, #fff 12%, transparent); border-color: #fff; }
    .data-table tbody tr:hover { background: var(--lembut); }
    .kartu-rekam:hover { border-color: var(--garis); }
}
@media (min-width: 900px) {
    .admin-shell { display: grid; grid-template-columns: 288px minmax(0, 1fr); }
    .admin-sisi { position: sticky; top: 0; height: 100vh; transform: none; }
    .admin-batang, .admin-lapis { display: none; }
    .admin-kerja { padding: 32px 40px; }
}
.merk-tautan { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; text-decoration: none; }
.merk { width: auto; height: 40px; object-fit: contain; display: block; }
.page-header { margin-bottom: 24px; }
.page-header h1 { margin: 0 0 4px; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }
.admin-shell .page-header > div { min-width: 0; }
.admin-shell .page-header h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kepala-baris { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: nowrap; }
.kepala-baris > form { flex: 1; min-width: 0; margin: 0; }
.kartu-rekam > .kepala-baris label { margin: 0; display: flex; align-items: center; gap: 12px; }
.kartu-rekam > .kepala-baris select { flex: 1; min-width: 0; min-height: 44px; }
.kartu-rekam > .kepala-baris .pilih { flex: 1; min-width: 0; }
.kartu-rekam > .kepala-baris .pilih-tombol { min-height: 44px; }
.dua-panel { display: grid; gap: 16px; grid-template-columns: 1fr; }
.dua-panel > .panel { margin: 0; }
@media (min-width: 900px) {
    .dua-panel { grid-template-columns: 1fr 1fr; align-items: start; }
}
.aksi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 32px; }
.aksi form { margin: 0; }
.panel { margin: 24px 0; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--bidang); }
.panel h2 { font-size: 18px; margin: 0; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table th { color: var(--muted); font-weight: 600; font-size: 14px; }
.form-satu { max-width: 36rem; display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--bidang); box-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 5%, transparent), 0 4px 16px -2px color-mix(in srgb, var(--foreground) 5%, transparent); }
.form-satu label { margin: 0; }
.form-satu > button { min-height: 48px; }
.form-satu + .kartu-rekam { margin-top: 16px; }
.konfirmasi .form-satu { max-width: none; padding: 0; border: 0; box-shadow: none; }
/* anchor: daftar-item row density, diverge: koreksi full-width; nama tidak warisi flex-basis 12rem (jadi tinggi kosong) */
.form-baris { display: grid; gap: 8px 20px; margin: 0 0 12px; padding: 16px 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--bidang); }
.form-baris .nama-daftar { flex: none; font-weight: 600; }
.form-baris .koreksi-meta { margin: 0; color: var(--muted); font-size: 14px; }
.form-baris .koreksi-isi { display: grid; gap: 12px; grid-template-columns: 1fr; }
.form-baris .koreksi-isi label { margin: 0; font-weight: 600; font-size: 13px; }
.form-baris .koreksi-isi label input { margin-top: 6px; }
.form-baris input { width: 100%; min-width: 0; }
.jajaran-kartu { display: grid; gap: 16px; grid-template-columns: 1fr; }
.kartu-rekam { padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--bidang); box-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 5%, transparent), 0 4px 16px -2px color-mix(in srgb, var(--foreground) 5%, transparent); transition: border-color 200ms ease; }
.kartu-rekam h2 { margin: 0 0 4px; font-size: 1rem; }
.kartu-rekam .meta { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.kartu-rekam .pil { display: inline-flex; align-items: center; height: 24px; margin: 0 8px 12px 0; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; font-weight: 600; }
.kartu-rekam .pil.tayang { border-color: var(--garis); color: var(--primary); background: var(--lembut); }
.kartu-rekam .aksi { margin: 0 0 16px; }
.kartu-pemilihan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.kartu-pemilihan-badan { min-width: 0; }
.kartu-pemilihan-lihat { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; align-self: center; }
.kartu-pemilihan-lihat svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.kartu-pemilihan-lihat .petunjuk { position: static; width: auto; height: auto; margin: 0; clip-path: none; overflow: visible; font-weight: 600; }
@media (min-width: 700px) {
    .form-baris { grid-template-columns: minmax(12rem, 20rem) minmax(0, 1fr); align-items: center; }
    .form-baris .nama-daftar { grid-column: 1; grid-row: 1; }
    .form-baris .koreksi-meta { grid-column: 1; grid-row: 2; }
    .form-baris .koreksi-isi { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: 8.5rem minmax(0, 1fr) auto; align-items: end; }
}
@media (min-width: 1280px) {
    .jajaran-kartu { grid-template-columns: 1fr 1fr; }
}
.admin-shell input[type="color"] { width: 4.5rem; padding: 4px; }
.admin-shell .papan { padding: 0; }
.admin-shell .papan-kepala h1 { font-size: 1.25rem; letter-spacing: -0.02em; }
.admin-shell .papan-baris { grid-template-columns: 64px minmax(0, 1fr) auto; }
.admin-shell .papan-baris img, .admin-shell .papan-baris .foto-kosong { width: 64px; height: 64px; }
.admin-shell .tautan-tps { flex-wrap: wrap; min-width: 0; }
.admin-shell .tautan-tps span:first-child { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 899px) {
    .admin-shell .data-table thead { display: none; }
    .admin-shell .data-table, .admin-shell .data-table tbody, .admin-shell .data-table tr { display: block; width: 100%; }
    .admin-shell .data-table td { display: block; width: auto; }
    .admin-shell .data-table tr { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; }
    .admin-shell .data-table td { border: 0; padding: 6px 0; }
    .admin-shell .data-table td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
    .admin-shell .aksi-tabel { width: auto; }
}
@media (max-width: 699px) {
    .admin-shell .kepala-baris { flex-wrap: wrap; }
    .kartu-rekam > .kepala-baris > form { flex: 1 1 100%; }
}

.petugas-pad { max-width: 32rem; margin: 0 auto; padding: 16px 16px 32px; }
.meja { max-width: none; height: 100dvh; max-height: 100dvh; overflow: hidden; min-height: 0; display: flex; flex-direction: column; box-sizing: border-box; padding: 8px 16px; }
.istirahat { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; box-sizing: border-box; }
.istirahat-isi, .masuk-kartu { width: min(22rem, 100%); }
.istirahat h1, .masuk-kartu h1 { margin: 0 0 8px; font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1.15; }
.istirahat-isi > p:not(.pesan), .masuk-kartu > p:not(.pesan) { margin: 0 0 4px; color: var(--muted); }
.masuk-kartu .merk { height: 40px; margin-bottom: 16px; }
.istirahat-isi > form, .masuk-kartu form { display: flex; flex-direction: column; gap: 12px; margin: 28px 0 0; }
.masuk-kartu > .istirahat-aksi { margin-top: 28px; }
.istirahat-isi label, .masuk-kartu label { margin: 0; }
.istirahat-isi input, .istirahat-isi button, .masuk-kartu input, .masuk-kartu select, .masuk-kartu button, .istirahat-aksi a { font-size: 16px; min-height: 48px; width: 100%; margin: 0; }
.masuk-kartu.lebar { width: min(28rem, 100%); }
.istirahat-aksi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.istirahat-aksi a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
.masuk-kartu .bantuan { margin: 0; }
.masuk-kartu ul.bantuan { margin: 12px 0 0; padding-left: 1.2rem; }
#istirahat-keluar { display: none; }
.meja-kepala { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.meja-kepala > :first-child { min-width: 0; flex: 1; }
.meja-kepala p, .meja-kepala h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meja-kepala p { margin: 0; font-size: 13px; line-height: 1.2; }
.meja-kepala h1 { margin: 0; font-size: 1.25rem; line-height: 1.15; }
.meja-aksi { display: flex; flex-wrap: nowrap; align-items: center; flex: none; gap: 8px; }
.meja-aksi form { margin: 0; }
.meja-badan { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 22rem; grid-template-rows: minmax(0, 1fr); gap: 12px; overflow: hidden; }
.meja-kiri, .meja-kanan, .meja-kartu { min-width: 0; min-height: 0; }
.meja-kiri, .meja-kanan { overflow: hidden; }
.meja-kartu { height: 100%; min-height: 0; overflow: hidden; display: grid; gap: 8px; grid-template-columns: repeat(var(--kolom, 1), minmax(0, 1fr)); grid-template-rows: repeat(var(--baris, 1), minmax(0, 1fr)); }
.kartu-ketuk { position: relative; isolation: isolate; display: flex; gap: 0; min-width: 0; height: 100%; min-height: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--bidang); }
.kartu-ketuk.kedip-naik::before, .kartu.kedip-naik::before, .rel-tps.kedip-naik::before,
.kartu-ketuk.kedip-turun::before, .kartu.kedip-turun::before, .rel-tps.kedip-turun::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    border: 5px solid var(--kedip-naik);
    background: color-mix(in srgb, var(--kedip-naik) 28%, transparent);
    opacity: 0;
    animation: kedip-kuas 0.7s ease-out 1;
}
.kartu-ketuk.kedip-turun::before, .kartu.kedip-turun::before, .rel-tps.kedip-turun::before {
    border-color: var(--bahaya);
    background: color-mix(in srgb, var(--bahaya) 28%, transparent);
}
.kartu-ketuk > *, .kartu > *, .rel-tps > * { position: relative; z-index: 1; }
@keyframes kedip-kuas {
    0% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 0; }
}
.kartu-isi { display: flex; align-items: center; align-self: stretch; gap: 8px; min-width: 0; overflow: hidden; }
.kartu-isi > span { min-width: 0; }
.meja .kartu-foto { display: block; width: auto; height: clamp(40px, 70%, 72px); max-width: 72px; aspect-ratio: 1; object-fit: cover; border-radius: 4px; flex: none; background: var(--surface); }
.meja .kartu-ketuk .tombol-calon, .meja .kartu-ketuk .garis { height: 100%; min-height: 0; margin: 0; overflow: hidden; border: 0; border-radius: 0; background: transparent; }
.meja .nomor { display: block; font-size: 12px; line-height: 1.2; }
.meja .nama { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; }
.meja .tombol-calon > .bilangan, .meja .garis > .bilangan { flex: none; font-size: 1.25rem; font-weight: 700; }
.meja .kurang { align-self: stretch; flex: none; width: 56px; min-width: 56px; height: auto; min-height: 0; margin: 0; padding: 0; border-radius: 0; border: 0; background: var(--primary); color: var(--di-aksen); display: flex; align-items: center; justify-content: center; line-height: 1; }
.kartu-isi .alias, .kartu-isi .pintasan, .tidak-sah-besar .pintasan { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }
.meja-suara { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.batal-ketuk { flex: none; width: 100%; min-height: 56px; white-space: nowrap; }
.meja .tombol-calon, .meja .garis { margin: 0; }
.kartu-ketuk .tombol-calon, .kartu-ketuk .garis { flex: 1; min-width: 0; }
.kurang { flex: none; width: 56px; min-width: 56px; min-height: 56px; padding: 0; }
.meja-kanan { display: flex; flex-direction: column; gap: 8px; }
.tidak-sah-besar { flex: none; display: flex; width: 100%; min-height: 4.5rem; }
.tidak-sah-besar .kartu-ketuk { flex: 1; }
.tidak-sah-besar .garis { min-height: 0; font-size: 1.35rem; font-weight: 700; }
.tidak-sah-besar .garis > span:first-child { white-space: nowrap; }
.meja-agregat { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding-top: 8px; border-top: 1px solid var(--border); }
.meja-agregat h2 { flex: none; font-size: 14px; margin: 0 0 8px; }
.meja-agregat p { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0; }
.meja-agregat .agregat-baris { display: flex; flex-direction: column; justify-content: flex-start; gap: 0; flex: 1 1 0; min-height: 0; margin: 0; overflow: hidden; container-type: size; }
.meja-agregat .agregat-baris .agregat-atas { flex: none; overflow: hidden; line-height: 1.15; font-size: clamp(11px, 46cqh, 15px); }
.meja-agregat .agregat-atas span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agregat-atas { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; }
.meja-agregat .batang { flex: none; height: clamp(2px, 18cqh, 8px); min-height: 2px; margin-top: 1px; }
.pintasan { color: var(--muted); font-weight: 600; }
@media (max-width: 899px) {
    .meja { height: auto; max-height: none; overflow: visible; }
    .meja-badan { grid-template-columns: 1fr; }
    .meja-kartu { height: auto; }
    .meja-kiri { overflow: visible; }
    .kartu-ketuk { min-height: 56px; height: auto; }
    .meja .kartu-ketuk .tombol-calon, .meja .kartu-ketuk .garis { min-height: 56px; height: auto; }
    .meja-agregat { overflow: visible; }
    .meja-agregat .agregat-baris { flex: none; min-height: 28px; container-type: normal; }
    .meja-agregat .batang { height: 8px; min-height: 8px; }
}
@media (min-width: 900px) {
    .meja .kartu-ketuk { container-type: size; }
    .meja .kartu-foto { height: min(72px, 58cqh); width: auto; max-width: 72px; }
    .meja .kartu-ketuk .tombol-calon, .meja .kartu-ketuk .garis { padding: clamp(4px, 6cqh, 12px) 10px; }
    .meja .nama { font-size: clamp(0.75rem, 16cqh, 1.35rem); white-space: normal; text-overflow: unset; }
    .meja .nomor, .meja .kartu-isi .alias, .meja .kartu-isi .pintasan { font-size: clamp(10px, 11cqh, 14px); line-height: 1.15; }
    .meja .tombol-calon > .bilangan { font-size: clamp(0.85rem, 22cqh, 1.5rem); }
    .meja .kurang { width: clamp(40px, 30cqh, 56px); min-width: clamp(40px, 30cqh, 56px); font-size: clamp(1rem, 24cqh, 1.5rem); }
}
.tombol-calon, .petugas-pad .garis:not(.ikon) {
    width: 100%;
    min-height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: left;
    margin: 8px 0;
    padding: 12px 16px;
    background: var(--background);
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
}
.meja .kartu-ketuk .garis { margin: 0; border: 0; border-radius: 0; background: transparent; }
.nama { display: block; font-weight: 700; min-width: 0; overflow-wrap: break-word; }
.nomor, .catatan-persen, .strip-desa { color: var(--muted); }
.bilangan, .angka { font-variant-numeric: tabular-nums; }
.strip-desa { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; }
.strip-desa h2 { font-size: 14px; color: var(--foreground); margin-bottom: 8px; }
.strip-desa p { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0; }

.masthead { display: flex; align-items: center; gap: 12px; padding: 24px 24px 0; font-weight: 700; }
.papan { padding: 8px 24px 48px; }
.papan-kepala h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
.papan .angka { font-size: clamp(2.5rem, 8vw, 4.5rem); line-height: 1; font-weight: 700; margin: 0; }
.surat-terhitung .angka { font-size: clamp(2.5rem, 8vw, 4.5rem); line-height: 1; font-weight: 700; }
.surat-terhitung { margin: 8px 0 24px; }
.label-final { font-weight: 700; }
.papan-baris { display: grid; grid-template-columns: 96px minmax(8rem, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); }
.papan-baris img, .foto-kosong { width: 96px; height: 96px; object-fit: cover; display: block; }
.papan-baris .angka { margin: 0; white-space: nowrap; }
.identitas { min-width: 0; }
.foto-kosong { display: grid; place-items: center; background: var(--surface); font-size: 24px; font-weight: 700; }
.batang { height: 8px; background: var(--border); margin-top: 8px; }
.batang span { display: block; height: 100%; background: var(--foreground); }
.unggulan .angka { color: var(--primary); }
.unggulan .batang span { background: var(--primary); }
.papan-kecil .angka, .papan-meja .angka { font-size: 32px; }
.tautan-tps { display: flex; gap: 16px; padding: 12px 0; color: inherit; text-decoration: none; border-bottom: 1px solid var(--border); }
.rincian-tps { margin-top: 32px; }

@media (min-width: 900px) {
    .papan { padding: 8px 64px 64px; }
    .masthead { padding: 32px 64px 0; }
    .papan .angka, .papan .surat-terhitung .angka { font-size: clamp(4rem, 7vw, 6rem); }
}

@media (prefers-reduced-motion: reduce) {
    .papan-baris, .kartu { view-transition-name: none !important; }
    .agregat-baris { view-transition-name: none !important; }
    .kartu-ketuk::before, .kartu::before, .rel-tps::before { display: none !important; animation: none !important; }
    .layar-catatan { height: auto; white-space: normal; text-align: center; line-height: 1.3; padding: 4px 12px; }
    .layar-catatan-jalur, .layar-catatan-isi { animation: none; min-width: 0; }
    .layar-catatan-jalur, .layar-catatan-isi { display: block; width: auto; }
    .layar-catatan [aria-hidden="true"] { display: none; }
}

@media print {
    @page {
        size: A4;
        margin: 16mm 16mm 18mm;
        @bottom-left {
            content: var(--cetak-desa);
            font-family: "Segoe UI", sans-serif;
            font-size: 9pt;
            color: #1a1a1a;
        }
        @bottom-right {
            content: "Halaman " counter(page);
            font-family: "Segoe UI", sans-serif;
            font-size: 9pt;
            color: #1a1a1a;
        }
    }
    .no-print, .admin-topbar, .admin-sisi, .admin-batang, .admin-lapis, dialog, .masthead, button, form { display: none !important; }
    .kartu-ketuk::before, .kartu::before, .rel-tps::before { display: none !important; }
    body, .layar { background: #fff !important; color: #1a1a1a !important; }
    .layar, .layar-badan, .layar-isi, .layar-tengah, .layar-kartu, .layar-rel {
        height: auto !important;
        overflow: visible !important;
        display: block !important;
    }
    .layar.cetak-global .layar-rel, .layar.cetak-tps .layar-rel { display: none !important; }
    .layar-puncak { display: block !important; position: static !important; background: transparent !important; color: #1a1a1a !important; text-align: center !important; padding: 0 0 10px !important; margin: 0 0 16px !important; border-bottom: 1px solid #1a1a1a !important; }
    .layar-catatan { display: block !important; flex: none !important; height: auto !important; width: auto !important; margin: 10px 0 0 !important; padding: 8px 0 0 !important; overflow: visible !important; border: 0 !important; color: #1a1a1a !important; text-align: center !important; white-space: normal !important; font-size: 9pt !important; line-height: 1.45 !important; }
    .layar-catatan strong { display: inline !important; color: #1a1a1a !important; background: transparent !important; padding: 0 !important; font-weight: 700; }
    .layar-catatan strong::after { content: " "; }
    .layar-catatan-jalur, .layar-catatan-isi, .layar-catatan-isi span { animation: none !important; display: inline !important; flex: none !important; min-width: 0 !important; width: auto !important; padding: 0 !important; }
    .layar-catatan [aria-hidden="true"] { display: none !important; }
    .layar-puncak .merk { display: block !important; height: 52px; margin: 0 auto 8px; }
    .layar-siaran, .layar-digit, .layar-tanggal, .titik { display: none !important; }
    .layar-live, .layar-puncak h1, .layar-jam, .layar-jam-teks { text-align: center !important; color: #1a1a1a !important; }
    .layar-jam { display: block !important; width: 100% !important; justify-self: stretch !important; margin: 8px 0 0 !important; }
    .layar-live { display: block !important; margin: 0 !important; font-size: 11pt !important; letter-spacing: 0.14em; text-transform: uppercase; }
    .layar-puncak h1 { font-size: 16pt !important; margin: 4px 0 0 !important; font-weight: 700; }
    .layar-lingkup, .nama, .nomor, .layar-nilai, .bilangan, .rel-nama, .layar-jumlah, .layar-jumlah span, .layar-jumlah strong { color: #1a1a1a !important; }
    .layar-jam-teks { display: block !important; margin: 8px 0 0 !important; font-size: 11pt; }
    .layar-judul, .layar-jumlah, .rel-tps { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
    .layar-judul, .layar-jumlah { break-inside: avoid; page-break-inside: avoid; }
    .kartu, .rel-baris { break-inside: avoid; page-break-inside: avoid; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
    .layar-judul { margin: 16px 0 8px !important; padding: 0 !important; padding-left: 0 !important; break-after: avoid; page-break-after: avoid; }
    .layar-kartu { margin: 0 !important; padding: 0 !important; gap: 0 !important; min-height: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; }
    /* kolom suara minmax: angka ratusan ribu (192.201) tidak muat di 4.5rem + overflow gelembung */
    .cetak-kepala, .kartu { display: grid !important; grid-template-columns: 78px minmax(0, 1fr) minmax(6.5rem, max-content) !important; grid-template-rows: auto !important; column-gap: 10px !important; align-items: center !important; }
    .cetak-kepala { break-after: avoid; page-break-after: avoid; padding: 0 0 4px !important; border-bottom: 1.5px solid #1a1a1a !important; font-size: 9pt; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
    .kartu { position: static !important; left: auto !important; top: auto !important; transform: none !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; padding: 5px 0 !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; border-bottom: 1px solid #c8c8c8 !important; box-shadow: none !important; backdrop-filter: none !important; background: transparent !important; }
    .layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .fakta,
    .layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .peringkat,
    .layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .kartu-urut,
    .layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .batang-baris,
    .layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .petunjuk,
    .layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .layar-nilai,
    .layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .batang { display: revert !important; }
    .layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .identitas,
    .layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .nama,
    .layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .batang-baris { align-items: flex-start !important; text-align: left !important; max-width: none !important; font-size: inherit !important; }
    .kartu-muka { grid-column: 1 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; }
    .kartu-urut { font-size: 8pt; font-weight: 600; line-height: 1.2; text-align: center; color: #1a1a1a !important; }
    .kartu-foto { display: block !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; max-width: 36px !important; aspect-ratio: auto !important; object-fit: cover; border-radius: 4px !important; background: transparent !important; }
    .kartu .identitas { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; max-width: none !important; }
    .kartu .layar-nilai { display: flex !important; flex-direction: column !important; grid-column: 3 !important; grid-row: 1 !important; align-self: center !important; align-items: flex-end !important; justify-self: end !important; width: max-content !important; max-width: none !important; overflow: visible !important; text-align: right !important; font-size: 12pt !important; line-height: 1.2 !important; white-space: nowrap !important; }
    .kartu .layar-nilai .petunjuk { display: block !important; font-size: 8pt !important; font-weight: 600; }
    .cetak-dua, .rel-baris { grid-template-columns: minmax(0, 1fr) minmax(6.5rem, max-content) !important; }
    .rel-baris { padding: 3px 0 !important; border-bottom: 1px solid #c8c8c8 !important; }
    .layar .batang { display: none !important; }
    .persen, .layar-jumlah .bantuan { display: none !important; }
    .rel-sisa { display: grid !important; }
    .rel-lain { display: none !important; }
    .layar-jumlah, .rel-jumlah { display: block !important; padding: 12px 0 0 !important; }
    .layar-jumlah-isi { display: contents !important; }
    .layar-jumlah p, .layar-jumlah p + p { display: flex !important; flex-direction: row !important; justify-content: space-between; gap: 16px; margin: 0; padding: 3px 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #c8c8c8 !important; }
    .layar-jumlah strong { font-size: 14pt !important; font-family: "Plus Jakarta Sans", sans-serif !important; }
    .layar .layar-nilai, .layar .bilangan { font-family: "Plus Jakarta Sans", sans-serif !important; }
    .layar-jumlah:not(:has(strong)) { display: none !important; }
    .layar-rel { break-before: page; page-break-before: always; padding: 0 !important; }
    .rel-tps { display: block !important; margin: 0 !important; padding: 0 !important; break-inside: auto; page-break-inside: auto; }
    .layar.cetak-semua .layar-rel > .rel-tps:first-child { display: none !important; }
    .rel-tps + .rel-tps { break-before: page; page-break-before: always; }
    .layar.cetak-semua .rel-tps:first-child + .rel-tps { break-before: auto; page-break-before: auto; }
    .rel-nama { break-after: avoid; page-break-after: avoid; font-size: 14pt !important; }
    .digit i { background: transparent !important; }
    .digit i.nyala, .titik i { background: #1a1a1a !important; print-color-adjust: exact; }
}

/* anchor: papan quick count TV, diverge: satu aksen admin mewarnai kepala, kartu, dan tombol */
.layar {
    --rel: 24%;
    --tanah: color-mix(in srgb, var(--primary) 12%, var(--latar));
    --bidang: #fff;
    position: relative;
    background: var(--tanah);
    color: var(--foreground);
}
.layar:fullscreen, .layar:-webkit-full-screen { background: var(--tanah); color: var(--foreground); }
.layar-puncak {
    position: sticky;
    top: 0;
    z-index: 3;
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "merk jam alat" "tulisan tulisan tulisan" "catatan catatan catatan";
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
    padding: 12px 16px;
    background: var(--primary);
    color: var(--di-aksen);
}
.layar-puncak .merk { grid-area: merk; }
.layar-jam { grid-area: jam; justify-self: end; color: var(--di-aksen); text-align: right; height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; }
.layar-alat { grid-area: alat; }
.layar-tulisan { grid-area: tulisan; min-width: 0; }
.layar-catatan { display: flex; align-items: stretch; gap: 0; grid-area: catatan; min-width: 0; width: calc(100% + 32px); height: 22px; margin: 2px -16px -12px; padding: 0; overflow: hidden; border-top: 1px solid color-mix(in srgb, var(--di-aksen) 28%, transparent); color: var(--di-aksen); font-size: 12px; line-height: 22px; white-space: nowrap; }
.layar-catatan strong { flex: none; font-weight: 700; color: var(--primary); background: var(--bidang); padding: 0 12px; }
.layar-catatan-jalur { display: flex; flex: 1; min-width: 0; overflow: hidden; }
.layar-catatan-isi { display: flex; flex: 0 0 auto; min-width: 100%; animation: layar-catatan 36s linear infinite; }
.layar-catatan-isi span { flex: 1 0 auto; padding-right: 4rem; }
@keyframes layar-catatan { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.layar-puncak h1, .layar-live { margin: 0; color: var(--di-aksen); }
.layar-puncak h1 { font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.02em; }
.layar-live { font-size: 14px; }
.layar-tanggal { margin: 0; font-size: 11px; line-height: 1; }
.layar-jam-teks, .cetak-kepala { display: none; }
.layar-digit { display: flex; gap: 2px; justify-content: flex-end; height: 18px; }
.digit { position: relative; width: 11px; height: 18px; }
.digit i { position: absolute; background: transparent; border-radius: 1px; }
.digit i.nyala { background: var(--di-aksen); }
.digit i:nth-child(1) { top: 0; left: 2px; right: 2px; height: 2px; }
.digit i:nth-child(2) { top: 2px; right: 0; width: 2px; height: 6px; }
.digit i:nth-child(3) { top: 10px; right: 0; width: 2px; height: 6px; }
.digit i:nth-child(4) { bottom: 0; left: 2px; right: 2px; height: 2px; }
.digit i:nth-child(5) { top: 10px; left: 0; width: 2px; height: 6px; }
.digit i:nth-child(6) { top: 2px; left: 0; width: 2px; height: 6px; }
.digit i:nth-child(7) { top: 8px; left: 2px; right: 2px; height: 2px; }
.titik { display: flex; flex-direction: column; justify-content: space-evenly; width: 4px; }
.titik i { width: 3px; height: 3px; background: var(--di-aksen); border-radius: 50%; display: block; }
/* anchor: existing layar alat tokens; diverge: dual style toggles + bubble pool */
.layar-alat { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
.layar-alat button { background: var(--di-aksen); color: var(--primary); border: 1px solid var(--di-aksen); border-radius: 8px; width: 44px; height: 44px; padding: 8px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.layar-alat button[aria-pressed="true"] { background: var(--primary); color: var(--di-aksen); border-color: var(--primary); }
.layar-alat svg, .layar-gaya svg, .layar-sisi svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 2; flex-shrink: 0; }
/* mode sejajar vertikal dengan .layar-judul (posisi top di-sync JS) */
.layar-gaya {
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    pointer-events: none;
}
.layar-gaya button {
    pointer-events: auto;
    background: var(--bidang);
    color: var(--foreground);
    border: 1px solid var(--garis);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.layar-gaya button[aria-pressed="true"] {
    background: var(--primary);
    color: var(--di-aksen);
    border-color: var(--primary);
}
.layar-gaya button span { display: none; }
/* anchor: brand papan (--primary/--bidang), diverge: orb radial ringan tanpa dark floor */
.gelembung-rinci {
    position: fixed;
    z-index: 3;
    width: min(360px, calc(100vw - 16px));
    padding: 0;
    background: var(--bidang);
    border: 1px solid var(--garis);
    border-radius: 8px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 6%, transparent), 0 8px 24px -4px color-mix(in srgb, var(--foreground) 12%, transparent);
}
.gelembung-rinci[hidden] { display: none !important; }
.gelembung-rinci .kartu {
    position: static;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 12px 16px;
    overflow: visible;
    border: 0;
    border-radius: 8px;
    background: var(--bidang);
    box-shadow: none;
    container-type: normal;
    transform: none !important;
}
.gelembung-rinci .kartu.unggulan { box-shadow: inset 6px 0 0 var(--primary); }
.gelembung-rinci .kartu .kartu-muka {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: auto;
    min-height: 0;
}
.gelembung-rinci .kartu .kartu-foto {
    display: block;
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    object-fit: cover;
    border-radius: 8px;
    font-size: 1.25rem;
}
.gelembung-rinci .kartu .kartu-foto:not(img) {
    display: grid;
    place-items: center;
    background: var(--lembut);
    color: var(--primary);
    font-weight: 700;
}
.gelembung-rinci .kartu .kartu-urut {
    display: block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: var(--muted);
    white-space: nowrap;
}
.gelembung-rinci .kartu .identitas {
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: visible;
}
.gelembung-rinci .kartu .peringkat {
    display: inline-flex;
    align-items: center;
    height: 22px;
    min-height: 22px;
    margin: 0 0 4px;
    padding: 0 8px;
    border: 1px solid var(--garis);
    border-radius: 6px;
    background: var(--bidang);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: var(--foreground);
}
.gelembung-rinci .kartu .fakta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0 0 2px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--muted);
}
.gelembung-rinci .kartu .nama {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: start;
    white-space: normal;
    overflow-wrap: anywhere;
}
.gelembung-rinci .kartu .batang-baris {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.gelembung-rinci .kartu .batang {
    display: block;
    flex: 1;
    min-width: 0;
    height: 6px;
    margin: 0;
}
.gelembung-rinci .kartu .persen {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: left;
    color: var(--foreground);
}
.gelembung-rinci .kartu .layar-nilai {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}
.gelembung-rinci .kartu .petunjuk {
    display: block;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--muted);
}
.layar[data-gaya-kartu="gelembung"] .layar-kartu {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: min(52dvh, 420px);
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--garis));
    border-radius: 12px;
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, color-mix(in srgb, var(--primary) 6%, transparent), transparent 70%),
        color-mix(in srgb, var(--bidang) 55%, var(--tanah));
}
.layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: var(--ukuran, 120px);
    height: var(--ukuran, 120px);
    padding: 6px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--primary) 48%, transparent);
    background:
        radial-gradient(circle at 32% 28%, color-mix(in srgb, #fff 55%, transparent), transparent 42%),
        radial-gradient(circle at 35% 30%,
            color-mix(in srgb, var(--primary) 6%, transparent),
            color-mix(in srgb, var(--primary) 18%, transparent) 42%,
            color-mix(in srgb, var(--primary) 32%, transparent) 68%,
            color-mix(in srgb, var(--primary) 42%, var(--bidang)) 100%);
    box-shadow:
        inset 0 -10px 18px color-mix(in srgb, var(--primary) 16%, transparent),
        inset 0 2px 6px color-mix(in srgb, #fff 45%, transparent),
        0 1px 2px color-mix(in srgb, var(--foreground) 8%, transparent),
        0 10px 22px -8px color-mix(in srgb, var(--primary) 28%, transparent);
    backdrop-filter: blur(3px);
}
.layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu.unggulan {
    border-width: 2px;
    border-color: var(--primary);
    box-shadow:
        inset 0 -10px 18px color-mix(in srgb, var(--primary) 22%, transparent),
        inset 0 2px 6px color-mix(in srgb, #fff 50%, transparent),
        0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent),
        0 1px 2px color-mix(in srgb, var(--foreground) 8%, transparent),
        0 12px 26px -8px color-mix(in srgb, var(--primary) 36%, transparent);
}
.layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .fakta,
.layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .peringkat,
.layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .kartu-urut,
.layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .batang,
.layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .layar-nilai,
.layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .petunjuk { display: none; }
.layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .kartu-muka { height: auto; }
.layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .kartu-foto {
    width: 52%;
    max-width: none;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    font-size: 1rem;
    flex: none;
}
.layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .kartu-foto:not(img) {
    display: grid;
    place-items: center;
    background: var(--lembut);
    color: var(--primary);
    font-weight: 700;
}
.layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .identitas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
}
.layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .nama {
    max-width: 100%;
    font-size: 0.62rem;
    line-height: 1.1;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}
.layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .batang-baris {
    display: flex;
    justify-content: center;
    margin: 0;
    gap: 0;
}
.layar[data-gaya-kartu="gelembung"] .layar-kartu > .kartu .persen {
    flex: none;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--foreground);
}
.layar-penuh svg[hidden] { display: none; }
.layar-lapis, .layar-sisi, .layar-kunci { position: fixed; }
.layar-lapis { inset: 0; z-index: 4; background: color-mix(in srgb, #1a1a1a 46%, transparent); }
.layar-sisi { z-index: 5; top: 0; right: 0; bottom: 0; width: min(280px, 86vw); display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--bidang); color: var(--foreground); border-left: 1px solid var(--garis); }
.layar-kunci { inset: 0; z-index: 6; display: grid; place-items: center; padding: 24px; text-align: center; background: var(--tanah); }
.layar-kunci p { margin: 0; max-width: 36rem; font-size: 1.15rem; line-height: 1.45; }
.layar-lapis[hidden], .layar-sisi[hidden], .layar-kunci[hidden], #layar-cetak-global[hidden], #layar-cetak[hidden] { display: none !important; }
#layar-cetak-global { display: flex; flex-direction: column; gap: 8px; }
#layar-tutup { align-self: flex-end; width: 44px; height: 44px; padding: 8px; background: transparent; color: var(--foreground); border: 1px solid var(--border); border-radius: 8px; }
.layar-sisi a, #layar-cetak, #layar-cetak-global button, #layar-penuh { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 14px; background: var(--primary); color: var(--di-aksen); border: 0; border-radius: 8px; text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.layar-badan { position: relative; display: flex; flex-direction: column; min-height: 0; }
.layar-badan > .layar-isi { flex: 1; min-height: 0; }
.layar-isi { display: flex; flex-direction: column; }
.layar-tengah { display: contents; }
.layar-muat { margin: 0; padding: 48px 24px; color: var(--muted); font-size: 1.25rem; grid-row: 1 / -1; align-self: center; }
.layar-judul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 8px 12px 0;
    padding: 0 4px 0 6.5rem;
    background: transparent;
    border: 0;
    min-height: 40px;
}
.layar-judul p { margin: 0; }
.layar .label-final { display: inline-flex; align-items: center; height: 24px; margin-top: 6px; padding: 0 10px; border-radius: 999px; background: var(--bidang); border: 1px solid var(--garis); font-size: 13px; font-weight: 600; }
.layar-lingkup { margin: 0; font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 700; letter-spacing: -0.02em; }
.petunjuk { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--muted); }
.layar-kartu { order: 2; min-width: 0; display: grid; gap: 8px; margin: 8px 12px; padding: 0; background: transparent; border: 0; overflow: visible; }
.kartu {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 12px 16px;
    background: var(--bidang);
    border: 1px solid var(--garis);
    border-radius: 8px;
}
.kartu.unggulan { background: var(--bidang); box-shadow: inset 6px 0 0 var(--primary); }
.kartu p, .kartu h3 { margin: 0; line-height: 1.15; }
.kartu .fakta { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 0 0 2px; font-size: 12px; line-height: 1.35; font-weight: 600; color: var(--muted); }
.batang-baris { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.batang-baris .batang { flex: 1; min-width: 0; margin: 0; }
.peringkat { display: inline-flex; align-items: center; height: 22px; margin: 0 0 4px; padding: 0 8px; border: 1px solid var(--garis); border-radius: 6px; background: var(--bidang); font-size: 12px; font-weight: 700; line-height: 1; color: var(--foreground); }
.persen { flex: none; text-align: left; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--foreground); }
.kartu-muka { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kartu-urut { font-size: 11px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--muted); white-space: nowrap; }
.kartu .kartu-foto {
    width: 72px;
    height: 72px;
    object-fit: cover;
    display: grid;
    place-items: center;
    background: var(--lembut);
    font-weight: 700;
}
.layar-nilai { display: flex; flex-direction: column; align-items: flex-end; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(1.5rem, 4vw, 2.5rem); line-height: 1; white-space: nowrap; }
.layar .layar-nilai, .layar .bilangan, .layar .layar-jumlah strong { font-family: "JetBrains Mono", monospace; }
.kartu.unggulan .layar-nilai, .rel-baris.unggulan .bilangan { color: var(--primary); }
.layar-jumlah {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin: 8px 12px 0;
    padding: 10px 16px;
    background: var(--bidang);
    border: 1px solid var(--garis);
    border-radius: 8px;
    order: 1;
}
.layar-jumlah-isi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 28px; }
.layar-jumlah p { margin: 0; padding: 0; display: flex; flex-direction: row; align-items: baseline; gap: 8px; background: transparent; border: 0; }
.layar-jumlah span { color: var(--muted); font-size: 14px; }
.layar-jumlah strong { font-size: 1rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.layar-jumlah:not(:has(strong)) { display: none; }
.layar-jumlah .bantuan { margin: 2px 0 0; line-height: 1.3; }
@media (max-width: 640px) {
    .layar-jumlah-isi { flex-direction: column; align-items: stretch; }
    .layar-jumlah p { display: grid; grid-template-columns: minmax(0, 1fr) 9ch 8ch; width: 100%; gap: 8px 12px; }
    .layar-jumlah strong { justify-self: end; text-align: right; }
    .layar-jumlah p > .persen { text-align: right; }
}
.rel-jumlah { display: none; }
.layar .batang { background: var(--lembut); }
.layar-rel { order: 3; padding: 8px 12px 16px; background: var(--bidang); }
.rel-tps {
    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0 0 8px;
    padding: 8px 12px;
    text-align: left;
    background: var(--bidang);
    color: var(--foreground);
    border: 1px solid var(--garis);
    border-radius: 8px;
}
.rel-tps.aktif { border-color: var(--primary); background: var(--lembut); }
.rel-pindah { display: block; width: 100%; margin-top: 8px; background: var(--bidang); color: var(--foreground); border-color: var(--foreground); }
.rel-pindah.aktif { background: var(--primary); color: var(--di-aksen); border-color: var(--primary); font-weight: 700; }
.rel-nama { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: break-word; }
.rel-total { margin: 4px 0 0; font-size: 14px; line-height: 1.3; }
.rel-total .bilangan { font-weight: 700; }
.rel-baris { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; margin-top: 6px; font-size: 14px; }
.rel-sisa { display: none; }
.rel-baris .batang { grid-column: 1 / -1; margin: 0; }
.layar-geser { display: none; }

@media screen and (min-width: 900px) and (min-height: 560px) {
    .layar { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
    .layar-puncak { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 24px; }
    .layar-catatan { flex: 0 0 calc(100% + 48px); width: calc(100% + 48px); margin: 4px -24px -16px; padding: 0; }
    .layar-puncak h1 { font-size: clamp(1.25rem, 2.5vw, 2rem); }
    .layar-tulisan { flex: 1; }
    .layar-badan { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    .layar-gaya { left: 12px; }
    .layar-judul { padding-left: 6.5rem; align-self: center; }
    .layar-badan > .layar-isi { flex: 1; min-height: 0; }
    .layar-isi {
        height: 100%;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto var(--rel, 24%);
        grid-template-rows: auto minmax(0, 1fr);
    }
    .layar-tengah { display: contents; }
    .layar-judul { grid-column: 1; grid-row: 1; align-self: center; min-width: 12rem; }
    .layar-jumlah { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; margin: 8px 12px 0 0; max-width: min(36rem, 46vw); }
    .layar-kartu { grid-column: 1 / 3; grid-row: 2; }
    .layar-rel { grid-column: 3; grid-row: 1 / -1; }
    .layar-muat { grid-column: 1 / 3; }
    .layar-kartu {
        min-height: 0;
        overflow: hidden;
        display: grid;
        grid-template-columns: repeat(var(--kolom, 2), minmax(0, 1fr));
        grid-template-rows: repeat(var(--baris), minmax(0, 1fr));
        grid-auto-flow: column;
        gap: 8px 12px;
    }
    .layar[data-gaya-kartu="gelembung"] .layar-kartu {
        display: block;
        grid-template-columns: none;
        grid-template-rows: none;
        grid-auto-flow: row;
    }
    .layar-kartu:has(> .kartu:only-child) { grid-template-columns: 1fr; }
    .kartu { container-type: size; min-height: 0; overflow: hidden; padding: 2px 12px; gap: 8px; }
    .kartu .identitas { min-height: 0; overflow: hidden; }
    .kartu .nama { font-size: clamp(0.9rem, 16cqh, 2.75rem); }
    .kartu .fakta { display: block; font-size: clamp(0.75rem, 7cqh, 1.35rem); line-height: 1.25; }
    .kartu .fakta > span { display: inline; }
    .kartu .fakta > span:not(:last-child)::after { content: " · "; }
    .kartu .peringkat { height: auto; min-height: 1.6em; padding: 0.15em 0.55em; font-size: clamp(0.75rem, 6cqh, 1.25rem); }
    .kartu .persen { font-size: clamp(0.75rem, 7cqh, 1.5rem); }
    .kartu .batang-baris { margin-top: 2px; }
    .kartu-muka { height: 100%; min-height: 0; justify-content: center; gap: 2px; }
    .kartu-urut { font-size: clamp(0.7rem, 6cqh, 1.05rem); }
    .kartu .kartu-foto { width: auto; height: min(280px, calc(100cqh - 36px)); aspect-ratio: 1; min-width: 0; min-height: 0; font-size: clamp(1rem, 24cqh, 2.4rem); }
    .layar-nilai { font-size: clamp(1.05rem, 22cqh, 4rem); }
    .layar-nilai .petunjuk { font-size: clamp(0.7rem, 6cqh, 1.15rem); }
    .kartu .batang { height: 3px; margin-top: 2px; }
    .layar-judul, .layar-kartu, .layar-jumlah, .layar-rel { order: 0; }
    .layar-rel { min-height: 0; overflow: auto; padding: 8px; border-left: 0; }
    .layar-geser {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: var(--rel, 24%);
        width: 12px;
        transform: translateX(50%);
        padding: 0;
        min-height: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: transparent;
        cursor: col-resize;
        touch-action: none;
        z-index: 2;
    }
}