/* ============================================================
   PINUS VERTICAL CLIMBING CLUB — Stylesheet
   Tema: "Podium" — emas medali, basalt gelap, kapur hangat.
   Terinspirasi dunia speed climbing: medali, dinding panjat,
   kapur magnesium, dan tampilan stopwatch digital kompetisi.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
    /* --- Palet tema (nilai bawaan = Ungu & Kuning). Diganti otomatis dari menu Tampilan --- */
    --p-awal: #3B0A7A;
    --p-akhir: #A21CAF;
    --pr-700: #6D28D9;
    --pr-600: #7C3AED;
    --pr-500: #8B5CF6;
    --pr-400: #A78BFA;
    --pr-300: #C4A3FF;
    --pr-300b: #C4B5FD;
    --pr-200: #CDBAF5;
    --pr-200b: #DCCBFF;
    --pr-200c: #DCD2EE;
    --pr-150: #E2DAF0;
    --pr-150b: #E4D7FF;
    --pr-150c: #E4DAF7;
    --pr-100: #EDE5FF;
    --pr-100b: #F1EBFF;
    --pr-100c: #EEE8FA;
    --pr-100d: #F1EAFF;
    --pr-50: #F5F0FF;
    --pr-50b: #F6F1FF;
    --pr-25: #FAF8FF;
    --pr-25b: #F7F5FC;
    --pr-800: #5B21B6;
    --pr-850: #4C1D95;
    --pr-900: #2E1065;
    --teks-lembut: #5B4A7A;
    --teks-redup: #6B6080;
    --nt-50: #F8F7FB;
    --nt-50b: #F7F6FA;
    --nt-100: #F1EEF6;
    --nt-100b: #EEE9F6;
    --nt-150: #E9E4F2;
    --nt-300: #C9C2D8;
    --a-awal: #FFC300;
    --a-tengah: #FFD43B;
    --a-akhir: #FFE45C;
    --ak-200: #FFF08A;
    --pr-850-rgb: 76, 29, 149;
    --pr-700-rgb: 109, 40, 217;
    --pr-500-rgb: 139, 92, 246;
    --pr-900-rgb: 46, 16, 101;
    --pr-950-rgb: 30, 6, 70;
    --pr-925-rgb: 46, 6, 100;
    --pr-800-rgb: 91, 33, 182;
    --pr-600-rgb: 124, 58, 237;
    --pr-400-rgb: 167, 139, 250;
    --p-akhir-rgb: 162, 28, 175;
    --a-tengah-rgb: 255, 212, 59;
    --a-awal-rgb: 255, 195, 0;
    --grafik-bantu: #EEEAF5;
    --grafik-sumbu: #DDD6EA;
    --panas-0: #F1E9FF;
    --panas-1: #DCC8FF;
    --panas-2: #C4A3FF;
    --panas-3: #A970FF;
    --panas-4: #7C3AED;
    --panas-teks: #2E1065;
    --panas-teks-tua: #FFFFFF;
    --teks-di-primer: #FFFFFF;
    --teks-di-primer-rgb: 255, 255, 255;
    --teks-di-primer-lembut: #EDE5FF;
    --teks-di-aksen: #2E1065;
    --aksen-di-primer: #FFD43B;
    /* ============================================================
       TEMA UNGU & KUNING
       - Ungu = warna dasar (menu, kartu angka, kartu portal). Teks di
         atasnya PUTIH (minimal 6,3:1 di seluruh gradasi).
       - Kuning = aksen (tombol, angka penting, penanda aktif). Teks di
         atasnya UNGU TUA (10:1).
       - Ungu & kuning sengaja tidak dicampur dalam satu gradasi: titik
         tengahnya jadi cokelat kusam.
       - Latar halaman putih bersih, tanpa krem.
       ============================================================ */
    --grad-ungu: linear-gradient(115deg, var(--p-awal) 0%, var(--pr-700) 52%, var(--p-akhir) 100%);
    --grad-kuning: linear-gradient(115deg, var(--a-awal) 0%, var(--a-tengah) 50%, var(--a-akhir) 100%);
    --kuning: var(--a-tengah);
    --ungu: var(--pr-700);
    --ungu-tua: var(--pr-900);

    /* Nama variabel lama dipertahankan supaya semua halaman ikut berubah */
    --gold: var(--pr-500);          /* ungu terang - garis aksen, fokus */
    --gold-dark: var(--pr-700);     /* ungu - teks tautan (7,1:1 di atas putih) */
    --gold-light: var(--pr-50);    /* lavender sangat muda - latar lembut tipis */
    --basalt: var(--pr-900);        /* ungu tua - teks utama */
    --basalt-soft: var(--teks-lembut);   /* teks sekunder */
    --chalk: #FFFFFF;
    --card-bg: #FFFFFF;

    /* -- Warna semantik (status) -- */
    --pine: #2F6B4F;
    --pine-light: #DEF2E6;
    --rust: #B4510F;
    --rust-light: #FFE6CC;
    --danger: #C0352B;
    --danger-light: #FDE2DE;

    --border: var(--nt-150);
    --muted: var(--teks-redup);
    --text: var(--pr-900);
    --radius: 14px;
    --shadow: 0 4px 18px rgba(var(--pr-700-rgb), 0.07), 0 1px 3px rgba(var(--pr-900-rgb), 0.05);
    --shadow-lift: 0 12px 30px rgba(var(--pr-700-rgb), 0.18);

    --font-display: 'Oswald', sans-serif;
    --font-body: 'Work Sans', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--chalk);
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
}

a { color: var(--gold-dark); text-decoration: none; font-weight: 600; }
a:hover { color: var(--gold); text-decoration: underline; }

h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--basalt);
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-top: 0;
}
h1 { font-size: 26px; }
h2 { font-size: 19px; }
h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--basalt-soft); }

/* ---------- Elemen ciri khas: tampilan angka waktu ala stopwatch digital ---------- */
.mono-time {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 600;
    background: var(--basalt);
    color: var(--gold);
    padding: 2px 9px;
    border-radius: 6px;
    letter-spacing: 0.02em;
    font-size: 0.95em;
}

