/* =====================================================================
   style.css — Branding Pramuka (hijau Kwarcab) untuk Platform Penilaian Raimuna Cabang V 2026
   Mobile-first, tanpa dependensi build tool.
   ===================================================================== */

/* Font "Inter" dimuat lewat <link> di <head> tiap halaman (bukan @import
   di sini) — @import di CSS bersifat render-blocking berantai (browser
   harus unduh style.css dulu, baru menemukan @import ini, baru mulai
   unduh font), sedangkan <link rel="preconnect"> + <link rel="stylesheet">
   di HTML bisa mulai diunduh browser SEJAK PARSING HTML, paralel dengan
   style.css. Dampaknya signifikan di koneksi lambat/HP. */

:root {
    --brand: #15803D;
    --brand-dark: #14532D;
    --brand-light: #E8F5EC;
    --brand-bright: #1F9D55;
    --brand-deep: #0F3D22;
    --ui-white: #FFFFFF;
    --ui-gray-50: #F8F9FA;
    --ui-gray-100: #F1F3F5;
    --ui-gray-300: #DEE2E6;
    --ui-gray-500: #868E96;
    --ui-gray-700: #495057;
    --ui-gray-900: #212529;
    --piala-a: #D4AF37;
    --piala-b: #A8A9AD;
    --piala-c: #AD8A56;
    --radius: 12px;
    --shadow: 0 2px 10px rgba(33, 37, 41, 0.06), 0 1px 3px rgba(33, 37, 41, 0.05);
    --shadow-hover: 0 6px 18px rgba(33, 37, 41, 0.10);
    font-size: 16px;
}

* { box-sizing: border-box; }

html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    margin: 0;
    overflow-x: hidden;
    max-width: 100%;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--ui-gray-50);
    color: var(--ui-gray-900);
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* ----- Header / Navbar ----- */
.navbar {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: var(--ui-white);
    box-shadow: 0 2px 12px rgba(20, 83, 45, 0.35);
    position: sticky;
    top: 0;
    z-index: 50;
}
.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 12px;
    flex-wrap: wrap;
}
.navbar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ui-white);
}
.navbar .brand img { height: 36px; width: auto; }
.navbar nav { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.92rem; }
.navbar nav a { color: var(--ui-white); opacity: 0.95; }
.navbar nav a.active { font-weight: 700; text-decoration: underline; }
.navbar .user-info { font-size: 0.85rem; opacity: 0.9; }
.navbar .navbar-home {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ui-white);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 7px 14px;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    text-decoration: none;
    transition: background .15s ease;
}
.navbar .navbar-home:hover { background: rgba(255, 255, 255, 0.15); text-decoration: none; }
.navbar .navbar-home svg { width: 16px; height: 16px; }

/* ----- Layout umum ----- */
.page {
    padding: 18px 0 60px;
    animation: page-fade-up .35s ease both;
}
@keyframes page-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.card {
    background: var(--ui-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid rgba(33, 37, 41, 0.04);
    padding: 18px;
    margin-bottom: 18px;
}
.card h2, .card h3 { margin-top: 0; }
.section-title {
    color: var(--brand-dark);
    border-bottom: 3px solid var(--brand);
    display: inline-block;
    padding-bottom: 4px;
    margin-bottom: 16px;
}

/* ----- Grid kartu statistik ----- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.stat-card {
    background: var(--ui-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
    text-align: center;
    border-top: 4px solid var(--brand);
    transition: transform .18s ease, box-shadow .18s ease;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}
.stat-card .stat-value { font-size: 1.8rem; font-weight: 800; color: var(--brand-dark); }
.stat-card .stat-label { font-size: 0.82rem; color: var(--ui-gray-700); margin-top: 4px; }

/* ----- Tabel ----- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 480px; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--ui-gray-300); text-align: left; white-space: nowrap; }

/* Tabel kecil (mis. kartu kredensial 2 kolom) yang TIDAK dibungkus
   .table-wrap — tidak boleh dipaksa min-width 480px, supaya tidak
   meluber/terpotong di layar HP. Kolom kedua boleh membungkus teks. */
.table-compact { min-width: 0; width: 100%; max-width: 100%; }
.table-compact th, .table-compact td { white-space: normal; word-break: break-word; }
th {
    background: var(--brand-light);
    color: var(--brand-dark);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    position: sticky;
    top: 0;
}
tbody tr:nth-child(even) td { background: var(--ui-gray-50); }
tr:hover td { background: var(--ui-gray-100); }
td.num, th.num { text-align: right; }

/* ----- Badge Piala & Peringkat ----- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: #fff; }
.badge-a { background: var(--piala-a); color: #3a2e00; }
.badge-b { background: var(--piala-b); color: #2a2a2a; }
.badge-c { background: var(--piala-c); color: #fff; }
.badge-peringkat-1 { background: #D4AF37; color: #3a2e00; }
.badge-peringkat-2 { background: #A8A9AD; color: #2a2a2a; }
.badge-peringkat-3 { background: #AD8A56; color: #fff; }
.badge-harapan { background: var(--ui-gray-300); color: var(--ui-gray-900); }
.badge-tie { background: #FFC107; color: #5a4300; }
.badge-mepet { background: #FFF3CD; color: #856404; border: 1px solid #FFE69C; }

/* ----- Form ----- */
.form-group { margin-bottom: 14px; }
label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 0.9rem; }
input[type="text"], input[type="password"], input[type="number"], input[type="search"],
input[type="date"], input[type="file"], input[type="email"], select, textarea {
    width: 100%;
    max-width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--ui-gray-300);
    border-radius: var(--radius);
    font-size: 1rem;
    background: var(--ui-white);
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }

/* ----- Pemilih event (admin) ----- */
.event-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--ui-white);
    border: 1px solid var(--ui-gray-300);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
}
.event-bar form { display: flex; align-items: center; gap: 8px; margin: 0; }
.event-bar label { margin: 0; font-weight: 700; }
.event-bar select { width: auto; max-width: 100%; padding: 6px 10px; font-size: 0.95rem; }
.event-bar-hint { font-size: 0.82rem; }
.event-bar-link { margin-left: auto; font-size: 0.88rem; font-weight: 600; }

.password-field { position: relative; }
.password-field input { padding-right: 44px; }
.password-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-gray-500, #888);
    padding: 0;
}
.password-toggle:hover { color: var(--brand); }
.password-toggle svg { width: 20px; height: 20px; pointer-events: none; }
.password-toggle .icon-eye-off { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye-off { display: block; }

.btn {
    display: inline-block;
    padding: 12px 20px;
    border-radius: var(--radius);
    border: none;
    background: var(--brand);
    color: var(--ui-white);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover {
    background: var(--brand-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 83, 45, 0.30);
    text-decoration: none;
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-secondary { background: var(--ui-gray-500); }
.btn-secondary:hover { background: var(--ui-gray-700); box-shadow: 0 4px 12px rgba(73, 80, 87, 0.25); }
.btn-outline { background: transparent; color: var(--brand); border: 2px solid var(--brand); }
.btn-outline:hover { background: var(--brand-light); box-shadow: none; }
.btn-sm { padding: 7px 12px; font-size: 0.85rem; }
.btn-block { width: 100%; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* ----- Alert ----- */
.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 0.92rem; }
.alert-success { background: #E6F4EA; color: #1E7E34; border: 1px solid #C3E6CB; border-left: 4px solid #1E7E34; }
.alert-danger { background: #FBE7E8; color: #A71D2A; border: 1px solid #F5C2C7; border-left: 4px solid #A71D2A; }
.alert-warning { background: #FFF3CD; color: #856404; border: 1px solid #FFE69C; border-left: 4px solid #C79100; }
.alert-info { background: #E2F0FB; color: #0C5FA5; border: 1px solid #B6E0FE; border-left: 4px solid #0C5FA5; }

/* ----- Login page ----- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.10) 0%, transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(0, 0, 0, 0.12) 0%, transparent 50%),
        linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
}
.login-box {
    background: var(--ui-white);
    border-radius: 18px;
    padding: 32px 26px;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.30);
    text-align: center;
    animation: page-fade-up .4s ease both;
}
.login-box img.logo { height: 64px; margin-bottom: 10px; }
.login-box h1 { font-size: 1.15rem; margin: 6px 0 20px; color: var(--brand-dark); }

/* ----- Daftar kontingen ala-kartu (juri/input_nilai.php) -----
   Sengaja TIDAK memakai <table> di halaman ini supaya tidak pernah
   butuh scroll horizontal di HP — setiap kontingen tampil sebagai
   satu baris kartu yang elemennya membungkus (wrap) secara wajar. */
.list-kontingen { display: flex; flex-direction: column; }
.list-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--ui-gray-300);
}
.list-item:last-child { border-bottom: none; }
.list-item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 180px;
}
.list-item-main span { font-size: 0.8rem; }
.list-item-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}
.list-item-nilai { font-weight: 700; min-width: 50px; text-align: right; }

/* ----- Status indikator (juri) ----- */
.status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.status-saved { background: #E6F4EA; color: #1E7E34; }
.status-unsaved { background: #FFF3CD; color: #856404; }
.status-locked { background: var(--ui-gray-300); color: var(--ui-gray-700); }

/* ----- Rubrik penilaian (checklist grade per item, juri/nilai_form.php) ----- */
.rubrik-list { display: flex; flex-direction: column; }
.rubrik-item-header {
    background: var(--ui-gray-100);
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 6px;
    margin: 10px 0 6px;
    font-size: 0.9rem;
}
.rubrik-item { padding: 12px 0; border-bottom: 1px solid var(--ui-gray-300); }
.rubrik-item:last-child { border-bottom: none; }
.rubrik-item-desc { margin-bottom: 8px; font-size: 0.92rem; }
.rubrik-opsi-group { display: flex; flex-wrap: wrap; gap: 8px; }
.rubrik-opsi {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: 2px solid var(--ui-gray-300);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    -webkit-user-select: none;
    user-select: none;
}
.rubrik-opsi input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.rubrik-opsi:hover { border-color: var(--brand); }
.rubrik-opsi.rubrik-opsi-selected { background: var(--brand); border-color: var(--brand); color: var(--ui-white); }
.rubrik-total-bar {
    position: sticky;
    bottom: 0;
    background: var(--ui-white);
    border-top: 2px solid var(--brand);
    padding: 12px 4px;
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 800;
    font-size: 1.1rem;
}

/* ----- Progress bar ----- */
.progress-bar-bg { background: var(--ui-gray-100); border-radius: 999px; height: 10px; overflow: hidden; }
.progress-bar-fill {
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-bright) 100%);
    height: 100%;
    border-radius: 999px;
    transition: width .3s;
}

/* ----- Panel kategori Piala ----- */
.piala-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.piala-panel { border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.piala-panel.a { background: #FFF9E6; border-top: 5px solid var(--piala-a); }
.piala-panel.b { background: #F4F4F5; border-top: 5px solid var(--piala-b); }
.piala-panel.c { background: #FBF1E6; border-top: 5px solid var(--piala-c); }
.piala-panel h4 { margin: 0 0 8px; }
.piala-panel ul { padding-left: 18px; margin: 0; font-size: 0.88rem; }

/* ----- Util ----- */
.text-center { text-align: center; }
.text-muted { color: var(--ui-gray-500); }
.mt-0 { margin-top: 0; }
.flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }

/* ----- Cetak ----- */
@media print {
    .navbar, .no-print, .btn, .btn-group { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border: 1px solid #ccc; }
}
/* Kebalikan dari .no-print: elemen ini disembunyikan di layar (dipakai
   untuk kontrol input Admin), tapi TETAP tampil saat dicetak — mis. angka
   skor tie-break soal tambahan yang di layar diwakili tombol Edit. */
.print-only { display: none; }
@media print {
    .print-only { display: inline !important; }
}

/* Mode cetak khusus: hanya tampilkan kartu kredensial juri (#kartu-cetak),
   sembunyikan elemen lain di halaman saat tombol "Cetak" pada kartu itu
   diklik (lihat admin/juri.php). */
@media print {
    body.print-cred-only .card:not(#kartu-cetak) { display: none !important; }
}

/* Mode cetak khusus: hanya tampilkan kartu "Peringkat per Lomba"
   (#peringkat-lomba) saat tombol "Cetak Peringkat per Lomba" diklik
   di halaman Rekap & Piala (lihat partials/rekap_view.php). */
@media print {
    body.print-peringkat-only .card:not(#peringkat-lomba) { display: none !important; }
}

/* Mode cetak khusus: hanya tampilkan kartu "Pengelompokan per Kategori
   Piala" (#piala-grouping) saat tombol "Cetak" pada kartu itu diklik. */
@media print {
    body.print-piala-only .card:not(#piala-grouping) { display: none !important; }
}

/* Saat mencetak satu lomba saja (tombol "Cetak" per lomba di kartu
   Peringkat per Lomba), blok lomba lain ditandai .print-hide-this lewat
   JS (lihat partials/rekap_view.php) — hanya disembunyikan saat print,
   tidak memengaruhi tampilan normal di layar. */
@media print {
    .print-hide-this { display: none !important; }
}

/* ----- Wave Loader (overlay proses: load halaman, klik link, submit form) ----- */
.wave-loader-overlay {
    position: fixed;
    inset: 0;
    background: var(--ui-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    z-index: 9999;
    opacity: 1;
    transition: opacity .25s ease;
}
.wave-loader-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.wave-loader-logo { height: 64px; width: auto; }
.wave-loader { display: flex; align-items: flex-end; gap: 7px; height: 48px; }
.wave-loader span {
    display: block;
    width: 8px;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--brand-bright) 0%, var(--brand-deep) 100%);
    animation: wave-loader-bounce 1s ease-in-out infinite;
}
.wave-loader span:nth-child(1) { animation-delay: -0.4s; }
.wave-loader span:nth-child(2) { animation-delay: -0.3s; }
.wave-loader span:nth-child(3) { animation-delay: -0.2s; }
.wave-loader span:nth-child(4) { animation-delay: -0.1s; }
.wave-loader span:nth-child(5) { animation-delay: 0s; }

@keyframes wave-loader-bounce {
    0%, 40%, 100% { transform: scaleY(0.25); }
    20% { transform: scaleY(1); }
}

@media print {
    .wave-loader-overlay { display: none !important; }
}

/* ----- Mobile tweaks ----- */
@media (max-width: 640px) {
    .navbar nav { font-size: 0.85rem; gap: 10px; }
    .card { padding: 14px; }
    th, td { padding: 7px 8px; font-size: 0.82rem; }
}

/* ----- Portal Pendaftaran: progress bar ----- */
.progres-pendaftaran { background: var(--ui-white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 18px; margin-bottom: 16px; }
.progres-pendaftaran-bar { background: var(--ui-gray-100); border-radius: 999px; height: 10px; overflow: hidden; margin-bottom: 8px; }
.progres-pendaftaran-fill { height: 100%; background: linear-gradient(90deg, var(--brand) 0%, var(--brand-bright) 100%); border-radius: 999px; transition: width .3s ease; }
.progres-pendaftaran-label { font-size: 0.85rem; color: var(--ui-gray-700); }

/* ----- Editor visual template desain (drag & drop) ----- */
.template-editor-canvas { position: relative; display: inline-block; max-width: 100%; border: 1px solid var(--ui-gray-300); background: #fff; }
.template-editor-canvas img { display: block; max-width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.template-elemen-box {
    position: absolute;
    border: 2px dashed var(--brand);
    background: rgba(21, 128, 61, 0.12);
    cursor: move;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--brand-dark);
    font-weight: 700;
    min-width: 16px;
    min-height: 16px;
}
.template-elemen-box.is-selected { border-color: var(--brand-deep); background: rgba(21, 128, 61, 0.22); z-index: 5; }
.template-elemen-resize-handle {
    position: absolute; right: -6px; bottom: -6px; width: 14px; height: 14px;
    background: var(--brand-deep); border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize;
}
.template-elemen-panel { border: 1px solid var(--ui-gray-300); border-radius: var(--radius); padding: 12px; background: var(--ui-gray-50); }

/* ----- Kartu ID / Piagam preview ----- */
.kartu-preview img { border: 1px solid var(--ui-gray-300); border-radius: 8px; box-shadow: var(--shadow); }

/* ----- Portal Pendaftaran: countdown batas waktu ----- */
.countdown-pendaftaran { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 18px; margin-bottom: 16px; text-align: center; }
.countdown-label { font-size: 0.85rem; font-weight: 600; opacity: 0.9; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.countdown-timer { display: flex; justify-content: center; gap: 14px; }
.countdown-unit { display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.countdown-unit span { font-size: 1.6rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown-unit small { font-size: 0.7rem; opacity: 0.85; margin-top: 2px; text-transform: uppercase; }

/* =====================================================================
   PWA "Kenalan Raimuna" (peserta-app/) -- app shell: top bar ramping +
   bottom navigation ala aplikasi mobile, profesional tapi tetap fun.
   ===================================================================== */
body.app-peserta {
    background: var(--ui-gray-50);
    padding-bottom: env(safe-area-inset-bottom);
}

.app-topbar {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
    padding: calc(env(safe-area-inset-top) + 14px) 16px 18px;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 4px 16px rgba(20, 83, 45, 0.28);
    position: sticky;
    top: 0;
    z-index: 40;
}
.app-topbar-inner { display: flex; align-items: center; justify-content: space-between; max-width: 560px; margin: 0 auto; }
.app-topbar-brand { display: flex; align-items: center; gap: 10px; }
.app-topbar-emoji { font-size: 1.6rem; animation: app-emoji-bounce 2.4s ease-in-out infinite; }
@keyframes app-emoji-bounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(-8deg); }
}
.app-topbar-title { font-weight: 800; font-size: 1.05rem; line-height: 1.2; }
.app-topbar-sub { font-size: 0.78rem; opacity: 0.9; margin-top: 1px; }
.app-topbar-logout {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.18);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; text-decoration: none; flex-shrink: 0;
}
.app-topbar-logout:hover { background: rgba(255,255,255,0.3); text-decoration: none; }

.app-content {
    max-width: 560px;
    margin: 0 auto;
    padding: 16px 16px calc(90px + env(safe-area-inset-bottom));
    animation: page-fade-up .35s ease both;
}

.app-bottomnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    background: #fff;
    border-top: 1px solid var(--ui-gray-100);
    box-shadow: 0 -4px 16px rgba(33,37,41,0.08);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    max-width: 560px;
    margin: 0 auto;
    border-radius: 20px 20px 0 0;
}
.app-bottomnav-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: var(--ui-gray-500);
    text-decoration: none;
    font-size: 0.66rem;
    font-weight: 600;
    padding: 6px 4px;
    border-radius: 12px;
    transition: color .15s ease, background .15s ease;
    flex: 1;
    min-width: 0;
}
.app-bottomnav-item svg { width: 22px; height: 22px; }
.app-bottomnav-item:hover { text-decoration: none; }
.app-bottomnav-item.is-active { color: var(--brand); background: var(--brand-light); }

.app-bottomnav-scan {
    width: 58px; height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-bright) 0%, var(--brand) 60%, var(--brand-dark) 100%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(21, 128, 61, 0.45);
    margin-top: -30px;
    border: 4px solid #fff;
    transition: transform .15s ease;
    flex-shrink: 0;
}
.app-bottomnav-scan svg { width: 26px; height: 26px; }
.app-bottomnav-scan:active { transform: scale(0.92); }

/* Kartu leaderboard/dashboard di app-content sedikit lebih bulat & playful */
body.app-peserta .card { border-radius: 18px; }
body.app-peserta .stat-card { border-radius: 16px; }

/* ----- Leaderboard "Kenalan" (peserta-app/leaderboard.php) ----- */
.lb-hero {
    text-align: center;
    background: linear-gradient(135deg, #FFD54A 0%, #FFB300 100%);
    border-radius: 18px;
    padding: 20px 16px;
    margin-bottom: 16px;
    box-shadow: 0 4px 14px rgba(255, 179, 0, 0.35);
}
.lb-hero-emoji { font-size: 2.2rem; }
.lb-hero-rank { font-size: 1.3rem; font-weight: 800; color: #5a3d00; margin-top: 4px; }
.lb-hero-sub { font-size: 0.85rem; color: #5a3d00; opacity: 0.85; }

.lb-list { display: flex; flex-direction: column; gap: 8px; }
.lb-row {
    display: flex; align-items: center; gap: 10px;
    background: #fff;
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: var(--shadow);
}
.lb-row-top { background: linear-gradient(90deg, #FFF9E6 0%, #fff 60%); }
.lb-row-me { border: 2px solid var(--brand); }
.lb-rank { width: 34px; text-align: center; font-weight: 800; font-size: 1.1rem; color: var(--ui-gray-700); flex-shrink: 0; }
.lb-foto { width: 38px; height: 46px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--ui-gray-100); }
.lb-foto img { width: 100%; height: 100%; object-fit: cover; }
.lb-foto-kosong { width: 100%; height: 100%; background: var(--ui-gray-300); }
.lb-info { flex: 1; min-width: 0; }
.lb-nama { font-weight: 700; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-sekolah { font-size: 0.76rem; color: var(--ui-gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-badge-kamu { display: inline-block; background: var(--brand); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }
.lb-jumlah { text-align: center; flex-shrink: 0; min-width: 44px; }
.lb-jumlah-angka { font-size: 1.15rem; font-weight: 800; color: var(--brand-dark); line-height: 1; }
.lb-jumlah-label { font-size: 0.65rem; color: var(--ui-gray-500); }

/* =====================================================================
   Portal Pendaftaran — sidebar navigasi (redesign)
   ===================================================================== */

/* ----- Shell: sidebar tetap di kiri (desktop) / off-canvas (mobile) +
   konten utama di kanan. Sengaja SIDEBAR, bukan top-nav -- supaya menu
   "Pendaftaran" (wizard wajib) dan "Dokumen" (unduhan pendukung) bisa
   dikelompokkan jelas terpisah, bukan satu baris rata bercampur. ----- */
.portal-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}
.portal-main {
    flex: 1;
    min-width: 0;
}

.portal-sidebar {
    width: 250px;
    flex-shrink: 0;
    background: var(--ui-white);
    border-right: 1px solid var(--ui-gray-100);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 60;
}
.portal-sidebar-brand {
    display: flex;
    align-items: center;
    padding: 18px;
    border-bottom: 1px solid var(--ui-gray-100);
    flex-shrink: 0;
}
.portal-sidebar-brand:hover { text-decoration: none; }
.portal-sidebar-brand img { height: 36px; width: auto; }

.portal-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px;
}
.sidebar-group { margin-bottom: 18px; }
.sidebar-group:last-child { margin-bottom: 0; }
.sidebar-group-title {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ui-gray-500);
    padding: 0 10px;
    margin-bottom: 6px;
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--ui-gray-700);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 2px;
    transition: background .15s ease, color .15s ease;
}
.sidebar-link svg { width: 19px; height: 19px; flex-shrink: 0; }
.sidebar-link:hover { background: var(--ui-gray-50); text-decoration: none; color: var(--ui-gray-900); }
.sidebar-link.active { background: var(--brand-light); color: var(--brand-dark); }

.portal-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--ui-gray-100);
    flex-shrink: 0;
}
.user-chip-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--brand-light);
    color: var(--brand-dark);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.portal-sidebar-user-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.user-chip-name { font-size: 0.86rem; font-weight: 700; color: var(--ui-gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-sidebar-user-info a { font-size: 0.78rem; color: var(--ui-gray-500); }
.portal-sidebar-user-info a:hover { color: var(--brand); }

/* ----- Topbar: header besar di LUAR sidebar, tampil di SEMUA halaman
   portal (desktop & mobile) -- pengganti nama event yang sebelumnya ada
   di sidebar. Tombol buka sidebar cuma tampil di mobile (lihat media
   query di bawah), teks judulnya selalu tampil di semua ukuran layar. */
.portal-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--ui-white);
    border-bottom: 1px solid var(--ui-gray-100);
    padding: 18px 24px;
    position: sticky;
    top: 0;
    z-index: 40;
}
.portal-sidebar-toggle {
    display: none;
    width: 36px; height: 36px;
    border-radius: 10px;
    border: 1px solid var(--ui-gray-100);
    background: var(--ui-white);
    color: var(--ui-gray-700);
    align-items: center; justify-content: center;
    flex-shrink: 0;
}
.portal-sidebar-toggle svg { width: 20px; height: 20px; }
.portal-topbar-title {
    font-weight: 800;
    font-size: 1.3rem;
    line-height: 1.25;
    color: var(--ui-gray-900);
    letter-spacing: -0.01em;
}

.portal-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(33, 37, 41, 0.45);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

@media (max-width: 900px) {
    .portal-sidebar-toggle { display: flex; }
    .portal-topbar { padding: 14px 16px; }
    .portal-topbar-title { font-size: 1.05rem; }
    .portal-sidebar {
        position: fixed;
        left: -270px;
        top: 0;
        bottom: 0;
        height: 100vh;
        width: 260px;
        box-shadow: 0 0 0 rgba(0,0,0,0);
        transition: left .22s ease;
    }
    .portal-sidebar.is-open { left: 0; box-shadow: 8px 0 24px rgba(0,0,0,0.15); }
    .portal-sidebar-backdrop { display: block; }
    .portal-sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; }
}

/* ----- Status strip (pengganti stepper linear) -----
   SENGAJA bukan "stepper" bergaris (yang menyiratkan harus selesai
   berurutan) -- kontingen bisa mengedit bagian mana saja kapan saja,
   bahkan setelah kirim, jadi status tiap syarat murni independen dan
   bisa tampak "tidak berurutan" (mis. Terkirim tapi Lomba belum
   lengkap lagi). Strip sejajar tanpa garis penghubung menghindari kesan
   keliru bahwa ini alur linear. */
.status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--ui-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 14px;
    margin-bottom: 16px;
}
.status-strip-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--ui-gray-50);
    color: var(--ui-gray-700);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--ui-gray-100);
    transition: background .15s ease, border-color .15s ease;
}
.status-strip-item:hover { text-decoration: none; border-color: var(--ui-gray-300); }
.status-strip-dot {
    width: 18px; height: 18px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    flex-shrink: 0;
    background: var(--ui-gray-300);
    color: #fff;
}
.status-strip-item.is-done { background: var(--brand-light); border-color: transparent; color: var(--brand-dark); }
.status-strip-item.is-done .status-strip-dot { background: var(--brand); }
.status-strip-detail { font-weight: 400; opacity: 0.8; }
@media (max-width: 480px) {
    .status-strip { gap: 6px; padding: 10px; }
    .status-strip-item { padding: 6px 10px; font-size: 0.78rem; }
}

/* ----- Dashboard hero ----- */
.dash-hero {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
    border-radius: 18px;
    padding: 24px 24px 22px;
    margin-bottom: 18px;
    box-shadow: 0 8px 24px rgba(20, 83, 45, 0.25);
    position: relative;
    overflow: hidden;
}
.dash-hero::before {
    content: "";
    position: absolute;
    top: -60px; right: -60px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
}
.dash-hero-eyebrow { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; margin-bottom: 4px; }
.dash-hero-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 10px; position: relative; }
.dash-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.dash-hero-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.16); border-radius: 999px; padding: 5px 12px; font-size: 0.8rem; font-weight: 600; }
.dash-hero-chip.chip-success { background: #E6F4EA; color: #1E7E34; }
.dash-hero-chip.chip-warning { background: #FFF3CD; color: #856404; }
.dash-hero-compact { padding: 18px 22px 16px; margin-bottom: 14px; }
.dash-hero-compact .dash-hero-title { font-size: 1.28rem; margin-bottom: 8px; }

/* ----- Checklist ringkas (dashboard) ----- */
.check-summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.check-summary-ring {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--brand-dark);
    background: conic-gradient(var(--brand) calc(var(--pct, 0) * 1%), var(--ui-gray-100) 0);
    flex-shrink: 0;
    position: relative;
}
.check-summary-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.check-summary-ring span { position: relative; z-index: 1; }
.check-summary-text { flex: 1; min-width: 180px; font-size: 0.88rem; color: var(--ui-gray-700); }

/* ----- Admin: baris menu kedua untuk modul Pendaftaran Mandiri ----- */
.navbar nav.nav-sub { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; border-top: 1px solid rgba(255,255,255,0.28); padding-top: 8px; font-size: 0.88rem; }
.nav-sub-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; opacity: 0.75; }

