/* ============================================================================
   SI-DETEKSI AI — "Meja Periksa"
   ----------------------------------------------------------------------------
   Arah desain: aplikasi ini memeriksa dokumen, jadi tampilannya meminjam
   material dunia itu — kertas formulir, tinta, dan stempel.

   - Warna interaktif (ungu stempel) sengaja DIPISAH dari skala risiko
     (hijau/oker/merah). Di aplikasi penilaian risiko, "bisa diklik" tidak
     boleh tertukar dengan "berbahaya".
   - Angka hasil ukur selalu monospace: itu pembacaan instrumen, bukan hiasan.
   - Prosa dokumen memakai serif; kromnya memakai grotesque.
   ========================================================================== */

:root {
    /* Kertas & tinta */
    --paper: #f2f2ea;          /* dasar halaman: stok formulir, bukan krem */
    --paper-2: #e7e8dd;        /* pita berarsir pada formulir */
    --paper-3: #dcded0;        /* isian kosong / batang gauge */
    --card: #fbfbf6;           /* lembar yang diletakkan di atas meja */
    --rule: #cfd2c3;           /* garis cetak */

    --ink: #1b1e19;            /* hitam tinta dengan semburat hijau */
    --ink-2: #4a5047;
    --ink-3: #6e7568;

    /* Tinta stempel — satu-satunya warna aksi/tautan */
    --stamp: #5c3d8f;
    --stamp-deep: #452c6e;
    --stamp-wash: rgba(92, 61, 143, 0.10);
    --stamp-line: rgba(92, 61, 143, 0.32);

    /* Skala risiko. Semantik lampu lalu lintas dipertahankan karena itu yang
       paling cepat terbaca, tapi hue-nya diredam agar sewarna dengan tinta. */
    --aman: #3c6b4e;
    --aman-bg: rgba(60, 107, 78, 0.12);
    --aman-line: rgba(60, 107, 78, 0.34);

    --tinjau: #8c6310;
    --tinjau-bg: rgba(140, 99, 16, 0.13);
    --tinjau-line: rgba(140, 99, 16, 0.34);

    --periksa: #a32b33;
    --periksa-bg: rgba(163, 43, 51, 0.11);
    --periksa-line: rgba(163, 43, 51, 0.32);

    /* Alias lama yang masih dirujuk sebagian markup & skrip */
    --color-human: var(--aman);
    --color-gemini: var(--tinjau);
    --color-chatgpt: var(--periksa);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted: var(--ink-3);
    --primary: var(--stamp);
    --card-border: var(--rule);
    --bg-secondary: var(--paper-2);

    --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
    --font-text: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

    --rail-width: 246px;
    --speed: 0.16s;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-display);
    font-size: 15px;
    background-color: var(--paper);
    color: var(--ink);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1.2;
}

a {
    color: var(--stamp);
}

:focus-visible {
    outline: 2px solid var(--stamp);
    outline-offset: 2px;
    border-radius: 2px;
}

::selection {
    background: var(--stamp-wash);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--paper-2);
}
::-webkit-scrollbar-thumb {
    background: var(--rule);
    border: 3px solid var(--paper-2);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--ink-3);
}

/* Utilitas kecil yang dipakai skrip saat menyuntik markup */
.mr-2 { margin-right: 0.5rem; }

/* --------------------------------------------------------------------------
   Tanda seal — jadi lambang merek, menggantikan ikon topi wisuda
   -------------------------------------------------------------------------- */
.seal {
    position: relative;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.seal::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Stempel putusan — elemen tanda tangan halaman ini.
   Dipakai persis dua tempat: hero halaman depan dan putusan risiko laporan.
   -------------------------------------------------------------------------- */
.stamp {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    line-height: 1;
    padding: 0.6rem 1.05rem 0.55rem 1.2rem;
    color: var(--stamp);
    border: 2.5px solid currentColor;
    border-radius: 3px;
    transform: rotate(-3.5deg);
    opacity: 0.9;
    background: transparent;
    animation: stamp-press 0.45s cubic-bezier(0.2, 1.4, 0.5, 1) both;
}

.stamp::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid currentColor;
    border-radius: 1px;
    opacity: 0.55;
}

.stamp-aman { color: var(--aman); }
.stamp-tinjau { color: var(--tinjau); }
.stamp-periksa { color: var(--periksa); }

@keyframes stamp-press {
    from { opacity: 0; transform: rotate(-9deg) scale(1.4); }
    to { opacity: 0.9; transform: rotate(-3.5deg) scale(1); }
}