/* ---------- Layout ---------- */
.navbar {
    background: var(--basalt);
    color: #fff;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 3px solid var(--gold);
}
.navbar .brand {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 19px;
    padding: 15px 0;
    color: #fff;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.navbar .brand span { color: var(--gold); }
.navbar nav { display: flex; flex-wrap: wrap; }
.navbar nav a {
    color: #E4DFD3;
    padding: 17px 13px;
    display: inline-block;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
}
.navbar nav a:hover, .navbar nav a.active {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 3px solid var(--gold);
}
.navbar .user-info { color: #B9B2A0; font-size: 12px; padding: 15px 0; font-family: var(--font-mono); }

.container {
    max-width: 1100px;
    margin: 24px auto;
    padding: 0 16px;
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

/* ---------- Forms ---------- */
label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
input, select, textarea {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 14px;
    font-family: var(--font-body);
    background: var(--card-bg);
    color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-light); }
.form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.form-row > div { flex: 1; min-width: 180px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.checkbox-row input { width: auto; margin: 0; accent-color: var(--gold-dark); }
.checkbox-row label { margin: 0; font-weight: 400; text-transform: none; color: var(--text); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    background: var(--gold);
    color: var(--basalt);
    transition: background 0.15s ease, transform 0.1s ease;
}
.btn:hover { background: var(--gold-dark); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-secondary { background: var(--basalt-soft); color: #fff; }
.btn-secondary:hover { background: var(--basalt); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #7E2A21; }
.btn-sm { padding: 6px 12px; font-size: 11px; }
.btn-accent { background: var(--basalt); color: var(--gold); }
.btn-accent:hover { background: #000; color: var(--gold); }

/* ---------- Table ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 11px; border-bottom: 1px solid var(--border); text-align: left; }
th { background: var(--gold-light); color: var(--basalt); font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
tr:hover td { background: var(--nt-50); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Alerts / Flash ---------- */
.alert { padding: 13px 15px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; border: 1px solid transparent; }
.alert-success { background: var(--pine-light); color: var(--pine); border-color: #C2DACB; }
.alert-danger { background: var(--danger-light); color: var(--danger); border-color: #E7C4BE; }

/* ---------- Badge ---------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; }
.badge-green { background: var(--pine-light); color: var(--pine); }
.badge-gray { background: var(--nt-100); color: var(--basalt-soft); }
.badge-orange { background: var(--rust-light); color: var(--rust); }

/* ---------- Dashboard cards (gaya papan skor) ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 20px; align-items: start; }
.chart-grid .card { margin-bottom: 0; }
.stat-card {
    background: var(--basalt);
    border: 1px solid var(--basalt);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius);
    padding: 20px 18px;
    text-align: center;
    box-shadow: var(--shadow);
}
.stat-card .num { font-family: var(--font-mono); font-size: 32px; font-weight: 600; color: var(--gold); }
.stat-card .label { font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #C7C0AE; margin-top: 6px; }

/* Kartu statistik varian terang (dipakai di halaman Peringkat untuk podium) */
.stat-card.stat-card-light {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: 3px solid var(--gold);
}
.stat-card.stat-card-light .num { color: var(--basalt); font-family: var(--font-body); }
.stat-card.stat-card-light .label { color: var(--muted); }

/* ---------- Login page ---------- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 20%, rgba(200,155,60,0.15), transparent 40%),
        linear-gradient(160deg, #0F0E0C, var(--basalt) 60%);
}
.login-box {
    background: var(--card-bg);
    padding: 40px 36px;
    border-radius: 16px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    border-top: 4px solid var(--gold);
}
.login-box h1 { text-align: center; font-size: 21px; }
.login-box p.subtitle { text-align: center; color: var(--muted); font-size: 12px; margin-top: -8px; margin-bottom: 26px; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-display); }

/* ---------- Hasil latihan dynamic table ---------- */
.hasil-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.hasil-row select, .hasil-row input { margin-bottom: 0; }
.hasil-row .col-materi { flex: 2.2; }
.hasil-row .col-blok { flex: 1.2; }
.hasil-row .col-num { flex: 0.8; }
.hasil-row .col-remove { flex: 0 0 auto; }
.hasil-row-header {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--gold-light);
    padding-bottom: 8px;
    margin-bottom: 10px;
}

footer.app-footer { text-align: center; color: var(--muted); font-size: 12px; padding: 26px 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; }

/* ============================================================
   RESPONSIVE: Navbar dengan hamburger menu
   ============================================================ */
.navbar { position: relative; }
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--gold);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 12px 6px;
}
.nav-toggle:focus { outline: 2px solid var(--gold); }

@media (max-width: 1024px) {
    .container { margin: 18px auto; }
    .stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (max-width: 860px) {
    .navbar { flex-wrap: wrap; padding: 0 14px; }
    .navbar .brand { flex: 1; font-size: 16px; }
    .nav-toggle { display: block; }
    .navbar nav {
        display: none;
        flex-direction: column;
        width: 100%;
        background: var(--basalt);
        margin: 0 -14px;
        order: 3;
    }
    .navbar nav.open { display: flex; }
    .navbar nav a {
        width: 100%;
        padding: 14px 16px;
        border-top: 1px solid rgba(255,255,255,0.1);
        border-bottom: none;
        min-height: 44px;
        box-sizing: border-box;
    }
    .navbar nav a:hover, .navbar nav a.active { border-bottom: none; background: rgba(200,155,60,0.12); }
    .navbar .user-info {
        order: 2;
        width: auto;
        padding: 14px 0;
        font-size: 11px;
    }
}

@media (max-width: 640px) {
    body { font-size: 14px; }
    .container { padding: 0 12px; margin: 14px auto; }
    .card { padding: 16px; border-radius: 10px; }

    h1 { font-size: 21px; }
    h2 { font-size: 16px; }
    h3 { font-size: 13px; }

    .page-header { flex-direction: column; align-items: stretch; }
    .page-header > div { display: flex; flex-direction: column; gap: 8px; }
    .page-header .btn, .page-header a.btn { width: 100%; text-align: center; }

    .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { padding: 14px; }
    .stat-card .num { font-size: 24px; }

    input, select, textarea {
        font-size: 16px;
        padding: 11px 12px;
    }
    .btn { padding: 12px 16px; font-size: 13px; min-height: 44px; }
    .btn-sm { padding: 9px 12px; font-size: 11px; min-height: 38px; }

    .form-row { flex-direction: column; gap: 0; }
    .form-row > div { min-width: 100%; }

    .table-wrap { position: relative; }
    table { font-size: 13px; }
    th, td { padding: 8px 8px; white-space: nowrap; }

    .hasil-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px;
        margin-bottom: 10px;
        background: var(--nt-50);
    }
    .hasil-row select, .hasil-row input { margin-bottom: 0; }
    .hasil-row > div { flex: none !important; width: 100%; }
    .hasil-row .col-remove { align-self: flex-end; width: auto; }
    .hasil-row .col-remove .btn { width: auto; min-width: 44px; }
    .hasil-row-header { display: none; }

    .login-box { padding: 28px 22px; margin: 0 16px; }

    .checkbox-row { min-height: 28px; }
    .checkbox-row input { width: 20px; height: 20px; }
}

@media (min-width: 641px) and (max-width: 900px) {
    .hasil-row-header { display: none; }
    .hasil-row {
        flex-wrap: wrap;
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px;
        margin-bottom: 10px;
        background: var(--nt-50);
    }
    .hasil-row .col-materi { flex: 1 1 100%; }
    .hasil-row .col-blok { flex: 1 1 48%; }
    .hasil-row .col-num { flex: 1 1 30%; }
    .hasil-row .col-remove { flex: 0 0 auto; margin-left: auto; }
}

/* Canvas grafik Chart.js: pastikan selalu menyesuaikan lebar kontainer */
canvas { max-width: 100%; }

/* ---------- Pilih banyak atlet sekaligus ---------- */
.atlet-pilih-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.atlet-pilih-toolbar input[type="text"] { max-width: 260px; margin: 0; }
.atlet-pilih-toolbar .jumlah { color: var(--muted); font-size: 13px; margin-left: auto; }
.atlet-pilih-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px 14px;
    max-height: 320px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 14px;
}
.atlet-pilih-item { margin: 0; }
.atlet-pilih-item .kat { color: var(--muted); font-size: 12px; }

/* ---------- Pilih hari berulang (salin sesi) ---------- */
.hari-pilih { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px; }
.hari-pilih .checkbox-row { margin: 0; }
.row-terjadwal td { background: var(--pr-50b); }

/* Form tombol hapus supaya tetap sejajar dengan tombol lain di baris tabel */
.form-sebaris { display: inline-block; margin: 0; }
.form-sebaris button { vertical-align: middle; }

/* ============================================================
   MOBILE & TABLET
   Tujuan: tidak ada lagi tabel yang harus digeser ke samping,
   dan semua yang bisa disentuh cukup besar untuk jempol.
   ============================================================ */

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

/* ---------- Tablet (2 kolom terasa sempit) ---------- */
@media (max-width: 1024px) {
    .chart-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
    .atlet-pilih-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

@media (max-width: 860px) {
    /* Menu selalu terjangkau tanpa perlu menggulir ke atas dulu */
    .navbar { position: sticky; top: 0; z-index: 50; }
    .navbar nav { max-height: 70vh; overflow-y: auto; }

    .chart-grid { grid-template-columns: 1fr; }
    .card { margin-bottom: 14px; }
}

/* ============================================================
   Tabel -> kartu bertumpuk di layar kecil.
   Label tiap baris diisi otomatis oleh script di includes/footer.php
   (diambil dari <thead>), jadi tidak ada markup tabel yang perlu diubah.
   ============================================================ */
@media (max-width: 760px) {
    .table-wrap { overflow-x: visible; }

    .table-wrap table,
    .table-wrap tbody,
    .table-wrap tr,
    .table-wrap td { display: block; width: 100%; }

    .table-wrap thead { display: none; }

    .table-wrap tr {
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 6px 14px;
        margin-bottom: 12px;
        background: var(--card-bg);
        box-shadow: 0 1px 4px rgba(28,27,24,0.05);
    }
    .table-wrap tr:hover td { background: transparent; }

    .table-wrap td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding: 10px 0;
        border-bottom: 1px dashed var(--border);
        white-space: normal;
        text-align: right;
        font-size: 14px;
        min-height: 42px;
    }
    .table-wrap tr td:last-child { border-bottom: none; }

    /* Nama kolom tampil sebagai label di kiri */
    .table-wrap td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 48%;
        text-align: left;
        font-family: var(--font-display);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--muted);
        font-weight: 600;
    }

    /* Kolom pertama dijadikan judul kartu */
    .table-wrap td.td-judul {
        display: block;
        text-align: left;
        font-size: 16px;
        font-weight: 600;
        color: var(--basalt);
        padding-top: 12px;
        padding-bottom: 10px;
    }
    .table-wrap td.td-judul::before { display: none; }
    .table-wrap td.td-judul a { font-size: 16px; }

    /* Sel berisi tombol aksi: disusun sebaris penuh di bawah kartu */
    .table-wrap td.td-aksi {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 12px;
        padding-bottom: 4px;
    }
    .table-wrap td.td-aksi::before { display: none; }
    .table-wrap td.td-aksi > *,
    .table-wrap td.td-aksi .form-sebaris { flex: 1 1 auto; }
    .table-wrap td.td-aksi .btn,
    .table-wrap td.td-aksi button { width: 100%; text-align: center; }

    /* Baris "tidak ada data" (pakai colspan) tetap tampil polos */
    .table-wrap td.td-kosong {
        display: block;
        text-align: center;
        color: var(--muted);
        padding: 16px 0;
        border-bottom: none;
    }
    .table-wrap td.td-kosong::before { display: none; }

    /* Sel kosong disembunyikan supaya kartu tidak berisi baris hampa */
    .table-wrap td.td-hampa { display: none; }

    .row-terjadwal { background: var(--pr-50b); }
    .row-terjadwal td { background: transparent; }
}

/* ---------- Kenyamanan sentuh di ponsel ---------- */
@media (max-width: 640px) {
    /* Jarak aman untuk ponsel berponi */
    body { padding-bottom: env(safe-area-inset-bottom); }

    /* Tombol di dalam form sebaris ikut melebar */
    .form-sebaris { display: block; }
    .form-sebaris button { width: 100%; }

    /* Daftar centang atlet: baris lebih tinggi & pencarian menempel di atas */
    .atlet-pilih-grid {
        grid-template-columns: 1fr;
        max-height: 300px;
        gap: 0;
        padding: 4px 12px;
    }
    .atlet-pilih-item {
        min-height: 46px;
        padding: 4px 0;
        border-bottom: 1px solid var(--border);
    }
    .atlet-pilih-item:last-child { border-bottom: none; }
    .atlet-pilih-toolbar { gap: 8px; }
    .atlet-pilih-toolbar input[type="text"] { max-width: none; flex: 1 1 100%; }
    .atlet-pilih-toolbar .jumlah { margin-left: 0; flex: 1 1 100%; }

    /* Pilihan hari pada Salin Sesi: 2 kolom, target sentuh lega */
    .hari-pilih { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
    .hari-pilih .checkbox-row { min-height: 44px; }

    /* Grafik jangan terlalu pendek sampai label bertumpuk */
    .card canvas { min-height: 220px; }

    /* Badge di dalam sel agar tidak terpotong */
    .badge { white-space: nowrap; }
}

@media (max-width: 380px) {
    .stat-grid { grid-template-columns: 1fr; }
    .hari-pilih { grid-template-columns: 1fr; }
}

/* ============================================================
   Kartu atlet yang bisa dilipat (halaman Detail Sesi)
   ============================================================ */
.atlet-blok { padding: 0; }
.atlet-blok > *:not(summary) { padding-left: 22px; padding-right: 22px; }
.atlet-blok > summary + * { padding-top: 16px; }
.atlet-blok-kaki { padding-bottom: 20px; }

.atlet-blok-judul {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 22px;
    border-radius: var(--radius);
    user-select: none;
}
.atlet-blok-judul::-webkit-details-marker { display: none; }
.atlet-blok-judul:hover { background: var(--pr-25); }
.atlet-blok-judul:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.atlet-blok-judul .nama {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--basalt);
}
.atlet-blok-judul .jumlah-hasil {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Tanda panah buka/tutup */
.atlet-blok-judul::after {
    content: "\25BC";
    color: var(--gold-dark);
    font-size: 11px;
    transition: transform 0.2s ease;
}
.atlet-blok[open] > .atlet-blok-judul::after { transform: rotate(180deg); }
.atlet-blok[open] > .atlet-blok-judul { border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }

@media (max-width: 640px) {
    .atlet-blok > *:not(summary) { padding-left: 16px; padding-right: 16px; }
    .atlet-blok-judul { padding: 14px 16px; gap: 8px; }
    .atlet-blok-judul .nama { font-size: 16px; }
    .atlet-blok-judul .jumlah-hasil { margin-left: 0; flex-basis: 100%; }
}


/* ---------- Lencana level & kategori atlet ---------- */
.badge-level { background: var(--basalt); color: var(--gold); }
.badge-kategori { background: var(--gold-light); color: var(--gold-dark); border: 1px solid var(--pr-200); }
.lencana-baris { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- Pilihan kategori berupa kotak centang ---------- */
.pilih-kategori { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 14px; }
.pilih-kategori .checkbox-row { margin: 0; min-height: 36px; }
@media (max-width: 640px) {
    .pilih-kategori { display: grid; grid-template-columns: 1fr 1fr; }
    .pilih-kategori .checkbox-row { min-height: 44px; }
}

/* ---------- Chip ringkasan & filter cepat ---------- */
.ringkas-chip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; align-items: center; }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--card-bg);
    color: var(--basalt-soft); font-size: 13px; font-weight: 500;
}
.chip b { font-family: var(--font-mono); color: var(--basalt); }
.chip:hover { border-color: var(--gold); text-decoration: none; color: var(--basalt); }
.chip-aktif { background: var(--basalt); border-color: var(--basalt); color: #fff; }
.chip-aktif b { color: var(--gold); }
.chip-pemisah { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }

/* ---------- Avatar atlet ---------- */
.avatar { display: inline-block; border-radius: 50%; object-fit: cover; background: var(--gold-light); flex: 0 0 auto; vertical-align: middle; }
.avatar-sm { width: 32px; height: 32px; }
.avatar-md { width: 56px; height: 56px; }
.avatar-lg { width: 96px; height: 96px; }
.avatar-xl { width: 128px; height: 128px; }
.avatar-inisial {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--basalt); color: var(--gold);
    font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em;
}
.avatar-sm.avatar-inisial { font-size: 12px; }
.avatar-md.avatar-inisial { font-size: 20px; }
.avatar-lg.avatar-inisial { font-size: 32px; }
.avatar-xl.avatar-inisial { font-size: 42px; }
.nama-dengan-foto { display: inline-flex; align-items: center; gap: 10px; }

/* ---------- Bantuan kecil di form ---------- */
.bantuan { color: var(--muted); font-size: 13px; line-height: 1.55; }
.bantuan-inline { color: var(--muted); font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.input-dengan-tombol { display: flex; gap: 8px; align-items: flex-start; }
.input-dengan-tombol input { flex: 1; }
.input-dengan-tombol .btn { margin-top: 2px; white-space: nowrap; }

/* ---------- Form biodata ---------- */
.biodata-foto { display: flex; gap: 22px; align-items: center; margin-bottom: 18px; }
.biodata-foto-isian { flex: 1; }
.biodata-judul { margin: 22px 0 10px; padding-top: 14px; border-top: 1px solid var(--border); }

@media (max-width: 640px) {
    .biodata-foto { flex-direction: column; align-items: flex-start; gap: 12px; }
    .input-dengan-tombol { flex-direction: column; align-items: stretch; }
    .chip-pemisah { display: none; }
}

/* ============================================================
   LAPORAN BULANAN (includes/grafik_bulanan.php)
   ============================================================ */
.pilih-tahun { display: flex; align-items: center; gap: 10px; }
.pilih-tahun label { margin: 0; }
.pilih-tahun select { width: auto; margin: 0; min-width: 110px; }

.stat-grid-terang { grid-template-columns: repeat(3, 1fr); }
.stat-terang {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px 18px;
}
.stat-terang .num { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--basalt); line-height: 1.1; }
.stat-terang .label { color: var(--muted); font-size: 13px; margin-top: 2px; }

.judul-bagian { margin: 26px 0 12px; }

/* Tabel panas materi x bulan */
.panas-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.panas { border-collapse: separate; border-spacing: 2px; width: 100%; min-width: 640px; font-size: 13px; }
table.panas th, table.panas td { border: none; padding: 7px 4px; text-align: center; }
table.panas thead th { background: none; color: var(--muted); font-size: 11px; }
table.panas tbody th {
    text-align: left; background: none; white-space: nowrap; padding-right: 10px;
    font-family: var(--font-body); font-size: 13px; text-transform: none; letter-spacing: 0;
    color: var(--basalt); font-weight: 600; position: sticky; left: 0; background: var(--card-bg);
}
table.panas td { font-family: var(--font-mono); font-weight: 600; border-radius: 4px; background: var(--nt-50b); min-width: 30px; }
table.panas td .kosong { color: var(--nt-300); font-weight: 400; }
table.panas td.panas-total { background: none; color: var(--basalt-soft); border-left: 1px solid var(--border); border-radius: 0; }
table.panas tr:hover td { background-image: none; }

/* Grafik per materi */
.grafik-materi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.grafik-materi { margin-bottom: 0; display: flex; flex-direction: column; }
.grafik-materi-kepala { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.grafik-materi-kepala h3 { margin: 0; font-size: 16px; text-transform: none; letter-spacing: 0.01em; color: var(--basalt); }
.grafik-angka { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 8px; }
.grafik-angka > div { display: flex; flex-direction: column; }
.grafik-angka span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-display); }
.grafik-angka b { font-family: var(--font-mono); font-size: 17px; color: var(--basalt); }
.grafik-angka b.mono-time { font-size: 16px; align-self: flex-start; }
.grafik-angka small { font-size: 12px; color: var(--muted); }
.grafik-kotak { position: relative; height: 210px; }
.grafik-sedang { height: 250px; }
.grafik-kosong { color: var(--muted); font-size: 14px; margin: 18px 0; flex: 1; }

.lihat-angka { margin-top: 10px; font-size: 13px; }
.lihat-angka summary { cursor: pointer; color: var(--gold-dark); font-weight: 600; padding: 6px 0; }
.lihat-angka table { margin-top: 6px; font-size: 13px; }
.lihat-angka th, .lihat-angka td { padding: 6px 8px; }

@media (max-width: 760px) {
    .grafik-materi-grid { grid-template-columns: 1fr; }
    .stat-grid-terang { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .stat-terang { padding: 12px; }
    .stat-terang .num { font-size: 22px; }
    .stat-terang .label { font-size: 11px; }
    .grafik-kotak { height: 200px; }
    /* tabel angka di dalam "Lihat angka" tetap berupa tabel kecil, bukan kartu */
    .lihat-angka table, .lihat-angka thead, .lihat-angka tbody, .lihat-angka tr, .lihat-angka td { display: revert; }
    table.panas { min-width: 560px; }
}

/* ============================================================
   PROFIL, PORTAL ATLET & PRESTASI
   ============================================================ */
.profil-kepala { display: flex; align-items: center; gap: 18px; }
.profil-rinci { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 10px; }
.profil-rinci summary { cursor: pointer; color: var(--gold-dark); font-weight: 600; padding: 4px 0; }
.data-diri { display: grid; grid-template-columns: 190px 1fr; gap: 8px 16px; margin: 12px 0 0; font-size: 14px; }
.data-diri dt { color: var(--muted); }
.data-diri dd { margin: 0; color: var(--basalt); }

.ajakan { border-left: 3px solid var(--gold); }
.ajakan-isi { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.meter { height: 6px; background: var(--gold-light); border-radius: 3px; margin-top: 14px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--gold-dark); border-radius: 3px; }

.menu-portal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.menu-portal-item {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--basalt); color: #fff; border-radius: var(--radius);
    padding: 18px; border-top: 3px solid var(--gold); min-height: 96px;
}
.menu-portal-item b { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: 0.01em; }
.menu-portal-item span { color: #CFC9BC; font-size: 13px; font-weight: 400; }
.menu-portal-item:hover { text-decoration: none; color: #fff; background: #2A2823; }

.daftar-jadwal { list-style: none; margin: 0; padding: 0; }
.daftar-jadwal li { display: flex; flex-direction: column; padding: 10px 0; border-top: 1px solid var(--border); }
.daftar-jadwal li:first-child { border-top: none; }
.daftar-jadwal span { color: var(--muted); font-size: 13px; }

.info-terkunci { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 12px 14px; background: var(--pr-25); border-radius: 10px; }
.info-terkunci > div { display: flex; flex-direction: column; gap: 4px; }
.info-terkunci > div > span:first-child { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-display); }

/* Medali */
.medali {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px 3px 6px; border-radius: 999px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
    border: 1px solid var(--border); background: #fff; color: var(--basalt);
}
.medali::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); }
.medali-emas::before     { background: radial-gradient(circle at 35% 35%, #F7DE8B, #C89B3C 70%); }
.medali-perak::before    { background: radial-gradient(circle at 35% 35%, #F2F2F0, #A9A8A3 70%); }
.medali-perunggu::before { background: radial-gradient(circle at 35% 35%, #E9B98A, #A0612D 70%); }
.medali-tanpa { color: var(--muted); }
.medali-tanpa::before { background: transparent; border-style: dashed; }

.ringkas-medali { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ringkas-medali > b { font-family: var(--font-mono); margin-right: 8px; color: var(--basalt); }

.pilih-medali { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pilih-medali-item {
    display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer;
    padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px;
    text-transform: none; letter-spacing: 0; font-weight: 400; min-height: 44px;
}
.pilih-medali-item input { width: auto; margin: 0; accent-color: var(--gold-dark); }
.pilih-medali-item:has(input:checked) { border-color: var(--gold-dark); background: var(--pr-50); }

@media (max-width: 760px) {
    .menu-portal { grid-template-columns: 1fr; }
    .menu-portal-item { min-height: 0; }
    .data-diri { grid-template-columns: 1fr; gap: 2px; }
    .data-diri dd { margin-bottom: 10px; }
    .profil-kepala { gap: 14px; }
    .profil-kepala .avatar-lg { width: 72px; height: 72px; }
    .ajakan-isi .btn { width: 100%; text-align: center; }
    .pilih-medali { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ---------- Navbar layar lebar: nama klub & pengguna di baris atas, menu di baris bawah ---------- */
@media (min-width: 861px) {
    .navbar .brand { order: 1; padding: 12px 0 4px; }
    .navbar .user-info { order: 2; padding: 12px 0 4px; }
    .navbar nav { order: 3; width: 100%; margin-left: -11px; }
    .navbar nav a { padding: 11px 11px 13px; }
}

/* Angka "Terbaik" di kartu grafik: teks emas di atas latar gelap */
.grafik-angka b.mono-time { color: var(--gold); }

/* Ringkasan medali tetap berjajar walau berada di judul halaman versi HP */
@media (max-width: 640px) {
    .page-header > .ringkas-medali { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* Grafik rekap klub punya legenda di atas, jadi butuh ruang sedikit lebih tinggi */
.grafik-rekap { height: 250px; }
@media (max-width: 760px) { .grafik-rekap { height: 240px; } }

/* ---------- Daftar atlet di kartu Rekap Materi ---------- */
.daftar-atlet-materi { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.daftar-atlet-materi h4 {
    margin: 0 0 6px; font-family: var(--font-display); font-size: 13px; font-weight: 600;
    color: var(--basalt); text-transform: none; letter-spacing: 0.01em;
}
.daftar-atlet-materi ol { list-style: none; margin: 0; padding: 0; counter-reset: urut; }
.daftar-atlet-materi ol[start] { counter-reset: urut 5; }
.daftar-atlet-materi li {
    counter-increment: urut;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 0; border-bottom: 1px dashed var(--border);
}
.daftar-atlet-materi li:last-child { border-bottom: none; }
.daftar-atlet-materi li::before {
    content: counter(urut); flex: 0 0 18px; text-align: right;
    font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}
.daftar-atlet-materi li > a { flex: 1; min-width: 0; font-weight: 400; }
.daftar-atlet-materi li > a:hover { text-decoration: none; }
.dam-nama { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dam-nama b { color: var(--basalt); font-size: 14px; font-weight: 600; }
.dam-nama .badge { font-size: 9.5px; padding: 2px 7px; }
.dam-angka { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.dam-angka small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.atlet-lainnya summary { cursor: pointer; color: var(--gold-dark); font-weight: 600; font-size: 13px; padding: 6px 0 2px 28px; }


/* ==================================================================
   TEMA UNGU & KUNING - komponen
   (sengaja ditulis paling bawah supaya menimpa gaya lama)
   ================================================================== */
body { background: #FFFFFF; }
a:hover { color: var(--pr-850); }
::selection { background: var(--kuning); color: var(--teks-di-aksen); }

/* ---------- Navbar ---------- */
.navbar {
    background: var(--grad-ungu);
    border-bottom: 3px solid var(--kuning);
    box-shadow: 0 6px 22px rgba(var(--pr-850-rgb), 0.28);
}
.navbar .brand { color: var(--teks-di-primer); letter-spacing: 0.03em; }
.navbar .brand span {
    color: var(--teks-di-aksen); background: var(--kuning);
    padding: 1px 8px 2px; border-radius: 6px; margin: 0 2px;
}
.navbar nav a { color: var(--teks-di-primer); font-weight: 600; opacity: 0.86; border-radius: 8px 8px 0 0; }
.navbar nav a:hover, .navbar nav a.active {
    color: var(--teks-di-primer); opacity: 1;
    background: rgba(var(--teks-di-primer-rgb), 0.14);
    border-bottom-color: var(--kuning);
}
.navbar nav a.active { color: var(--aksen-di-primer); }
.navbar .user-info { color: var(--teks-di-primer); opacity: 0.8; }
.nav-toggle { color: var(--teks-di-primer); }
.nav-toggle:focus { outline: none; }
.nav-toggle:focus-visible { outline: 2px solid var(--kuning); outline-offset: 2px; border-radius: 6px; }
@media (min-width: 861px) {
    .navbar nav a { padding: 10px 9px 12px; font-size: 12.5px; letter-spacing: 0.03em; }
}
@media (min-width: 861px) and (max-width: 1440px) {
    .navbar nav a { padding: 10px 6px 12px; font-size: 11.5px; letter-spacing: 0.02em; }
}
@media (max-width: 860px) {
    .navbar nav {
        width: calc(100% + 28px); margin: 0 -14px;
        background: #FFFFFF; box-shadow: inset 0 6px 10px -8px rgba(var(--pr-900-rgb), 0.3);
    }
    .navbar nav a { color: var(--ungu-tua); border-top: 1px solid var(--nt-100b); border-radius: 0; opacity: 1; }
    .navbar nav a:hover, .navbar nav a.active { background: var(--grad-ungu); color: var(--teks-di-primer); border-bottom: none; }
    .navbar nav a.active { color: var(--aksen-di-primer); }
}

/* ---------- Kartu ---------- */
.card, .stat-terang { border-color: var(--border); }

/* ---------- Tombol ---------- */
.btn {
    background: var(--grad-kuning); background-size: 150% 100%; background-position: 0% 0;
    color: var(--teks-di-aksen);
    box-shadow: 0 3px 10px rgba(var(--a-awal-rgb), 0.35);
    transition: background-position 0.25s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.btn:hover {
    background: var(--grad-kuning); background-size: 150% 100%; background-position: 100% 0;
    color: var(--teks-di-aksen); box-shadow: 0 6px 16px rgba(var(--a-awal-rgb), 0.45);
}
.btn-secondary { background: #FFFFFF; color: var(--ungu-tua); border: 1px solid var(--pr-200c); box-shadow: none; }
.btn-secondary:hover { background: var(--pr-50); color: var(--ungu-tua); box-shadow: none; }
.btn-accent { background: var(--grad-ungu); color: var(--teks-di-primer); box-shadow: 0 3px 12px rgba(var(--pr-700-rgb), 0.35); }
.btn-accent:hover { background: var(--grad-ungu); color: var(--aksen-di-primer); }
.btn-danger { background: var(--danger); color: #FFFFFF; box-shadow: none; }
.btn-danger:hover { background: #962A21; color: #FFFFFF; }
.btn:focus-visible { outline: 3px solid var(--pr-400); outline-offset: 2px; }

/* ---------- Isian ---------- */
input:focus, select:focus, textarea:focus { border-color: var(--pr-500); box-shadow: 0 0 0 3px rgba(var(--pr-500-rgb), 0.22); }
.checkbox-row input, .pilih-medali-item input { accent-color: var(--pr-700); }
.pilih-medali-item:has(input:checked) { border-color: var(--pr-700); background: var(--pr-50); }

/* ---------- Tabel: kepala putih bergaris kuning (tanpa krem) ---------- */
th { background: #FFFFFF; color: var(--ungu-tua); border-bottom: 2px solid var(--kuning); }
tr:hover td { background: var(--pr-25); }

/* ---------- Kartu angka (dashboard & peringkat) ---------- */
.stat-card {
    background: var(--grad-ungu); border: none;
    box-shadow: 0 8px 22px rgba(var(--pr-850-rgb), 0.28);
    position: relative; overflow: hidden;
}
.stat-card::after {
    content: ""; position: absolute; right: -34px; top: -44px;
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--a-tengah-rgb), 0.55), rgba(var(--a-tengah-rgb), 0) 70%);
}
.stat-card .num { color: var(--aksen-di-primer); position: relative; }
.stat-card .label { color: var(--teks-di-primer); position: relative; font-weight: 600; }
.stat-card .label strong { color: var(--teks-di-primer); }
.stat-card-podium-1 { box-shadow: 0 0 0 3px var(--kuning), 0 10px 26px rgba(var(--pr-850-rgb), 0.32); }
.stat-card-fokus { background: #FFFFFF; border: 1px solid var(--border); box-shadow: var(--shadow); }
.stat-card-fokus .label, .stat-card-fokus .label strong { color: var(--ungu-tua); }
.stat-card-fokus::after { background: radial-gradient(circle, rgba(var(--pr-500-rgb), 0.18), rgba(var(--pr-500-rgb), 0) 70%); }

.stat-terang { box-shadow: var(--shadow); position: relative; overflow: hidden; }
.stat-terang::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad-ungu); }
.stat-terang .num { color: var(--ungu-tua); }

/* ---------- Angka stopwatch ---------- */
.mono-time { background: var(--ungu-tua); color: var(--kuning); box-shadow: none; }
.grafik-angka b.mono-time { color: var(--kuning); }

/* ---------- Lencana, chip, avatar ---------- */
.badge-level { background: var(--grad-ungu); color: var(--teks-di-primer); }
.badge-kategori { background: #FFFFFF; color: var(--pr-800); border: 1px solid var(--pr-200); }
.badge-gray { background: var(--nt-100); color: var(--teks-lembut); }
.chip { border-color: var(--pr-150); }
.chip:hover { border-color: var(--pr-500); color: var(--ungu-tua); }
.chip-aktif { background: var(--grad-ungu); border-color: transparent; color: var(--teks-di-primer); box-shadow: 0 3px 10px rgba(var(--pr-700-rgb), 0.3); }
.chip-aktif b { color: var(--aksen-di-primer); }
.avatar { background: var(--pr-100); box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--kuning); }
.avatar-sm { box-shadow: 0 0 0 1.5px #FFFFFF, 0 0 0 3px var(--kuning); }
.avatar-inisial { background: var(--grad-ungu); color: var(--aksen-di-primer); }

/* ---------- Tabel panas & grafik ---------- */
table.panas td { background: var(--nt-50b); }
table.panas tbody th { background: #FFFFFF; border-bottom: none; }
table.panas thead th { border-bottom: none; }
.meter { background: var(--pr-100c); }
.meter span { background: var(--grad-ungu); }
.lihat-angka summary, .profil-rinci summary, .atlet-lainnya summary { color: var(--pr-700); }

/* ---------- Portal atlet ---------- */
.menu-portal-item {
    background: var(--grad-ungu); color: var(--teks-di-primer);
    border-top: none; border-bottom: 3px solid var(--kuning);
    box-shadow: 0 8px 22px rgba(var(--pr-850-rgb), 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.menu-portal-item b { color: var(--teks-di-primer); }
.menu-portal-item span { color: var(--teks-di-primer-lembut); }
.menu-portal-item:hover { background: var(--grad-ungu); color: var(--teks-di-primer); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(var(--pr-850-rgb), 0.34); }
.ajakan { border-left-color: var(--kuning); background: #FFFFFF; }
.info-terkunci { background: var(--pr-25b); }
.profil-kartu { background: #FFFFFF; }

/* ---------- Halaman login ---------- */
.login-wrap {
    background:
        radial-gradient(circle at 15% 20%, rgba(var(--a-tengah-rgb), 0.45), transparent 32%),
        radial-gradient(circle at 88% 85%, rgba(var(--a-tengah-rgb), 0.30), transparent 36%),
        var(--grad-ungu);
}
.login-box { border-top: none; box-shadow: 0 24px 60px rgba(var(--pr-950-rgb), 0.45); }
.login-box h1 { color: var(--ungu-tua); }

footer.app-footer { color: var(--muted); }

/* ==================================================================
   MATERI & BERITA (pustaka)
   ================================================================== */
.alert-info { background: var(--pr-50); color: var(--ungu-tua); border-color: var(--pr-200b); }
.nav-angka {
    display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 3px;
    background: var(--kuning); color: var(--teks-di-aksen); border-radius: 999px;
    font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; vertical-align: 1px;
}
.menu-portal { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Tab Materi / Berita */
.tab-jenis { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.tab-jenis a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 999px; border: 1px solid var(--pr-150);
    background: #FFFFFF; color: var(--ungu-tua); font-weight: 600; text-decoration: none;
}
.tab-jenis a b { background: var(--pr-100b); color: var(--pr-800); border-radius: 999px; padding: 0 8px; font-size: 12px; }
.tab-jenis a:hover { border-color: var(--pr-500); text-decoration: none; color: var(--ungu-tua); }
.tab-jenis a.aktif { background: var(--grad-ungu); color: var(--teks-di-primer); border-color: transparent; box-shadow: 0 4px 14px rgba(var(--pr-700-rgb), 0.3); }
.tab-jenis a.aktif b { background: var(--kuning); color: var(--teks-di-aksen); }
.titik-baru { background: var(--kuning); color: var(--teks-di-aksen); border-radius: 999px; padding: 0 8px; font-size: 11px; font-weight: 700; }

/* Lencana */
.badge-sematkan { background: var(--kuning); color: var(--teks-di-aksen); }
.badge-baru { background: var(--grad-ungu); color: var(--teks-di-primer); }
.badge-materi { background: var(--pr-100); color: var(--pr-800); }
.badge-berita { background: var(--a-akhir); color: var(--teks-di-aksen); }
.lencana-berkas {
    display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 11px; font-weight: 700;
    letter-spacing: 0.04em; border: 1px solid transparent;
}
.lencana-pdf { background: #FDECEC; color: #A3241B; border-color: #F5C9C5; }
.lencana-word { background: #E8F0FE; color: #1D4ED8; border-color: #C6D7FB; }
.lencana-gambar { background: #E9F8EF; color: #1F6B45; border-color: #C3E8D2; }

/* Daftar (pelatih) */
.daftar-pustaka { display: flex; flex-direction: column; }
.item-pustaka { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--border); }
.item-pustaka:first-child { border-top: none; }
.item-pustaka-isi { min-width: 0; flex: 1; }
.item-pustaka-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; margin-bottom: 4px; }
.item-pustaka-judul { display: block; font-weight: 700; font-size: 16px; color: var(--ungu-tua); line-height: 1.35; overflow-wrap: anywhere; }
.item-pustaka-cuplikan { display: block; color: var(--basalt-soft); font-size: 13.5px; margin: 4px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.item-pustaka-kaki { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.item-pustaka-kaki strong { color: var(--pr-700); }
.item-pustaka-aksi { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; flex-shrink: 0; }
.item-pustaka-aksi .form-sebaris, .page-header .form-sebaris { display: inline-flex; vertical-align: middle; }
.item-pustaka-aksi .btn, .page-header .form-sebaris .btn { margin: 0; }
.kosong-besar { text-align: center; padding: 34px 16px; color: var(--basalt-soft); }
.kosong-besar p { max-width: 520px; margin: 0 auto 14px; }

/* Kartu (atlet) */
.kartu-pustaka-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kartu-pustaka {
    display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; color: var(--ungu-tua); text-decoration: none;
    box-shadow: var(--shadow); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kartu-pustaka:hover { text-decoration: none; color: var(--ungu-tua); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(var(--pr-850-rgb), 0.16); }
.kartu-pustaka.belum-dibaca { border-color: var(--pr-300); box-shadow: 0 0 0 1px var(--pr-300), var(--shadow); }
.kartu-pustaka-gambar { display: block; aspect-ratio: 16 / 9; background: var(--pr-100b); overflow: hidden; }
.kartu-pustaka-gambar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kartu-pustaka-ikon {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 6;
    font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: 0.12em;
    background: var(--grad-ungu); color: var(--aksen-di-primer);
}
.kartu-pustaka-ikon.kartu-berita { background: var(--grad-kuning); color: var(--teks-di-aksen); }
.kartu-pustaka-isi { display: flex; flex-direction: column; padding: 12px 14px 14px; gap: 2px; font-weight: 400; min-width: 0; }
.kartu-pustaka .item-pustaka-meta { font-weight: 500; }
.kartu-pustaka-judul { font-weight: 700; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.cari-ringkas { display: flex; gap: 8px; margin: 0 0 14px; max-width: 520px; }
.cari-ringkas input { margin: 0; flex: 1; }

/* Halaman baca */
.pustaka-tata { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.pustaka-judul { margin: 0 0 6px; font-size: 26px; line-height: 1.25; overflow-wrap: anywhere; }
.pustaka-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.pustaka-meta strong { color: var(--ungu-tua); }
.pustaka-gambar { display: block; margin: 0 0 14px; }
.pustaka-gambar img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 10px; }
.pustaka-teks { font-size: 15.5px; line-height: 1.7; color: var(--basalt); margin-bottom: 16px; overflow-wrap: anywhere; }
.pustaka-sumber { margin-top: 4px; }
.berkas-kotak {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--pr-25); margin: 6px 0 10px;
}
.berkas-nama { font-weight: 600; overflow-wrap: anywhere; min-width: 0; flex: 1; }
.berkas-tombol { display: flex; gap: 6px; flex-wrap: wrap; }
.pratinjau-pdf { width: 100%; height: 75vh; min-height: 420px; border: 1px solid var(--border); border-radius: 10px; background: var(--nt-50b); }
.pustaka-pembaca h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 18px 0 6px; }
.pembaca-angka { color: var(--basalt-soft); }
.pembaca-angka strong { font-size: 24px; color: var(--pr-700); }
.daftar-pembaca, .daftar-lainnya { list-style: none; margin: 0; padding: 0; }
.daftar-pembaca li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 14px; }
.daftar-pembaca li:first-child { border-top: none; }
.daftar-pembaca small { color: var(--muted); white-space: nowrap; }
.daftar-pembaca.belum span { color: var(--basalt-soft); }
.daftar-lainnya li { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-top: 1px solid var(--border); }
.daftar-lainnya li:first-child { border-top: none; }
.daftar-lainnya a { font-weight: 600; overflow-wrap: anywhere; }
.daftar-lainnya small { color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.judul-dengan-aksi { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.judul-dengan-aksi h2 { margin: 0; }

/* Formulir: pilih jenis + tampilkan isian sesuai jenis */
.pilih-jenis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.pilih-jenis-item {
    display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0;
    border: 1.5px solid var(--pr-150); border-radius: 10px; cursor: pointer; font-weight: 400;
}
.pilih-jenis-item input { accent-color: var(--pr-700); margin-top: 3px; width: auto; }
.pilih-jenis-item strong { display: block; color: var(--ungu-tua); }
.pilih-jenis-item strong { text-transform: none; letter-spacing: 0; font-size: 15px; }
.pilih-jenis-item small { color: var(--muted); font-size: 12.5px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.checkbox-row label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.pilih-jenis-item:has(input:checked) { border-color: var(--pr-700); background: var(--pr-50); }
#formPustaka[data-jenis="materi"] .hanya-berita,
#formPustaka[data-jenis="berita"] .hanya-materi { display: none; }

@media (max-width: 900px) {
    .pustaka-tata { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .item-pustaka { flex-direction: column; gap: 10px; }
    .item-pustaka-aksi { justify-content: flex-start; }
    .pilih-jenis { grid-template-columns: 1fr; }
    .pustaka-judul { font-size: 22px; }
    /* Browser HP umumnya tidak bisa menampilkan PDF di dalam halaman: pakai tombol Buka/Unduh */
    .pratinjau-pdf, .pratinjau-pdf + .bantuan { display: none; }
    .kartu-pustaka-grid { grid-template-columns: 1fr; gap: 10px; }
    .kartu-pustaka { flex-direction: row; align-items: stretch; }
    .kartu-pustaka-gambar, .kartu-pustaka-ikon { flex: 0 0 84px; width: 84px; aspect-ratio: auto; min-height: 84px; }
    .kartu-pustaka-ikon { font-size: 16px; letter-spacing: 0.08em; }
    .kartu-pustaka-isi { padding: 10px 12px; }
    .kartu-pustaka-judul { font-size: 15px; }
    .kartu-pustaka .item-pustaka-cuplikan { display: none; }
    .tab-jenis a { flex: 1; justify-content: center; padding: 10px 12px; }
    .berkas-tombol { width: 100%; }
    .berkas-tombol .btn { flex: 1; text-align: center; }
}
.item-pustaka-aksi .btn-danger { border: 1px solid transparent; }

/* ==================================================================
   PENGATURAN TAMPILAN (pilih warna tema)
   ================================================================== */
.tema-tata { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.tema-pratinjau-kolom { position: sticky; top: 12px; }
.pilih-preset { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.preset-item {
    display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 8px; cursor: pointer;
    border: 1.5px solid var(--pr-150); border-radius: 12px; background: #FFFFFF;
    text-transform: none; letter-spacing: 0; font-weight: 600;
}
.preset-item { position: relative; }
.preset-item input { position: absolute; top: 8px; left: 8px; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.preset-item:has(input:checked) { border-color: var(--pr-700); box-shadow: 0 0 0 3px rgba(var(--pr-500-rgb), 0.25); }
.preset-item:has(input:focus-visible) { outline: 3px solid var(--pr-400); outline-offset: 2px; }
.preset-contoh { position: relative; display: block; height: 54px; border-radius: 8px; }
.preset-contoh i { position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #FFFFFF; }
.preset-kustom {
    display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--teks-lembut);
    background: repeating-linear-gradient(45deg, #F4F4F6 0 8px, #FFFFFF 8px 16px); border: 1px dashed var(--nt-300);
}
.preset-nama { font-size: 13px; color: var(--ungu-tua); line-height: 1.3; }

.warna-grup { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--border); }
.warna-grup:first-of-type { border-top: none; }
.warna-grup-judul { display: flex; flex-direction: column; min-width: 180px; flex: 1; }
.warna-grup-judul small { color: var(--muted); font-size: 12.5px; }
.warna-isian { display: flex; gap: 10px; flex-wrap: wrap; }
.warna-titik { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 10px 6px 6px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.warna-titik input[type=color] { width: 40px; height: 40px; padding: 0; margin: 0; border: none; background: none; cursor: pointer; }
.warna-titik span { display: flex; flex-direction: column; line-height: 1.2; }
.warna-titik b { font-size: 12px; color: var(--ungu-tua); }
.warna-titik code { font-size: 11.5px; color: var(--muted); }
#formTema[data-gradasi="0"] .titik-ujung, #formTema[data-gradasi="0"] .label-gradasi { display: none; }
#formTema[data-gradasi="1"] .label-polos { display: none; }

.catatan-aman { color: var(--pine); font-weight: 600; }
.catatan-waspada { color: var(--rust); font-weight: 600; }

/* Pratinjau mini (memakai variabel --pv-* yang diisi JavaScript) */
.pratinjau-tema { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #FFFFFF; font-size: 13px; }
.pt-nav { background: var(--pv-grad); color: var(--pv-teks-p); padding: 10px 12px 0; border-bottom: 3px solid var(--pv-aksen-polos); }
.pt-brand { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.03em; }
.pt-brand i { font-style: normal; background: var(--pv-aksen); color: var(--pv-teks-a); padding: 0 6px; border-radius: 5px; }
.pt-menu { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.pt-menu span { padding-bottom: 6px; opacity: 0.9; }
.pt-menu .aktif { color: var(--pv-aksen-p); border-bottom: 3px solid var(--pv-aksen-polos); opacity: 1; }
.pt-isi { padding: 12px; }
.pt-judul { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--pv-tua); margin-bottom: 10px; }
.pt-kartu-baris { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pt-stat { background: var(--pv-grad); border-radius: 10px; padding: 10px; text-align: center; }
.pt-stat b { display: block; font-family: var(--font-mono); font-size: 22px; color: var(--pv-aksen-p); }
.pt-stat span { color: var(--pv-teks-p); font-size: 11.5px; font-weight: 600; }
.pt-tombol-baris { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 12px 0 8px; }
.pt-btn { background: var(--pv-aksen); color: var(--pv-teks-a); font-weight: 700; font-size: 11px; text-transform: uppercase; padding: 7px 12px; border-radius: 7px; }
.pt-btn2 { border: 1px solid var(--pv-garis); color: var(--pv-tua); font-weight: 700; font-size: 11px; text-transform: uppercase; padding: 6px 11px; border-radius: 7px; }
.pt-lencana { background: var(--pv-grad); color: var(--pv-teks-p); font-size: 10.5px; font-weight: 700; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.pt-teks { margin: 0 0 10px; color: var(--pv-tua); }
.pt-tautan { color: var(--pv-tautan); font-weight: 700; }
.pt-batang { display: flex; align-items: flex-end; gap: 8px; height: 60px; border-bottom: 1px solid var(--pv-garis); }
.pt-batang i { flex: 1; background: var(--pv-batang); border-radius: 4px 4px 0 0; }

@media (max-width: 960px) {
    .tema-tata { grid-template-columns: 1fr; }
    .tema-pratinjau-kolom { position: static; }
}
@media (max-width: 640px) {
    .pilih-preset { grid-template-columns: 1fr 1fr; }
    .warna-titik { flex: 1; min-width: 0; }
}

/* Berita dari link media */
.kotak-tautan { background: var(--pr-25); border: 1px solid var(--pr-150); border-radius: 12px; padding: 14px 14px 4px; margin-bottom: 16px; }
.tautan-baris { display: flex; gap: 8px; align-items: stretch; }
.tautan-baris input { margin: 0; flex: 1; min-width: 0; }
.tautan-baris .btn { white-space: nowrap; }
#statusAmbil { margin: 8px 0 10px; }
.pratinjau-tautan { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.pratinjau-tautan[hidden] { display: none; }
.pratinjau-tautan img { width: 160px; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--nt-100); }
.kartu-ke-media { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--pr-700); }
@media (max-width: 640px) {
    .tautan-baris { flex-direction: column; }
}

/* Formulir Materi & Berita (dipisah) */
.form-pustaka-kepala {
    display: flex; gap: 14px; align-items: center; max-width: 820px; margin: 0 0 14px;
    padding: 14px 18px; border-radius: var(--radius); box-shadow: var(--shadow);
}
.form-pustaka-kepala strong { display: block; font-family: var(--font-display); font-size: 18px; letter-spacing: 0.02em; }
.form-pustaka-kepala span { font-size: 13.5px; line-height: 1.45; }
.kepala-materi { background: var(--grad-ungu); color: var(--teks-di-primer); }
.kepala-materi span { color: var(--teks-di-primer-lembut); }
.kepala-berita { background: var(--grad-kuning); color: var(--teks-di-aksen); }
.form-pustaka-kepala .kepala-ikon { font-size: 30px; line-height: 1; flex-shrink: 0; color: inherit; }
.langkah {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 18px 0 8px;
    font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ungu-tua);
}
.langkah:first-of-type { margin-top: 0; }
.langkah span {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--grad-ungu); color: var(--teks-di-primer); font-size: 13px;
}
.langkah small { font-family: var(--font-body); font-weight: 400; color: var(--muted); font-size: 12.5px; }
.zona-berkas {
    position: relative; display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 18px;
    border: 2px dashed var(--pr-200c); border-radius: 12px; background: var(--pr-25); cursor: pointer;
    text-transform: none; letter-spacing: 0; font-weight: 400;
}
.zona-berkas:hover, .zona-berkas.terisi { border-color: var(--pr-500); background: var(--pr-50); }
.zona-berkas input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; }
.zona-berkas:has(input:focus-visible) { outline: 3px solid var(--pr-400); outline-offset: 2px; }
.zona-ikon { font-size: 26px; color: var(--pr-700); flex-shrink: 0; }
.zona-teks { display: flex; flex-direction: column; min-width: 0; }
.zona-teks strong { color: var(--ungu-tua); overflow-wrap: anywhere; }
.zona-teks small { color: var(--muted); font-size: 12.5px; }
.zona-kecil { padding: 12px 14px; }
.berkas-sekarang { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.berkas-sekarang a { overflow-wrap: anywhere; }
.hapus-berkas { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--danger); cursor: pointer; }
.hapus-berkas input { width: auto; margin: 0; accent-color: var(--danger); }
.tombol-baris { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.form-pustaka .kotak-tautan { margin-bottom: 4px; padding-top: 12px; }

/* Pengaturan kaki halaman */
.pratinjau-kaki { border-radius: 10px; padding: 14px; text-align: center; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.pratinjau-kaki-depan { background: var(--grad-ungu); color: var(--teks-di-primer); border-top: 3px solid var(--a-tengah); }
.pratinjau-kaki-depan u, .pratinjau-kaki-depan .pv-kontak { color: var(--aksen-di-primer); }
.pratinjau-kaki-dalam { border: 1px solid var(--border); color: var(--muted); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 11.5px; }

/* Dashboard: grafik & detail per materi */
.dm-kepala { margin-top: 4px; }
.dm-kepala-atas { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.dm-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.dm-filter select { margin: 0; width: auto; min-width: 150px; }
.dm-pilih { display: flex; gap: 8px; flex-wrap: wrap; }
.dm-pilih .chip { cursor: pointer; font: inherit; font-size: 13px; }
.dm-pilih .chip b { font-family: var(--font-mono); font-size: 12px; margin-left: 4px; }
.dm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.dm-grid.dm-satu { grid-template-columns: minmax(0, 1fr); }
.dm-kartu[hidden] { display: none; }
.dm-kartu { margin: 0; display: flex; flex-direction: column; }
.dm-judul { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.dm-judul h3 { margin: 0; font-size: 18px; }
.dm-angka { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 10px; }
.dm-angka > div { background: var(--pr-25); border: 1px solid var(--nt-150); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; min-width: 0; }
.dm-angka span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
.dm-angka b { font-family: var(--font-mono); font-size: 18px; color: var(--ungu-tua); line-height: 1.3; }
.dm-angka b.mono-time { align-self: flex-start; font-size: 17px; margin: 2px 0; color: var(--kuning); }
.dm-angka small { font-size: 12px; color: var(--teks-lembut); overflow-wrap: anywhere; }
.dm-rekor { grid-column: span 2; }
.dm-kembang { color: var(--pine) !important; }
.dm-grafik { height: 220px; margin-bottom: 8px; }
.dm-detail summary { cursor: pointer; color: var(--pr-700); font-weight: 600; padding: 6px 0; }
.dm-tabel td small.dm-lk { display: block; color: var(--muted); font-size: 11.5px; }
.dm-no { font-family: var(--font-mono); color: var(--muted); font-weight: 600; }
.dm-podium-1 .dm-no { color: var(--pr-700); }
.dm-kaki { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); font-size: 13px; }
.dm-top i { font-style: normal; margin-right: 3px; }
.dm-top b { font-family: var(--font-mono); color: var(--ungu-tua); }
.dm-lengkap { margin-left: auto; font-size: 13px; }
@media (max-width: 900px) {
    .dm-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .dm-rekor { grid-column: span 2; }
    .dm-angka { grid-template-columns: 1fr 1fr; }
    .dm-filter select { min-width: 0; flex: 1; }
    .dm-filter { width: 100%; }
    .dm-lengkap { margin-left: 0; }
}

/* Profil pelatih */
.tautan-profil { color: inherit; text-decoration: none; }
.tautan-profil:hover { color: var(--aksen-di-primer); text-decoration: underline; }
.nama-dengan-avatar { display: flex; align-items: center; gap: 10px; }
.mono-kecil { font-family: var(--font-mono); font-size: 12px; color: var(--teks-lembut); }
.bio-foto { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.bio-sub { font-size: 15px; margin: 18px 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lencana-rahasia { font-family: var(--font-body); font-size: 11px; font-weight: 700; color: var(--danger); background: var(--danger-light); border-radius: 999px; padding: 2px 9px; }
.pilih-pelatih { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px 12px; margin: 0 0 14px; }
.pilih-pelatih legend { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ungu-tua); padding: 0 6px; }
.pilih-pelatih-daftar { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-cek { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 12px; border: 1px solid var(--pr-150); border-radius: 999px; cursor: pointer; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 14px; background: #FFFFFF; }
.chip-cek input { width: auto; margin: 0; accent-color: var(--pr-700); }
.chip-cek:has(input:checked) { border-color: var(--pr-700); background: var(--pr-50); }
.jadwal-pelatih { font-size: 13px; color: var(--teks-lembut); }
.kartu-pelatih-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.kartu-pelatih { margin: 0; scroll-margin-top: 90px; }
.kartu-pelatih:target { box-shadow: 0 0 0 3px var(--pr-400), var(--shadow); }
.kartu-pelatih-kepala { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.kartu-pelatih-kepala h2 { margin: 0 0 2px; font-size: 19px; }
.kp-jabatan { color: var(--pr-700); font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.kp-baris { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; }
.kp-baris > span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.kp-kontak { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border); }
.kp-jadwal { margin-top: 10px; padding: 10px 12px; background: var(--pr-25); border-radius: 10px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 640px) {
    .kartu-pelatih-grid { grid-template-columns: 1fr; }
    .kp-baris { grid-template-columns: 1fr; gap: 2px; }
}
.kp-kontak .btn { text-transform: none; letter-spacing: 0.01em; }

/* Sertifikasi & lisensi pelatih */
.tabel-lisensi td { vertical-align: top; }
.tabel-lisensi tr.lisensi-utama td { background: var(--pr-25); }
.aksi-lisensi { white-space: nowrap; }
.aksi-lisensi .btn, .aksi-lisensi .form-sebaris { display: block; margin: 0 0 6px; }
.aksi-lisensi .form-sebaris .btn { width: 100%; }
.tabel-lisensi td:nth-child(6) { white-space: nowrap; }
.tabel-lisensi .mono-kecil { overflow-wrap: anywhere; font-size: 11.5px; }
.kp-lisensi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kp-lisensi li { line-height: 1.4; }
.kp-lisensi li strong { font-weight: 600; }
.kp-lisensi li small { display: block; color: var(--muted); font-size: 12.5px; }
.kp-lisensi li.utama strong { color: var(--pr-700); }

/* Video materi (YouTube / TikTok / Vimeo) */
.video-bingkai { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0B0B12; border-radius: 12px; overflow: hidden; margin: 0 0 8px; box-shadow: var(--shadow); }
.video-bingkai iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-bingkai.video-tegak { aspect-ratio: 9 / 16; max-width: 360px; margin-left: auto; margin-right: auto; }
.video-tiktok.video-tegak { aspect-ratio: 9 / 16.5; }
.video-cadangan { text-align: center; margin: 0 0 16px; }
.pratinjau-video { margin: 0 0 14px; max-width: 520px; }
.lencana-video { background: #FDE8E8; color: #B42318; border-color: #F5C2C0; margin-right: 4px; }
.kartu-video { position: relative; }
.kartu-video i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.62); color: #FFFFFF; font-style: normal; font-size: 22px; display: flex; align-items: center; justify-content: center; padding-left: 4px; }
.kartu-video-ikon { font-size: 18px !important; letter-spacing: 0.08em; }
.kartu-video-ikon span { font-size: 22px; margin-right: 6px; }
.kartu-video-ikon em { font-style: normal; }
@media (max-width: 640px) {
    .kartu-video-ikon em { display: none; }
    .kartu-video-ikon span { margin: 0; font-size: 28px; }
}