/* =====================================================================
   Landing page (index.php) -- navbar hijau, hero foto perkemahan dengan
   judul bertingkat, tombol Pendaftaran & Login, gelombang hijau di bawah,
   lalu bagian Tentang / Informasi / Jadwal / Kontak.
   ===================================================================== */
body.landing {
    --lp-ink: #0F3D22;
    --lp-gold: #FFC83D;
    background: #fff;
    color: var(--ui-gray-900);
    scroll-behavior: smooth;
}
body.landing section[id] { scroll-margin-top: 72px; }

/* ----- Navbar ----- */
.lp-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--brand-dark);
    color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}
.lp-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.lp-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.lp-brand:hover { text-decoration: none; }
.lp-brand img { height: 44px; }
.lp-brand span {
    font-family: "Poppins", "Inter", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
}
.lp-brand img + span { padding-left: 10px; border-left: 2px solid rgba(255, 255, 255, 0.55); }
.lp-menu { display: flex; gap: 6px; }
.lp-menu a {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 10px 16px;
    border-bottom: 3px solid transparent;
    text-decoration: none;
}
.lp-menu a:hover { color: #fff; text-decoration: none; }
.lp-menu a.active { color: #fff; border-bottom-color: #6BBF59; }
.lp-burger { display: none; background: none; border: 0; color: #fff; padding: 6px; cursor: pointer; }
.lp-burger svg { width: 26px; height: 26px; }

/* ----- Hero ----- */
.lp-hero {
    position: relative;
    min-height: calc(100vh - 68px);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 48px 16px 170px;
    background: linear-gradient(180deg, #DCE9EE 0%, #EEF3EA 55%, #E3EEDC 100%);
}
.lp-hero-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56%;
    background: url("../img/hero.jpg") center bottom / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
}
.lp-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 3vw;
}
.lp-hero-content > * { max-width: 620px; }
.lp-emblem { display: block; width: 280px; max-width: 70%; height: auto; margin: 0 0 6px 170px; }
.lp-title {
    font-family: "Poppins", "Inter", sans-serif;
    color: var(--lp-ink);
    text-transform: uppercase;
    margin: 0 0 18px;
    line-height: 1.05;
    text-align: center;
}
.lp-title .l1 { display: block; white-space: nowrap; font-size: clamp(1.9rem, 4.4vw, 3.9rem); font-weight: 800; letter-spacing: -0.01em; }
.lp-title .l2 { display: block; font-size: clamp(1rem, 2.3vw, 1.95rem); font-weight: 700; margin-top: 6px; }
.lp-title .l3 {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: clamp(1rem, 2.2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: 0.3em;
    margin-top: 14px;
}
.lp-title .l3::before, .lp-title .l3::after { content: ""; flex: 1; height: 3px; background: #6BBF59; border-radius: 2px; }
.lp-quote {
    font-family: "Poppins", "Inter", sans-serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    line-height: 1.55;
    color: var(--lp-ink);
    text-align: center;
    margin: 0 0 26px;
}
.lp-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 250px;
    padding: 16px 34px;
    border-radius: 999px;
    font-family: "Poppins", "Inter", sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.lp-btn svg { width: 26px; height: 26px; flex-shrink: 0; }
.lp-btn svg.arrow { width: 20px; height: 20px; }
.lp-btn:hover { text-decoration: none; transform: translateY(-2px); }
.lp-btn.solid { background: var(--brand-dark); color: #fff; box-shadow: 0 10px 22px rgba(15, 61, 34, 0.30); }
.lp-btn.solid:hover { background: var(--lp-ink); }
.lp-btn.outline { background: rgba(255, 255, 255, 0.85); color: var(--lp-ink); border: 3px solid var(--brand-dark); }
.lp-btn.outline:hover { background: #fff; }
.lp-btn.sm { min-width: 0; padding: 12px 26px; font-size: 1rem; }
.lp-btn:focus-visible, .lp-login-card:focus-visible, .lp-menu a:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 3px; }
.lp-login {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 20px;
}
.lp-login.open, .lp-login:target { display: grid; animation: page-fade-up .3s ease both; }
.lp-login-card {
    display: block;
    padding: 16px 18px;
    border-radius: 16px;
    background: #fff;
    color: var(--ui-gray-900);
    text-decoration: none;
    border-left: 5px solid var(--brand);
    box-shadow: 0 10px 24px rgba(15, 61, 34, 0.18);
    transition: transform .15s ease;
}
.lp-login-card:hover { text-decoration: none; transform: translateY(-3px); }
.lp-login-card strong { display: block; color: var(--brand-dark); font-size: 1.05rem; margin-bottom: 4px; }
.lp-login-card span { font-size: 0.85rem; color: var(--ui-gray-700); line-height: 1.45; }
.lp-wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 190px; z-index: 1; }

/* ----- Bagian bawah ----- */
.lp-section { padding: 64px 16px; background: #fff; }
.lp-section.alt { background: #F2F7F1; }
.lp-container { max-width: 860px; margin: 0 auto; }
.lp-section h2 {
    font-family: "Poppins", "Inter", sans-serif;
    color: var(--brand-dark);
    font-size: 1.7rem;
    margin: 0 0 16px;
}
.lp-section h2::after { content: ""; display: block; width: 56px; height: 4px; background: #6BBF59; border-radius: 2px; margin-top: 10px; }
.lp-section p { font-size: 1.02rem; line-height: 1.7; margin: 0 0 10px; }
.lp-muted { color: var(--ui-gray-700); }
.lp-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.lp-status.buka { background: #DCF5E3; color: var(--brand-dark); }
.lp-status.tutup { background: var(--ui-gray-100); color: var(--ui-gray-700); }
.lp-status .dot { width: 9px; height: 9px; border-radius: 50%; background: #9CA3AF; }
.lp-status.buka .dot { background: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25); }
.lp-countdown { display: flex; gap: 10px; margin: 6px 0 22px; }
.lp-countdown div {
    min-width: 70px;
    padding: 12px 6px;
    border-radius: 12px;
    background: var(--brand-dark);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.lp-countdown span { font-size: 1.6rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.lp-countdown small { font-size: 0.68rem; text-transform: uppercase; opacity: 0.85; margin-top: 4px; }
.lp-steps { margin: 6px 0 24px; padding-left: 22px; line-height: 1.9; }
.lp-footer { background: var(--lp-ink); color: rgba(255, 255, 255, 0.7); text-align: center; padding: 18px 16px; font-size: 0.85rem; }

/* ----- Responsif ----- */
@media (max-width: 900px) {
    .lp-burger { display: block; }
    .lp-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--brand-dark);
        padding: 6px 16px 14px;
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
    }
    .lp-menu.open { display: flex; }
    .lp-menu a { border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-left: 3px solid transparent; }
    .lp-menu a.active { border-bottom-color: rgba(255, 255, 255, 0.12); border-left-color: #6BBF59; }
    .lp-hero { flex-direction: column; justify-content: flex-start; padding: 28px 16px 0; min-height: 0; }
    .lp-hero-photo {
        position: relative;
        order: 2;
        width: calc(100% + 32px);
        margin: 18px -16px 0;
        height: 360px;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 25%);
    }
    .lp-hero-content { padding-left: 0; }
    .lp-hero-content > * { max-width: none; }
    .lp-emblem { margin: 0 auto 4px; width: 220px; }
    .lp-wave { height: 90px; z-index: 3; }
}
@media (max-width: 560px) {
    .lp-brand span { font-size: 0.9rem; }
    .lp-btn { width: 100%; min-width: 0; padding: 14px 24px; font-size: 1.1rem; }
    .lp-actions { gap: 12px; }
    .lp-login { grid-template-columns: 1fr; }
    .lp-title .l3 { gap: 10px; letter-spacing: 0.2em; }
    .lp-countdown div { min-width: 0; flex: 1; }
    .lp-hero-photo { height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
    body.landing { scroll-behavior: auto; }
    .lp-login.open { animation: none; }
}