/* --------------------------------------------------------------------------
   Kerangka aplikasi
   -------------------------------------------------------------------------- */
.app-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* Punggung berkas: bidang tinta gelap yang menahan seluruh isi halaman */
.sidebar {
    width: var(--rail-width);
    background: var(--ink);
    color: var(--paper);
    padding: 1.75rem 1.35rem 1.35rem;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 100;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 2.5rem;
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--paper);
}

.sidebar-brand .seal {
    color: #a98ad6;
    width: 24px;
    height: 24px;
}

.rail-label {
    font-family: var(--font-mono);
    font-size: 0.63rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(242, 242, 234, 0.42);
    margin-bottom: 0.85rem;
}

.sidebar-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex-grow: 1;
}

.sidebar-menu-item a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.85rem;
    color: rgba(242, 242, 234, 0.7);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: color var(--speed), background-color var(--speed);
}

.sidebar-menu-item a i {
    font-size: 0.85rem;
    width: 1rem;
    text-align: center;
    opacity: 0.75;
}

.sidebar-menu-item a:hover {
    color: var(--paper);
    background: rgba(242, 242, 234, 0.06);
}

.sidebar-menu-item.active a {
    color: var(--paper);
    background: rgba(242, 242, 234, 0.08);
    border-left-color: #a98ad6;
    font-weight: 600;
}

.sidebar-user {
    padding-top: 1.1rem;
    border-top: 1px solid rgba(242, 242, 234, 0.16);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.sidebar-user-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.sidebar-user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--paper);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-role {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(242, 242, 234, 0.5);
}

.logout-btn {
    color: rgba(242, 242, 234, 0.6);
    background: none;
    border: 1px solid rgba(242, 242, 234, 0.22);
    border-radius: 2px;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 0.85rem;
    transition: color var(--speed), border-color var(--speed);
}

.logout-btn:hover {
    color: var(--paper);
    border-color: rgba(242, 242, 234, 0.6);
}

.main-content {
    flex-grow: 1;
    margin-left: var(--rail-width);
    padding: 2.25rem 2.5rem 4rem;
    min-height: 100vh;
    width: calc(100% - var(--rail-width));
}

/* --------------------------------------------------------------------------
   Kepala halaman
   -------------------------------------------------------------------------- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding-bottom: 1.35rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--ink);
}

.page-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-3);
    margin-bottom: 0.6rem;
}

.page-title {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.028em;
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* Nama berkas hasil unggahan sering panjang tanpa spasi. Tanpa pemotongan,
   satu nama saja mendorong seluruh halaman melewati tepi layar. */
#report-filename {
    font-size: 1.35rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-note {
    font-family: var(--font-text);
    font-size: 0.95rem;
    color: var(--ink-2);
    margin-top: 0.5rem;
    max-width: 58ch;
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    margin-bottom: 1.25rem;
}

.breadcrumb-nav a {
    color: var(--ink-2);
    text-decoration: none;
    transition: color var(--speed);
}

.breadcrumb-nav a:hover {
    color: var(--stamp);
    text-decoration: underline;
}

.breadcrumb-nav .breadcrumb-current {
    color: var(--ink);
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumb-nav i.fa-chevron-right {
    font-size: 0.55rem;
    color: var(--rule);
}

/* --------------------------------------------------------------------------
   Lembar (kartu)
   -------------------------------------------------------------------------- */
.sheet {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 3px;
    box-shadow: 0 1px 0 0 var(--paper-3);
}

.sheet-pad {
    padding: 1.5rem;
}

.sheet-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-bottom: 0.85rem;
    margin-bottom: 1.35rem;
    border-bottom: 1px solid var(--rule);
}

.panel-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.panel-hint {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--ink-3);
}

/* Nilai yang hanya bisa dibaca, bukan disunting. Sengaja TIDAK memakai
   <input disabled>: kotak input yang abu-abu tetap mengundang orang
   mencoba mengetik dan mengira ada yang rusak. */
.form-value {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--ink);
    margin: 0.2rem 0 0.35rem;
    word-break: break-word;
}

/* Keterangan di bawah judul panel: kalimat penuh, bukan label monospace.
   Dipakai panel Kepentingan Fitur, yang harus menyatakan dengan jelas bahwa
   grafiknya berlaku se-model dan bukan penjelasan per paragraf. */
.panel-note {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--ink-3);
    margin: 0 0 1rem;
    max-width: 68ch;
}

.panel-note strong {
    color: var(--ink);
    font-weight: 600;
}

.panel-link {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--stamp);
    text-decoration: none;
    border-bottom: 1px solid var(--stamp-line);
}

.panel-link:hover {
    border-bottom-color: var(--stamp);
}

/* Alias lama supaya markup & skrip yang belum diperbarui tetap rapi */
.dashboard-panel { padding: 1.5rem; }
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-bottom: 0.85rem;
    margin-bottom: 1.35rem;
    border-bottom: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */
.grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1rem;
}

/* --------------------------------------------------------------------------
   Isian statistik — dibaca seperti kolom terisi pada formulir, bukan
   kartu SaaS dengan ikon di kotak membulat.
   -------------------------------------------------------------------------- */
.stats-card {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.15rem 1.25rem 1.2rem;
}

.stats-icon-wrapper {
    order: 2;
    margin-left: auto;
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    border: 1px solid var(--rule);
    color: var(--ink-3);
    background: transparent;
}

.stats-icon-primary {
    border-color: var(--stamp-line);
    color: var(--stamp);
    background: var(--stamp-wash);
}

.stats-icon-human {
    border-color: var(--aman-line);
    color: var(--aman);
    background: var(--aman-bg);
}

.stats-icon-gemini {
    border-color: var(--tinjau-line);
    color: var(--tinjau);
    background: var(--tinjau-bg);
}

.stats-icon-ai {
    border-color: var(--periksa-line);
    color: var(--periksa);
    background: var(--periksa-bg);
}

.stats-info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.stats-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
    order: 1;
}

.stats-value {
    order: 2;
    font-family: var(--font-mono);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Tombol — monospace, karena setiap tombol di sini adalah perintah
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color var(--speed), border-color var(--speed), color var(--speed);
}

.btn-primary {
    background: var(--stamp);
    border-color: var(--stamp);
    color: #fbfbf6;
}

.btn-primary:hover {
    background: var(--stamp-deep);
    border-color: var(--stamp-deep);
}

.btn-secondary {
    background: transparent;
    border-color: var(--rule);
    color: var(--ink);
}

.btn-secondary:hover {
    background: var(--paper-2);
    border-color: var(--ink-3);
}

.btn-danger {
    background: transparent;
    border-color: var(--periksa-line);
    color: var(--periksa);
}

.btn-danger:hover {
    background: var(--periksa);
    border-color: var(--periksa);
    color: #fbfbf6;
}

.btn-block {
    width: 100%;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.btn-sm {
    padding: 0.4rem 0.7rem;
    font-size: 0.7rem;
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Lencana
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.24rem 0.5rem;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.67rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    white-space: nowrap;
    border: 1px solid var(--rule);
    color: var(--ink-2);
    background: var(--paper-2);
}

.badge-low,
.badge-human {
    background: var(--aman-bg);
    color: var(--aman);
    border-color: var(--aman-line);
}

.badge-medium,
.badge-gemini {
    background: var(--tinjau-bg);
    color: var(--tinjau);
    border-color: var(--tinjau-line);
}

.badge-high,
.badge-chatgpt {
    background: var(--periksa-bg);
    color: var(--periksa);
    border-color: var(--periksa-line);
}

/* Peran bukan tingkat risiko — dipisahkan supaya "admin" tidak terbaca
   sebagai peringatan merah. */
.badge-role {
    background: var(--stamp-wash);
    color: var(--stamp);
    border-color: var(--stamp-line);
}

/* --------------------------------------------------------------------------
   Tabel
   -------------------------------------------------------------------------- */
.table-container {
    width: 100%;
    overflow-x: auto;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.custom-table th {
    padding: 0 0.5rem 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--ink-3);
    border-bottom: 1.5px solid var(--ink);
    white-space: nowrap;
}

.custom-table td {
    padding: 0.8rem 0.5rem;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    vertical-align: middle;
    /* Angka dan tanggal tidak boleh patah dua baris; kolom nama berkas sudah
       punya max-width + ellipsis sendiri saat dirender skrip. */
    white-space: nowrap;
}

.custom-table tbody tr:last-child td {
    border-bottom: none;
}

.custom-table tbody tr {
    transition: background-color var(--speed);
}

.custom-table tbody tr:hover {
    background-color: var(--paper-2);
}

.table-empty {
    text-align: center;
    color: var(--ink-3);
    padding: 3rem 1rem !important;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Formulir
   -------------------------------------------------------------------------- */
.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--ink-3);
    margin-bottom: 0.45rem;
}

.form-input,
.form-select {
    width: 100%;
    padding: 0.65rem 0.8rem;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: 2px;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    outline: none;
    transition: border-color var(--speed), background-color var(--speed);
}

.form-input::placeholder {
    color: var(--ink-3);
    opacity: 0.75;
}

.form-input:focus,
.form-select:focus {
    border-color: var(--stamp);
    background: var(--card);
    box-shadow: inset 0 0 0 1px var(--stamp);
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236e7568'%3E%3Cpath stroke-linecap='round' stroke-width='2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1.1rem;
    padding-right: 2.2rem;
}

.form-hint {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--ink-3);
    margin-top: 0.4rem;
    letter-spacing: 0.02em;
}

.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

/* Sakelar */
.switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--paper-3);
    border: 1px solid var(--rule);
    border-radius: 2px;
    transition: background-color 0.2s, border-color 0.2s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    top: 2px;
    background-color: var(--card);
    border: 1px solid var(--rule);
    border-radius: 1px;
    transition: transform 0.2s;
}

input:checked + .slider {
    background-color: var(--stamp);
    border-color: var(--stamp);
}

input:checked + .slider:before {
    transform: translateX(20px);
    border-color: var(--stamp-deep);
}

input:focus-visible + .slider {
    outline: 2px solid var(--stamp);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Halaman masuk
   -------------------------------------------------------------------------- */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 2rem 1.25rem;
    background:
        repeating-linear-gradient(
            180deg,
            transparent,
            transparent 31px,
            rgba(27, 30, 25, 0.045) 31px,
            rgba(27, 30, 25, 0.045) 32px
        ),
        var(--paper);
}

.login-card {
    width: 100%;
    max-width: 400px;
    padding: 2.5rem 2.25rem 2rem;
}

.login-mark {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--stamp);
    margin-bottom: 1.75rem;
}

.login-mark-text {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink);
}

/* Jarak ke bawah 2rem, bukan 0.5rem: judul ini dulu diikuti subjudul yang
   memegang jarak itu. Subjudulnya dihapus, jadi jaraknya pindah ke sini —
   kalau tidak, judul langsung menempel pada medan Username. */
.login-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 2rem;
}

.login-foot {
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.input-affix {
    position: relative;
}

.input-affix > i {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
    font-size: 0.8rem;
    pointer-events: none;
}

.input-affix .form-input {
    padding-left: 2.3rem;
}

/* --------------------------------------------------------------------------
   Zona unggah
   -------------------------------------------------------------------------- */
.upload-zone {
    border: 1.5px dashed var(--ink-3);
    border-radius: 3px;
    padding: 2.25rem 1.5rem;
    text-align: center;
    cursor: pointer;
    background: var(--card);
    transition: border-color var(--speed), background-color var(--speed);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.upload-zone:hover,
.upload-zone.dragover {
    border-color: var(--stamp);
    background: var(--stamp-wash);
}

.upload-icon {
    width: 2.75rem;
    height: 2.75rem;
    border: 1.5px solid var(--stamp-line);
    border-radius: 2px;
    color: var(--stamp);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.35rem;
}

.upload-text {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.upload-subtext {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    color: var(--ink-3);
}

.upload-or {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-3);
    margin: 0.35rem 0;
}

.progress-container {
    width: 100%;
    background: var(--paper-3);
    height: 4px;
    overflow: hidden;
    margin-top: 1.25rem;
    display: none;
}

.progress-bar {
    height: 100%;
    background: var(--stamp);
    width: 0%;
    transition: width 0.4s ease;
}

.status-message {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-2);
    text-align: center;
    margin-top: 1rem;
    display: none;
}

/* --------------------------------------------------------------------------
   Ruang baca laporan
   -------------------------------------------------------------------------- */
.analyze-layout {
    display: grid;
    /* minmax(0, ...) alih-alih 1fr polos: item grid default min-width-nya auto,
       jadi kolom menolak menyusut di bawah lebar intrinsik isinya dan tata
       letak melewati tepi layar saat ada string panjang tanpa spasi. */
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.text-viewer-panel {
    padding: 1.5rem;
    height: 68vh;
    min-height: 420px;
    display: flex;
    flex-direction: column;
}

.text-viewer-content {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.35rem 1.5rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
    font-family: var(--font-text);
    font-size: 1rem;
    line-height: 1.95;
    color: var(--ink);
    /* pre-wrap mempertahankan pemenggalan baris dokumen tapi tidak memecah
       deretan karakter panjang. Teks hasil ekstraksi PDF penuh dengan itu
       (URL, kata yang menempel), jadi tanpa aturan pemecah eksplisit deretan
       tersebut mendorong panel melewati tepi kanan layar. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

/* Penanda chunk.
   Tulisan manusia sengaja TIDAK ditandai — pemeriksa hanya menandai yang
   mencurigakan. Kelas dibedakan lewat bentuk garis (bergelombang vs ganda),
   bukan hanya warna, supaya tetap terbaca tanpa membedakan warna. */
.chunk-highlight {
    cursor: pointer;
    padding: 0.05em 0.06em;
    border-radius: 2px;
    transition: background-color var(--speed), box-shadow var(--speed);
}

.chunk-highlight.highlight-Manusia {
    background: transparent;
}

.chunk-highlight.highlight-ChatGPT {
    background: var(--periksa-bg);
    text-decoration: underline wavy var(--periksa);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

.chunk-highlight.highlight-Gemini {
    background: var(--tinjau-bg);
    text-decoration: underline double var(--tinjau);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.chunk-highlight:hover {
    background-color: var(--paper-2);
}

.chunk-highlight.active-chunk {
    background-color: var(--stamp-wash);
    box-shadow: inset 0 0 0 1px var(--stamp-line);
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    color: var(--ink-2);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.legend-sample {
    font-family: var(--font-text);
    font-size: 0.85rem;
}

.legend-sample.is-chatgpt {
    text-decoration: underline wavy var(--periksa);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

.legend-sample.is-gemini {
    text-decoration: underline double var(--tinjau);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Panel metrik */
.chunk-detail-card {
    padding: 1.5rem;
}

.chunk-detail-title {
    font-size: 1rem;
    font-weight: 700;
    padding-bottom: 0.85rem;
    margin-bottom: 1.35rem;
    border-bottom: 1px solid var(--rule);
}

.metric-group-title {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-3);
    margin-bottom: 0.85rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--rule);
}

.feature-bar-group {
    margin-bottom: 0.9rem;
}

.feature-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.78rem;
    color: var(--ink-2);
    margin-bottom: 0.35rem;
}

.feature-bar-label > span:last-child {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.feature-bar-bg {
    width: 100%;
    background: var(--paper-3);
    height: 7px;
    overflow: hidden;
}

.feature-bar-fill {
    height: 100%;
    background: var(--stamp);
    transition: width 0.45s ease;
}

.fill-human { background: var(--aman); }
.fill-chatgpt { background: var(--periksa); }
.fill-gemini { background: var(--tinjau); }

/* Bacaan instrumen: skor tiap API */
.reading-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.reading {
    background: var(--card);
    padding: 0.7rem 0.5rem;
    text-align: center;
}

.reading-name {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    margin-bottom: 0.3rem;
}

.reading-value {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Catatan tahap yang dilewati.
   Muncul persis di tempat bagian "fitur linguistik" seharusnya berada, jadi
   tugasnya menjelaskan sebuah ketiadaan — bukan melabeli status. Karena itu
   bentuknya catatan bergaris tepi, bukan lencana. */
.skip-note {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem 0.7rem;
    padding: 0.75rem 0.9rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--aman-line);
    border-left-width: 3px;
    border-radius: 2px;
    background: var(--aman-bg);
}

.skip-note-tag {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1.5;
    white-space: nowrap;
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--aman-line);
    border-radius: 2px;
    color: var(--aman);
    flex-shrink: 0;
}

.skip-note-text {
    flex: 1 1 12rem;
    min-width: 0;
    font-family: var(--font-text);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--aman);
}

/* Definisi fitur linguistik */
.metric-def {
    padding: 0.75rem 0;
    border-bottom: 1px dotted var(--rule);
}

.metric-def:last-child {
    border-bottom: none;
}

.metric-def-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.2rem;
}

.metric-def-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
}

.metric-def-value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.metric-def-note {
    font-family: var(--font-text);
    font-size: 0.8rem;
    color: var(--ink-2);
    line-height: 1.45;
}

.metrics-placeholder {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: var(--ink-3);
    text-align: center;
    padding: 3.5rem 1rem;
}

/* Baris metadata dokumen */
.meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--card);
    overflow: hidden;
}

.meta-cell {
    flex: 1 1 150px;
    padding: 0.7rem 0.9rem;
    border-right: 1px solid var(--rule);
}

.meta-cell:last-child {
    border-right: none;
}

.meta-key {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--ink-3);
    margin-bottom: 0.25rem;
}

.meta-val {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Putusan risiko dicap seperti stempel pada lembar pemeriksaan */
#report-risk-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1;
    padding: 0.5rem 0.85rem 0.45rem 1rem;
    border: 2.5px solid currentColor;
    border-radius: 3px;
    transform: rotate(-3.5deg);
    transform-origin: left center;
    color: var(--ink-3);
    margin: 0.25rem 0 0.35rem;
}

.stats-card:has(.stats-icon-human) #report-risk-label { color: var(--aman); }
.stats-card:has(.stats-icon-gemini) #report-risk-label { color: var(--tinjau); }
.stats-card:has(.stats-icon-ai) #report-risk-label { color: var(--periksa); }

/* --------------------------------------------------------------------------
   Tab
   -------------------------------------------------------------------------- */
.tabs-container {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
}

.tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 0.73rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    padding: 0.65rem 0.9rem;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color var(--speed), border-color var(--speed);
}

.tab-btn:hover {
    color: var(--ink);
}

.tab-btn.active {
    color: var(--ink);
    border-bottom-color: var(--stamp);
}

/* --------------------------------------------------------------------------
   Peringatan
   -------------------------------------------------------------------------- */
.alert-banner {
    padding: 0.85rem 1.1rem;
    border-radius: 2px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
    border: 1px solid var(--rule);
    border-left-width: 3px;
    background: var(--card);
    animation: slide-in 0.3s ease;
}

.alert-banner button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.6;
    font-size: 0.85rem;
}

.alert-banner button:hover {
    opacity: 1;
}

.alert-danger {
    border-color: var(--periksa-line);
    border-left-color: var(--periksa);
    background: var(--periksa-bg);
    color: var(--periksa);
}

.alert-success {
    border-color: var(--aman-line);
    border-left-color: var(--aman);
    background: var(--aman-bg);
    color: var(--aman);
}

@keyframes slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(27, 30, 25, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-panel {
    width: 100%;
    max-width: 380px;
    padding: 1.85rem;
    transform: translateY(10px);
    transition: transform 0.22s ease;
}

.modal-overlay.active .modal-panel {
    transform: translateY(0);
}

.modal-icon-wrapper {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 2px;
    background: var(--periksa-bg);
    color: var(--periksa);
    border: 1px solid var(--periksa-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    margin-bottom: 1.1rem;
}

.modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
}

.modal-text {
    font-family: var(--font-text);
    font-size: 0.95rem;
    color: var(--ink-2);
    margin-bottom: 1.6rem;
    line-height: 1.55;
}

.modal-actions {
    display: flex;
    gap: 0.6rem;
}

.modal-actions .btn {
    flex: 1;
}

/* --------------------------------------------------------------------------
   Responsif
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .analyze-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .text-viewer-panel {
        height: auto;
        max-height: 60vh;
    }
}

@media (max-width: 900px) {
    .app-container {
        flex-direction: column;
    }
    .sidebar {
        position: static;
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        padding: 0.85rem 1.25rem;
        overflow-x: auto;
    }
    .sidebar-brand {
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .sidebar-brand span:not(.seal) {
        display: none;
    }
    .rail-label {
        display: none;
    }
    .sidebar-menu {
        flex-direction: row;
        gap: 0.25rem;
        flex-grow: 1;
    }
    .sidebar-menu-item a {
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
        padding: 0.5rem 0.7rem;
    }
    .sidebar-menu-item.active a {
        border-left-color: transparent;
        border-bottom-color: #a98ad6;
    }
    .sidebar-user {
        border-top: none;
        padding-top: 0;
        flex-shrink: 0;
    }
    .sidebar-user-info {
        display: none;
    }
    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 1.5rem 1.15rem 3rem;
    }
    .page-header {
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .stats-value {
        font-size: 1.45rem;
    }
    .page-title {
        font-size: 1.35rem;
    }
    .meta-cell {
        flex-basis: 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .stamp,
    #report-risk-label {
        transform: rotate(-3.5deg);
    }
}

/* Paragraf yang tidak dianalisis: abu-abu bergaris putus, jelas BUKAN hijau.
   Tanpa aturan ini, kelas highlight-nya tidak cocok apa pun dan paragraf yang
   tidak pernah diperiksa tampil dengan latar netral yang mudah dibaca sebagai
   "aman". */
.chunk-highlight.highlight-dikecualikan {
    background: var(--surface-2, #f1f5f9);
    color: var(--text-muted, #64748b);
    border-bottom: 1px dashed var(--text-muted, #94a3b8);
}