* {
    box-sizing: border-box;
}

html {
    font-family: Arial, Helvetica, sans-serif;
    background: #f4f7f6;
    color: #17211e;
}

body {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: 1180px;
    margin: 0 auto;
	padding-inline: 8px;
}

.site-header {
    background: #086344;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.nav-wrapper {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    font-weight: 700;
    letter-spacing: 0.4px;
}

.main-nav {
    display: flex;
    gap: 22px;
}

.admin-card,.panel-card,.admin-card form-stack{padding: 40px}

.main-content {
    min-height: calc(100vh - 140px);
    padding-top: 60px;
    padding-bottom: 60px;
}

.eyebrow {
    color: #f26b21;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.error-page {
    text-align: center;
    padding: 80px 20px;
}

.error-page h1 {
    margin: 0;
    font-size: clamp(48px, 10vw, 80px);
    color: #17324d;
}

.button {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 20px;
    color: #17324d;
    background: #fff;
    border: 1px solid #e5e9ed;
    border-radius: 10px;
}
.button {background: #2f9dd3;color:#fff}
.button:hover {
    background: #0f7db3;
}

@media (max-width: 640px) {
    .nav-wrapper {
        align-items: flex-start;
        flex-direction: column;
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .main-nav {
        width: 100%;
        gap: 16px;
    }
}

.auth-section {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

.auth-card {
    width: 100%;
    max-width: 460px;
    padding: 32px;
    border: 1px solid #dfe3e8;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.07);
}

.auth-heading {
    margin-bottom: 24px;
}

.auth-heading h1 {
    margin-top: 4px;
    margin-bottom: 8px;
}

.auth-heading p {
    margin-top: 0;
}

.auth-form {
    display: grid;
    gap: 18px;
}

.form-group {
    display: grid;
    gap: 7px;
}

.form-group label {
    font-weight: 600;
}

.form-group input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #cbd2d9;
    border-radius: 8px;
    font: inherit;
}

.form-group input:focus {
    border-color: #2563eb;
    outline: 3px solid rgba(37, 99, 235, 0.15);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.button-primary {
    color: #ffffff;
    background: #1d4ed8;
}

.button-primary:hover {
    background: #1e40af;
}

.button-block {
    width: 100%;
}

.alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 8px;
}

.alert-error {
    color: #991b1b;
    border: 1px solid #fecaca;
    background: #fef2f2;
}

.alert-success {
    color: #166534;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-user {
    font-weight: 600;
}

.logout-form {
    display: inline;
    margin: 0;
}

.nav-logout-button {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.nav-logout-button:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .auth-section {
        padding: 24px 0;
    }

    .auth-card {
        padding: 22px;
    }

    .main-nav {
        flex-wrap: wrap;
    }
}

.profile-page {
    padding: 42px 0;
}

.profile-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.profile-heading h1 {
    margin: 4px 0 8px;
}

.profile-heading p {
    margin-top: 0;
}

.profile-status {
    padding: 8px 14px;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    color: #065f46;
    background: #ecfdf5;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr);
    gap: 24px;
}

.profile-card {
    padding: 26px;
    border: 1px solid #e0e5e9;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.profile-card h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 20px;
}

.profile-member-card {
    margin-top: 24px;
}

.profile-details {
    display: grid;
    gap: 0;
    margin: 0;
}

.profile-details > div {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    gap: 20px;
    padding: 8px 0;
    border-bottom: 1px solid #3d66828c;
	font-size: 14px;
}

.profile-details > div:last-child {
    border-bottom: 0;
}

.profile-details dt {
    color: #64748b;
    font-weight: 600;
	text-transform:uppercase;
}

.profile-details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.role-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.role-list li {
    padding: 11px 13px;
    border: 1px solid #d1fae5;
    border-radius: 8px;
    color: #065f46;
    background: #ecfdf5;
    font-weight: 600;
}

.muted-text {
    color: #64748b;
}

.error-page {
    max-width: 680px;
    margin: 70px auto;
    padding: 36px;
    text-align: center;
}

.nav-user {
    font-weight: 700;
}

@media (max-width: 760px) {
    .profile-page {
        padding: 26px 0;
    }

    .profile-heading {
        flex-direction: column;
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }

    .profile-card {
        padding: 20px;
    }

    .profile-details > div {
        gap: 5px;
		font-size: 12px;
	}
	.profile-details > div {
	grid-template-columns: minmax(150px, 10px) minmax(0, 1fr);
	}
	.profile-edit-details > div{
		grid-template-columns: minmax(15px, 120px) minmax(0,400px) !important;
	}
}
.profile-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.profile-card-heading h2 {
    margin-bottom: 0;
}

.profile-note {
    margin: 0 0 14px;
    color: #64748b;
    font-size: 14px;
}

.data-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #334155;
    background: #f8fafc;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.data-status-verified,
.data-status-active {
    border-color: #a7f3d0;
    color: #065f46;
    background: #ecfdf5;
}

.data-status-pending {
    border-color: #fde68a;
    color: #92400e;
    background: #fffbeb;
}

.data-status-not_found,
.data-status-invalid_response,
.data-status-connection_failed,
.data-status-callsign_mismatch,
.data-status-inactive,
.data-status-suspended {
    border-color: #fecaca;
    color: #991b1b;
    background: #fef2f2;
}

.profile-status-pending {
    border-color: #fde68a;
    color: #92400e;
    background: #fffbeb;
}

.profile-status-rejected,
.profile-status-disabled {
    border-color: #fecaca;
    color: #991b1b;
    background: #fef2f2;
}

@media (max-width: 640px) {
    .profile-card-heading {
        align-items: flex-start;
        flex-direction: column;
    }

}

.profile-heading-actions,
.profile-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.button-secondary {
    color: #334155;
    background: #ffffff;
    border: 1px solid #cbd5e1;
}

.button-secondary:hover {
    background: #f8fafc;
}

.profile-edit-form {
    display: grid;
    gap: 24px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.form-group-wide {
    grid-column: 1 / -1;
}

.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cbd2d9;
    border-radius: 8px;
    background: #ffffff;
    font: inherit;
}

.form-group textarea {
    resize: vertical;
}

.form-group input:disabled {
    color: #64748b;
    background: #f1f5f9;
}

.form-group small {
    color: #64748b;
    line-height: 1.4;
}

.form-group textarea:focus,
.form-group select:focus {
    border-color: #2563eb;
    outline: 3px solid rgba(37, 99, 235, 0.15);
}

.profile-form-actions {
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .profile-heading-actions {
        width: 100%;
        align-items: flex-start;
        flex-direction: column-reverse;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group-wide {
        grid-column: auto;
    }

    .profile-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .profile-form-actions .button {
        width: 100%;
    }
}

/* =========================================================
   Beranda: hero actions, statistik, fitur
   ========================================================= */
.hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.hero-actions .button {
    margin-top: 0;
}

.stat-row {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 56px;
}

.feature-card {
    padding: 24px;
    border: 1px solid #e0e5e9;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.feature-card h3 {
    margin-top: 0;
    color: #17324d;
}

.feature-card p {
    margin-bottom: 0;
    color: #53635e;
    line-height: 1.6;
}

@media (max-width: 860px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Pendaftaran: pilihan tipe & form lebar
   ========================================================= */
.auth-card-wide {
    max-width: 720px;
}

.auth-footnote {
    margin-top: 20px;
    margin-bottom: 0;
    color: #64748b;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.choice-card {
    display: grid;
    gap: 10px;
    padding: 22px;
    border: 1px solid #e0e5e9;
    border-radius: 12px;
    background: #f9fbfa;
    align-content: start;
}

.choice-card h3 {
    margin: 0;
    color: #17324d;
}

.choice-card p {
    margin: 0;
    color: #53635e;
    font-size: 14px;
    line-height: 1.6;
}

.choice-card .button {
    margin-top: 6px;
    justify-self: start;
}

@media (max-width: 640px) {
    .choice-grid {
        grid-template-columns: 1fr;
    }
}

.input-with-action {
    display: flex;
    gap: 10px;
}

.input-with-action input {
    flex: 1;
}

.input-with-action .button {
    margin-top: 0;
    white-space: nowrap;
}

.form-hint {
    display: block;
    min-height: 18px;
    color: #64748b;
}

.form-hint-success {
    color: #065f46;
    font-weight: 600;
}

.form-hint-error {
    color: #991b1b;
    font-weight: 600;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    font-weight: 600;
}

.inline-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.inline-form select {
    padding: 10px 12px;
    border: 1px solid #cbd2d9;
    border-radius: 8px;
    font: inherit;
}

/* =========================================================
   Panel Admin
   ========================================================= */
.admin-body {
    margin: 0;
    background: #f4f7f6;
}

.admin-shell {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    display: flex;
    flex-direction: column;
    width: 260px;
    flex-shrink: 0;
    padding: 28px 22px;
    background: #17324d;
    color: #fff;
}

.admin-sidebar .brand {
    font-weight: 700;
    letter-spacing: 0.4px;
}

.admin-sidebar-caption {
    margin: 6px 0 26px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.admin-nav {
    display: grid;
    gap: 4px;
}

.admin-nav-link {
    padding: 11px 14px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.admin-nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
}

.admin-nav-link.is-active {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.admin-sidebar-footer {
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    display: grid;
    gap: 10px;
}

.admin-user {
    font-weight: 700;
}

.admin-sidebar-footer .nav-logout-button {
    color: rgba(255, 255, 255, 0.85);
}

.admin-content {
    flex: 1;
    min-width: 0;
    padding: 40px 44px;
}

.admin-page-heading {
    margin-bottom: 28px;
}

.admin-page-heading h1 {
    margin: 4px 0 8px;
}

.admin-page-heading p {
    margin: 0;
    color: #53635e;
}

.admin-filter-form {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.admin-filter-form input,
.admin-filter-form select {
    padding: 11px 13px;
    border: 1px solid #cbd2d9;
    border-radius: 8px;
    font: inherit;
}

.admin-filter-form input {
    flex: 1;
    min-width: 220px;
}

.dash-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.dash-card {
    display: grid;
    gap: 6px;
    padding: 22px;
    border: 1px solid #e0e5e9;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.dash-card-value {
    font-size: 30px;
    font-weight: 700;
    color: #f26b21;
}

.dash-card-label {
    color: #64748b;
    font-weight: 600;
}

.quick-links {
    margin: 0;
    padding-left: 20px;
    line-height: 2;
}

@media (max-width: 960px) {
    .admin-shell {
        flex-direction: column;
    }

    .admin-sidebar {
        width: auto;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 14px;
    }

    .admin-sidebar-caption {
        display: none;
    }

    .admin-nav {
        grid-auto-flow: column;
        overflow-x: auto;
    }

    .admin-sidebar-footer {
        margin-top: 0;
        border-top: 0;
        padding-top: 0;
        flex-direction: row;
        align-items: center;
    }

    .admin-content {
        padding: 26px 20px;
    }

    .dash-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Tabel admin & badge
   ========================================================= */
.table-wrap {
    overflow-x: auto;
    border: 1px solid #e0e5e9;
    border-radius: 14px;
    background: #ffffff;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

.admin-table th,
.admin-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid #edf0f2;
    white-space: nowrap;
}

.admin-table th {
    color: #64748b;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.admin-table tr:last-child td {
    border-bottom: 0;
}

.button-small {
    margin-top: 0;
    padding: 8px 14px;
    font-size: 13px;
}

.badge {
    display: inline-flex;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.badge-type-amateur {
    color: #065f46;
    background: #ecfdf5;
}

.badge-type-candidate {
    color: #1d4ed8;
    background: #eff6ff;
}

.badge-type-visitor {
    color: #475569;
    background: #f1f5f9;
}

.badge-status-approved {
    color: #065f46;
    background: #ecfdf5;
}

.badge-status-awaiting_admin_review {
    color: #92400e;
    background: #fffbeb;
}

.badge-status-rejected,
.badge-status-deactivated {
    color: #991b1b;
    background: #fef2f2;
}

.pagination {
    display: flex;
    gap: 8px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.pagination a {
    padding: 8px 13px;
    border: 1px solid #cbd2d9;
    border-radius: 8px;
    font-weight: 600;
}

.pagination a.is-active {
    color: #fff;
    background: #f26b21;
    border-color: #f26b21;
}

/* =========================================================
   Direktori publik
   ========================================================= */
.directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.directory-card {
    display: grid;
    gap: 6px;
    padding: 20px;
    border: 1px solid #e0e5e9;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.directory-card h3 {
    margin: 6px 0 0;
    font-size: 17px;
}

.directory-callsign {
    margin: 0;
    color: #086344;
    font-weight: 700;
}

/* =========================================================
   Kartu anggota
   ========================================================= */
.card-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.card-actions form {
    margin: 0;
}

.card-preview-frame {
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 297 / 190;
    border: 1px solid #e0e5e9;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.card-preview-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* === Rekonstruksi tema portal WordPress / Ultimate Member === */
:root{--orange:#f26b21;--orange-dark:#d9500d;--navy:#17324d;--ink:#243746;--muted:#708090;--line:#e5e9ed;--soft:#f5f7f9;--white:#fff}
html{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--soft);color:var(--ink)}
body{background:var(--soft)}
.top-strip{background:#12283d;color:#cbd5df;font-size:12px;padding:7px 0;text-align:right}.site-header{position:sticky;top:0;z-index:50;background: linear-gradient(0deg,rgba(164, 222, 219, 1) 0%, rgba(255, 255, 255, 1) 40%);color:var(--ink);box-shadow:0 4px 18px rgba(24,50,77,.08)}
.nav-wrapper{min-height:78px}.brand{display:flex;align-items:center;gap:11px}.brand-mark{display:grid;place-items:center;width:48px;height:48px;border:4px solid var(--orange);border-radius:50%;color:var(--navy);font-weight:900;font-size:14px;box-shadow:inset 0 0 0 3px #fff;background:#f8fafc}.brand-copy{display:grid;line-height:1}.brand-copy strong{color:var(--navy);font-size:23px;letter-spacing:1.5px}.brand-copy small{margin-top:4px;color:var(--orange);font-weight:800;letter-spacing:1.7px;font-size:10px}
.main-nav{gap:4px}.main-nav>a,.nav-logout-button{padding:11px 13px;border-radius:8px;font-size:14px;font-weight:700;color:#435466}.main-nav>a:hover,.main-nav>a.is-active{color:var(--orange);background:#fff5ee;text-decoration:none}.main-nav .nav-login{color:#fff;background:var(--orange);padding-inline:18px}.main-nav .nav-login:hover,.main-nav .nav-login.is-active{color:#fff;background:var(--orange-dark)}.nav-avatar{display:inline-grid;place-items:center;width:25px;height:25px;margin-right:7px;border-radius:50%;background:#ffe4d3;color:var(--orange-dark)}.nav-toggle{display:none;border:0;background:transparent;padding:8px}.nav-toggle span{display:block;width:25px;height:2px;background:var(--navy);margin:5px}
.main-content{padding:0 0 72px;min-height:70vh}.main-content>.container{padding: 0 8px 15px}.portal-hero{position:relative;display:grid;grid-template-columns:1.35fr .65fr;align-items:center;min-height:480px;margin-top:-42px;padding:70px 64px;overflow:hidden;background:linear-gradient(120deg,#142f49,#244d6a);color:#fff;border-radius:0 0 28px 28px}.portal-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 25%,rgba(242,107,33,.32),transparent 32%),linear-gradient(135deg,transparent 60%,rgba(255,255,255,.04) 60%)}.hero-content,.hero-emblem{position:relative;z-index:1}.hero-kicker{display:inline-block;color:#ffd1b7;text-transform:uppercase;letter-spacing:2px;font-weight:800;font-size:12px}.portal-hero h1{margin:13px 0 18px;font-size:clamp(48px,6vw,78px);line-height:.98;letter-spacing:-2px}.portal-hero h1 span{color:var(--orange)}.portal-hero p{max-width:670px;color:#dbe6ef;font-size:18px;line-height:1.7}.button{margin-top:0;border-radius:9px;padding:13px 21px}.button-primary{background:var(--orange);color:#fff}.button-primary:hover{background:var(--orange-dark)}.button-light{background:#fff;color:var(--navy)}.hero-emblem{display:grid;place-items:center}.radio-ring{display:grid;place-items:center;width:250px;height:250px;border:16px solid rgba(255,255,255,.12);outline:3px solid rgba(255,255,255,.55);outline-offset:-30px;border-radius:50%;transform:rotate(-4deg);background:rgba(255,255,255,.04)}.radio-ring span{font-weight:900;letter-spacing:5px}.radio-ring strong{font-size:88px;line-height:.8;color:var(--orange)}.radio-ring small{letter-spacing:4px;font-weight:800}
.stats-panel{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);max-width:900px;margin:-42px auto 0;background:#fff;border-radius:16px;box-shadow:0 16px 45px rgba(20,47,73,.15);overflow:hidden}.stats-panel div{display:grid;place-items:center;padding:24px;border-right:1px solid var(--line)}.stats-panel div:last-child{border:0}.stats-panel strong{font-size:30px;color:var(--orange)}.stats-panel span{color:var(--muted);font-size:13px;font-weight:700}.section-heading{text-align:center;max-width:720px;margin:75px auto 30px}.section-heading span,.directory-hero .eyebrow{color:var(--orange);font-weight:800;text-transform:uppercase;letter-spacing:1.5px;font-size:16px}.section-heading h2{margin:9px 0;font-size:clamp(24px,4vw,34px);color:var(--navy)}.section-heading p{color:var(--muted);line-height:1.7}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.service-card{padding:29px;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 8px 28px rgba(24,50,77,.05);transition:.2s}.service-card:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(24,50,77,.12);border-color:#ffd4bd}.service-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:13px;background:#fff0e7;color:var(--orange);font-size:27px}.service-card h3{color:var(--navy);font-size:20px}.service-card p{color:var(--muted);line-height:1.65}.service-card b{color:var(--orange);font-size:14px}.membership-banner{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:65px;padding:40px 45px;border-radius:18px;background:linear-gradient(110deg,var(--orange),#ff8a45);color:#fff}.membership-banner span{font-weight:800;text-transform:uppercase;letter-spacing:1.4px;font-size:12px}.membership-banner h2{margin:7px 0}.membership-banner p{margin:0;color:#fff4ed}
.directory-hero{text-align:center;padding:20px 0 18px}.directory-hero h1{margin:7px 0;font-size:clamp(28px,5vw,42px);color:var(--navy)}.directory-hero p{color:var(--muted)}.member-search{display:flex;gap:12px;max-width:920px;margin:22px auto 32px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 30px rgba(24,50,77,.07)}.search-field{display:flex;align-items:center;flex:1;gap:10px;padding-left:12px}.search-field span{font-size:22px;color:var(--orange)}.member-search input,.member-search select{border:0;outline:0;background:#fff;font:inherit}.member-search input{width:100%;padding:12px 0}.member-search select{min-width:175px;padding:0 12px;border-left:1px solid var(--line)}.directory-summary{margin-bottom:17px;color:var(--muted)}.directory-summary strong{color:var(--navy)}.directory-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.directory-card{position:relative;display:block;padding:0;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 8px 25px rgba(24,50,77,.06);transition:.2s}.directory-card:hover{transform:translateY(-4px);box-shadow:0 15px 35px rgba(24,50,77,.12)}.member-cover{height:74px;background:linear-gradient(120deg,var(--navy),#2f6789)}.member-avatar{position:absolute;top:34px;left:24px;display:grid;place-items:center;width:80px;height:80px;border:5px solid #fff;border-radius:50%;overflow:hidden;background:#fff1e8;color:var(--orange);font-size:30px;font-weight:900;box-shadow:0 4px 12px rgba(0,0,0,.12)}.member-avatar img{width:100%;height:100%;object-fit:cover}.member-card-body{padding:48px 24px 23px}.member-card-body h3{margin:9px 0 2px;color:var(--navy);font-size:19px}.directory-callsign{margin:0;color:var(--orange);font-weight:900;letter-spacing:.7px}.member-location{margin:14px 0;color:var(--muted);font-size:13px}.view-profile{display:block;margin-top:17px;padding-top:14px;border-top:1px solid var(--line);color:var(--navy);font-size:13px;font-weight:800}.badge{font-size:10px;letter-spacing:.5px;text-transform:uppercase}.badge-type-amateur{background:#e8f4ff;color:#1769a5}.badge-type-candidate{background:#fff1e8;color:#c45213}.empty-state{background:#0e151d;grid-column:1/-1;text-align:center;padding:55px;border-radius:14px}.pagination{justify-content:center;margin-top:32px}
.site-footer{padding:0;background:#132d44;color:#d8e2ea}.footer-grid{display:grid;grid-template-columns:2fr 1fr;gap:60px;padding:45px 8px;padding-bottom:40px}.footer-grid strong{color:#fff}.footer-grid p{max-width:560px;line-height:1.7}.footer-grid div:last-child{display:grid;gap:9px;align-content:start}.footer-grid a{color:#d8e2ea}.footer-bottom{padding:17px 0;border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:#9db0bf;margin-bottom: 70px}
.auth-card,.profile-card,.feature-card,.dash-card{border-radius:16px}.auth-card{border-top:4px solid var(--orange)}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--orange);outline:3px solid rgba(242,107,33,.12)}
@media(max-width:900px){.container{width:auto}.member-type-card span {display:none}.portal-hero{grid-template-columns:1fr;padding:55px 35px}.hero-emblem{display:none}.service-grid,.directory-grid{grid-template-columns:repeat(2,1fr)}.main-nav{position:absolute;left:17px;right:17px;top:72px;display:none;flex-direction:column;align-items:stretch;padding:12px;background:#fff;border-radius:12px;box-shadow:0 14px 35px rgba(20,47,73,.18)}.main-nav.is-open{display:flex}.nav-toggle{display:block}.logout-form,.nav-logout-button{width:100%;text-align:left}.top-strip{display:none}}
@media(max-width:640px){
	.container{width:auto}
	.member-type-card span {display:none}
	.site-header{position:sticky}.nav-wrapper{min-height:68px;flex-direction:row;padding:0}.brand-mark{width:41px;height:41px}.brand-copy strong{font-size:19px}.portal-hero{min-height:auto;margin-top:-42px;margin-inline:-12px;padding:48px 24px 72px;border-radius:0 0 22px 22px}.portal-hero h1{font-size:47px}.portal-hero p{font-size:15px}.hero-actions{flex-direction:column;align-items:stretch}.stats-panel{grid-template-columns:1fr;margin-top:-34px}.stats-panel div{padding:15px;border-right:0;border-bottom:1px solid var(--line)}.stats-panel strong{font-size:24px}.service-grid,.directory-grid{grid-template-columns:1fr}.membership-banner{align-items:flex-start;flex-direction:column;padding:30px 24px}.member-search{flex-direction:column}.member-search select{padding:13px;border-left:0;border-top:1px solid var(--line)}.member-search .button{width:100%}.footer-grid{grid-template-columns:1fr;gap:25px}.main-content>.container{padding-top:8px}}
@media(max-width:1180px){
	.container{width:auto}
}
/* Registrasi tiga jenis akun dan penyempurnaan profil */
.register-page{max-width:900px;margin:0 auto}.register-heading{text-align:center;margin-bottom:28px}.register-heading h1{margin:8px 0}.register-heading p{color:#61706b}.register-form{padding:28px;background:#fff;border:1px solid #dfe5e2;border-radius:16px;box-shadow:0 10px 32px rgba(0,0,0,.06)}.member-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}.member-type-card{display:grid;gap:7px;padding:18px;border:2px solid #dce5e1;border-radius:12px;cursor:pointer}.member-type-card input{width:auto}.member-type-card span{color:#64736e;font-size:14px;line-height:1.4}.member-type-card.is-selected{border-color:#f26b21;background:#fff5ee}.registration-panel{margin-bottom:20px;padding:20px;background:#f7faf9;border-radius:12px}.two-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.full-width{grid-column:1/-1}.common-fields{margin:20px 0}.auth-switch{text-align:center;color:#61706b}.auth-switch a{color:#d9500d;font-weight:700}.profile-heading-actions,.profile-form-actions{display:flex;align-items:center;gap:12px}.button-secondary{color:#334155;background:#fff;border:1px solid #cbd5e1}.profile-edit-form{display:grid;gap:24px}.form-group-wide{grid-column:1/-1}.profile-form-actions{justify-content:flex-end}.data-status{display:inline-flex;align-items:center;padding:6px 11px;border:1px solid #cbd5e1;border-radius:999px;font-size:13px;font-weight:700}.data-status-verified,.data-status-active{border-color:#a7f3d0;color:#065f46;background:#ecfdf5}.data-status-pending{border-color:#fde68a;color:#92400e;background:#fffbeb}.data-status-not_found,.data-status-invalid_response,.data-status-connection_failed,.data-status-callsign_mismatch,.data-status-inactive,.data-status-suspended{border-color:#fecaca;color:#991b1b;background:#fef2f2}@media(max-width:700px){.member-type-grid,.two-columns{grid-template-columns:1fr}.register-form{padding:18px}.full-width,.form-group-wide{grid-column:auto}.profile-heading-actions,.profile-form-actions{align-items:stretch;flex-direction:column}.profile-form-actions .button{width:100%}}

/* Detail direktori anggota dan dokumen hasil migrasi */
.member-profile-page{max-width:1120px;margin:0 auto}.profile-back-link{display:inline-flex;margin-bottom:22px;color:#d9500d;font-weight:800;text-transform:uppercase;letter-spacing:.8px;font-size:13px}.member-profile-hero{display:flex;align-items:center;gap:22px;margin-bottom:26px;padding:28px;background:linear-gradient(120deg,#173e5b,#2f6789);border-radius:18px;color:#fff;box-shadow:0 14px 38px rgba(20,47,73,.18)}.member-profile-hero h1{margin:8px 0 3px;color:#fff;font-size:clamp(22px,4.5vw,34px)}.member-profile-identity{margin:0;color:#dcebf4;font-weight:700}.member-profile-avatar{position:relative;display:grid;place-items:center;flex:0 0 112px;width:112px;height:112px;border:1px solid rgba(255,255,255,.9);border-radius:50%;overflow:hidden;background:#fff1e8;color:#f26b21;font-size:42px;font-weight:900}.member-profile-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}.member-profile-avatar span{position:relative;z-index:1}.member-profile-layout{display:grid;gap:24px}.member-info-card,.member-documents-card{padding:0;overflow:hidden}.profile-card-title{padding:16px 24px;background:#17324d;color:#fff}.profile-card-title h2{margin:0;color:#fff;font-size:18px}.member-info-card .profile-details{padding:8px 26px 22px}.member-document-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding:26px}.member-document-item{display:flex;flex-direction:column;align-items:flex-start;gap:13px;min-width:0;padding:18px;border:1px solid #e0e7e4;border-radius:14px;background:#f8faf9}.member-document-item h3{margin:0;color:#173e5b;font-size:15px}.member-document-item h3 small{display:block;margin-top:4px;color:#8a5a00;font-size:11px;font-weight:600}.member-document-item img{display:block;max-width:100%;max-height:430px;width:auto;height:auto;margin:auto;border:1px solid #cfd9d5;border-radius:8px;background:#fff;object-fit:contain}.member-document-item>a:not(.button){align-self:stretch;text-align:center}.member-document-private{background:#fffaf0;border-color:#f1d69b}.generated-card-item{grid-column:1/-1}.generated-card-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;width:100%}.generated-card-meta span{font-weight:800;color:#173e5b}@media(max-width:700px){.member-profile-hero{align-items:flex-start;flex-direction:column;padding:22px}.member-profile-avatar{width:92px;height:92px;flex-basis:92px}.member-document-grid{grid-template-columns:1fr;padding:16px}.generated-card-item{grid-column:auto}.member-info-card .profile-details{padding-inline:18px}.profile-card-title{padding-inline:18px}}
.profile-details {justify-content:center}

/* Admin panel settings and permission */
.form-stack{display:grid;gap:1.25rem;padding: 30px;}
.form-stack label{display:grid;gap:.45rem;font-weight:700}
.form-stack input,.form-stack select,.form-stack textarea{width:100%;padding:.75rem .85rem;border:1px solid #d8e0e8;border-radius:8px;background:#fff;font:inherit}
.form-grid{display:grid;gap:1rem}
.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.check-grid label,.check-line{display:flex!important;align-items:center;gap:.55rem;font-weight:600!important}
.check-grid input,.check-line input{width:auto}
.permission-wrap{display:grid;gap:1rem}
.permission-table th:not(:first-child),.permission-table td:not(:first-child){text-align:center}
.permission-table td:first-child small{display:block;color:#6b7785;margin-top:.25rem}
.permission-category td{background:#eef4f7;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.table-scroll{overflow:auto; padding:25px}

@media(max-width:760px){
	.form-grid.two,.form-grid.three,.check-grid{grid-template-columns:1fr}
	.admin-sidebar{position:static}.admin-shell{display:block}
	}

/* Daftar anggota gaya legacy, live search, dan menu aksi aman */
.compact-heading{margin-bottom:14px}.compact-heading h1{margin-bottom:0}.legacy-member-toolbar{display:grid;grid-template-columns:120px 120px 120px 120px minmax(200px,1fr) 130px ;gap:10px;align-items:end;margin-bottom:10px;padding:8px;background:#d7e0e5;border-top:1px solid #a8b5bd}.legacy-member-toolbar label{display:grid;gap:3px;color:#0f172a;font-size:12px}.legacy-member-toolbar select,.legacy-member-toolbar input{width:100%;height:35px;padding:6px 8px;border:1px solid #87949c;border-radius:4px;background:#fff;color:#0f172a;font:inherit}.legacy-member-toolbar input:focus,.legacy-member-toolbar select:focus{border-color:#f26b21;outline:2px solid rgba(242,107,33,.16)}.legacy-member-toolbar.is-loading{opacity:.68}.legacy-result-summary{margin:6px 0 12px;color:#64748b}.legacy-result-summary strong{color:#102f49}.legacy-member-list{display:grid;gap:9px}.legacy-member-row{position:relative;display:grid;grid-template-columns:122px minmax(0,1fr) 42px;gap:18px;min-height:170px;padding:10px;border:1px solid #7b8790;border-radius:8px;background:#fff}.legacy-member-row.needs-attention{border-color:#ff2f2f;background:#ffe1e1}.legacy-member-photo{display:grid;place-items:center;width:120px;height:150px;overflow:hidden;background:#edf2f4;color:#f26b21;font-size:38px;font-weight:900}.legacy-member-photo img{width:100%;height:100%;object-fit:cover}.legacy-member-main{min-width:0;padding-top:2px}.legacy-member-title-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.legacy-member-title-line h2{margin:0;color:#071d31;font-size:17px}.legacy-member-meta{display:grid;gap:6px;margin:9px 0 0}.legacy-member-meta div{display:grid;grid-template-columns:82px 12px minmax(0,1fr);gap:4px;color:#435467;font-size:13px}.legacy-member-meta dt{font-weight:800}.legacy-member-meta dt::after{content:':' ;float:right}.legacy-member-meta dd{margin:0;overflow-wrap:anywhere}.member-action-wrap{position:relative;z-index:2;justify-self:end}.member-action-trigger{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:6px;background:transparent;color:#64748b;font-size:21px;cursor:pointer}.member-action-trigger:hover,.member-action-wrap.is-open .member-action-trigger{background:#fff0e7;color:#d9500d}.member-action-menu{position:absolute;z-index:10002;top:36px;right:0;width:225px;padding:7px 0;border:1px solid #c4d0d7;border-radius:4px;background:#dce8ed;box-shadow:0 14px 34px rgba(15,23,42,.2)}.member-action-menu a,.member-action-menu button{display:block;width:100%;padding:9px 13px;border:0;background:transparent;color:#102638;text-align:right;font:inherit;font-size:13px;cursor:pointer}.member-action-menu a:hover,.member-action-menu button:hover{background:#fff;color:#f26b21}.member-action-menu form{margin:0}.action-menu-backdrop{position:fixed;z-index:10000;inset:0;background:transparent;cursor:default}.member-action-wrap.is-open{z-index:10001}.member-action-open *:not(.member-action-menu):not(.member-action-menu *):not(.member-action-trigger){cursor:default!important}.live-search-results[aria-busy="true"]{opacity:.6;pointer-events:none;transition:opacity .15s}.badge-status-approved{background:#dcfce7;color:#166534}.badge-status-awaiting_admin_review{background:#fef3c7;color:#92400e}.badge-status-rejected,.badge-status-deactivated{background:#fee2e2;color:#991b1b}
@media(max-width:900px){.legacy-member-toolbar{font-size:11px; display:grid;grid-template-columns:80px 80px 90px 90px minmax(200px,1fr) 80px }}
@media(max-width:640px){.legacy-member-toolbar{grid-template-columns:1fr}.legacy-search-field{grid-column:auto}.legacy-member-row{grid-template-columns:84px minmax(0,1fr) 34px;gap:10px;min-height:0}.legacy-member-photo{width:82px;height:105px}.legacy-member-title-line{align-items:flex-start;flex-direction:column;gap:5px}.legacy-member-meta div{grid-template-columns:72px 8px minmax(0,1fr);font-size:12px}.member-action-menu{position:fixed;top:auto;right:12px;bottom:12px;left:12px;width:auto;max-height:70vh;overflow:auto;border-radius:10px}.member-action-menu a,.member-action-menu button{text-align:left;padding:13px 16px}}
.directory-hero-compact{margin-bottom:8px}.directory-hero-compact h1{margin-bottom:6px}.public-member-toolbar{margin-top:0}.legacy-member-title-line h2 a{color:inherit}.legacy-member-photo{text-decoration:none}.legacy-member-row:not(.needs-attention){border-color:#7b8790}.legacy-member-row .badge{font-size:10px}.member-action-wrap[hidden]{display:none}

/* Hotfix layout daftar anggota: HTML metadata hanya memiliki dt + dd. */
.legacy-member-main{
    width:100%;
    min-width:0;
}
.legacy-member-meta{
    width:100%;
    max-width:760px;
}
.legacy-member-meta div{
    grid-template-columns:110px minmax(0,1fr);
    column-gap:12px;
    align-items:start;
}
.legacy-member-meta dt{
    position:relative;
    min-width:0;
    white-space:nowrap;
}
.legacy-member-meta dt::after{
    content:':' ;
    position:absolute;
    right:0;
    float:none;
}
.legacy-member-meta dd{
    min-width:0;
    margin:0;
    overflow-wrap:break-word;
    word-break:normal;
    white-space:normal;
}
@media(max-width:640px){
    .legacy-member-meta div{
        grid-template-columns:74px minmax(0,1fr);
        column-gap:10px;
    }
    .legacy-member-meta dt::after{
        right:-2px;
    }
}

/* Klik card menuju profil dan popup foto profil */
.legacy-member-row[data-profile-card]{cursor:pointer;transition:border-color .15s,box-shadow .15s,background-color .15s}
.legacy-member-row[data-profile-card]:hover{border-color:#376985;box-shadow:0 5px 18px rgba(15,47,71,.10)}
.legacy-member-row[data-profile-card]:focus-visible{outline:3px solid rgba(8,118,83,.28);outline-offset:2px}
.legacy-member-photo{appearance:none;padding:0;border:0;cursor:zoom-in}
.legacy-member-photo:disabled{cursor:default}
.legacy-member-photo:focus-visible{outline:3px solid rgba(242,107,33,.34);outline-offset:2px}
.member-photo-modal[hidden]{display:none!important}
.member-photo-modal{position:fixed;z-index:12000;inset:0;display:grid;place-items:center;padding:24px;background:rgba(4,18,29,.82);cursor:default}
.member-photo-modal-dialog{display:grid;place-items:center;max-width:min(92vw,1000px);max-height:88vh;padding:8px;border-radius:12px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.member-photo-modal-dialog img{display:block;max-width:100%;max-height:calc(88vh - 16px);width:auto;height:auto;object-fit:contain;border-radius:7px}
.member-photo-modal-close{position:fixed;z-index:12001;top:18px;right:22px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(10,24,36,.72);color:#fff;font-size:31px;line-height:1;cursor:pointer}
body.member-photo-open{overflow:hidden}
@media(max-width:640px){
	.theme-switch{width:20px}
	.header-theme-control{max-width:10px !important}
	.member-photo-modal{padding:12px}
	.member-photo-modal-close{top:10px;right:10px}
	}

/* Toast floating global: otomatis hilang, dapat ditutup manual, dan tidak menggeser layout. */
.toast-stack{
    position:fixed;
    z-index:15000;
    top:92px;
    right:clamp(14px,3vw,38px);
    display:grid;
    width:min(440px,calc(100vw - 28px));
    gap:10px;
    pointer-events:none;
}
.toast-notification.alert{
    --toast-duration:4800ms;
    position:relative;
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 30px;
    align-items:center;
    gap:10px;
    min-height:58px;
    margin:0;
    padding:12px 14px 15px;
    overflow:hidden;
    border:1px solid transparent;
    border-radius:13px;
    background:#fff;
    box-shadow:0 18px 45px rgba(15,35,50,.20),0 3px 10px rgba(15,35,50,.08);
    color:#163247;
    pointer-events:auto;
    animation:toast-enter .34s cubic-bezier(.22,.8,.25,1) both;
}
.toast-notification.alert-success{border-color:#a7e8c5;background:linear-gradient(135deg,#f5fff9 0%,#e8fbf1 100%)}
.toast-notification.alert-error{border-color:#f4b3b3;background:linear-gradient(135deg,#fff8f8 0%,#ffecec 100%)}
.toast-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-weight:900;font-size:16px}
.alert-success .toast-icon{background:#d4f7e3;color:#087653}
.alert-error .toast-icon{background:#ffe0e0;color:#b42318}
.toast-message{font-size:14px;line-height:1.45;font-weight:650}
.toast-close{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:7px;background:transparent;color:#617284;font-size:22px;line-height:1;cursor:pointer}
.toast-close:hover{background:rgba(15,35,50,.08);color:#102f49}
.toast-progress{position:absolute;right:0;bottom:0;left:0;height:3px;transform-origin:left center;animation:toast-progress var(--toast-duration) linear forwards}
.alert-success .toast-progress{background:#23a66f}
.alert-error .toast-progress{background:#d64545}
.toast-notification.is-paused .toast-progress{animation-play-state:paused}
.toast-notification.is-leaving{animation:toast-leave .30s ease forwards}
@keyframes toast-enter{from{opacity:0;transform:translate3d(35px,-8px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes toast-leave{to{opacity:0;transform:translate3d(38px,-5px,0) scale(.96)}}
@keyframes toast-progress{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(max-width:640px){.toast-stack{top:72px;right:10px;width:calc(100vw - 20px)}.toast-notification.alert{grid-template-columns:30px minmax(0,1fr) 28px;padding:11px 12px 14px}}
@media(prefers-reduced-motion:reduce){.toast-notification.alert,.toast-notification.is-leaving,.toast-progress{animation-duration:.01ms!important}}

/* Direktori anggota: card profesional dan identitas warna berdasarkan jenis akun. */
.legacy-member-list{gap:12px}
.legacy-member-row{
    grid-template-columns:122px minmax(0,1fr) 42px;
    gap:18px;
    min-height:166px;
    padding:10px;
    overflow:visible;
    border:1px solid #d4dee5;
    border-radius:14px;
    background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%);
    box-shadow:0 5px 17px rgba(23,62,91,.055);
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.legacy-member-row[data-profile-card]:hover{
    transform:translateY(-2px);
    border-color:#9bb0bd;
    box-shadow:0 12px 28px rgba(23,62,91,.12);
}
.legacy-member-row.needs-attention{
    border-color:#efb2b2;
    background:linear-gradient(180deg,#fff9f9 0%,#fff3f3 100%);
}
.legacy-member-photo{
    width:120px;
    height:146px;
    border:1px solid rgba(110, 55, 55, 0.65);
    border-radius:10px;
    background:linear-gradient(145deg,#edf3f6,#e5edf1);
    box-shadow:0 5px 14px rgba(15,47,71,.10);
}
.legacy-member-photo img{transition:transform .28s ease}
.legacy-member-row:hover .legacy-member-photo img{transform:scale(1.025)}
.legacy-member-main{padding:0 0 2px}
.legacy-member-title-line{
    position:relative;
    display:flex;
    align-items:center;
    min-height:40px;
    margin:-1px 0 9px;
    padding:7px 130px 7px 12px;
    overflow:hidden;
    border-radius:9px;
    isolation:isolate;
}
.legacy-member-title-line::after{
    content:'';
    position:absolute;
    z-index:-1;
    inset:0;
    opacity:.96;
}
.member-type-amateur .legacy-member-title-line::after{background:linear-gradient(90deg,#ff565d 0%,#ff8589 42%,rgba(255,255,255,.92) 82%,rgba(255,255,255,0) 100%)}
.member-type-candidate .legacy-member-title-line::after{background:linear-gradient(90deg,#50b7ec 0%,#88d2f4 42%,rgba(255,255,255,.93) 82%,rgba(255,255,255,0) 100%)}
.member-type-visitor .legacy-member-title-line::after{background:linear-gradient(90deg,#aab5bf 0%,#cbd2d8 42%,rgba(255,255,255,.94) 82%,rgba(255,255,255,0) 100%)}
.legacy-member-title-line h2{font-size:17px;letter-spacing:.01em;text-shadow:0 1px 0 rgba(255,255,255,.18)}
.legacy-member-title-line .badge{
    border:1px solid rgba(255,255,255,.7);
    box-shadow:0 2px 6px rgba(15,35,50,.08);
    backdrop-filter:blur(3px);
}
.legacy-member-meta{gap:5px;margin-top:4px;max-width:820px}
.legacy-member-meta div{padding:1px 0;color:#344b5d;line-height:1.35}
.legacy-member-meta dt{color:#263e52;font-weight:850}
.member-action-wrap{position:absolute;top:13px;right:13px}
.member-action-trigger{border:1px solid rgba(255,255,255,.72);background:rgba(255,255,255,.72);box-shadow:0 3px 9px rgba(15,35,50,.08);backdrop-filter:blur(4px)}
.member-action-trigger:hover,.member-action-wrap.is-open .member-action-trigger{background:#fff;box-shadow:0 5px 13px rgba(15,35,50,.14)}
@media(max-width:700px){
    .legacy-member-row{grid-template-columns:88px minmax(0,1fr);gap:12px;padding:9px;border-radius:12px}
    .legacy-member-photo{width:86px;height:112px;border-radius:9px}
    .legacy-member-main{min-width:0}
    .legacy-member-title-line{min-height:36px;padding:6px 42px 6px 9px;gap:5px}
    .legacy-member-title-line h2{font-size:15px}
    .legacy-member-title-line .badge{font-size:8px}
    .member-action-wrap{top:11px;right:10px}
}

/* Hotfix: stabilkan dropdown aksi dan gunakan aksen role yang lebih ringan. */
.legacy-member-row,
.legacy-member-row[data-profile-card],
.legacy-member-row[data-profile-card]:hover,
.legacy-member-row:has(.member-action-wrap.is-open){
    transform:none !important;
}
.legacy-member-row[data-profile-card]:hover{
    border-color:#a9bac5;
    box-shadow:0 9px 24px rgba(23,62,91,.105);
}
.legacy-member-row:hover .legacy-member-photo img,
.legacy-member-row:has(.member-action-wrap.is-open) .legacy-member-photo img{
    transform:none !important;
}
.member-action-wrap,
.member-action-wrap.is-open,
.member-action-trigger,
.member-action-menu{
    transform:none !important;
}
.member-action-wrap.is-open .member-action-menu{
    animation:none !important;
}

/* Identitas role: garis aksen pada card + title netral + badge berwarna. */
.legacy-member-row{
    border-left-width:5px;
    background:#fff;
}


.legacy-member-title-line{
    min-height:38px;
    margin:0 0 8px;
    padding:5px 48px 5px 0;
    overflow:visible;
    border-radius:0;
    background:transparent;
}
.legacy-member-title-line::after{display:none!important}
.legacy-member-title-line h2{
    color:#102f49;
    text-shadow:none;
}
.legacy-member-title-line h2 a{color:inherit}

.legacy-member-title-line .badge{
    border:1px solid transparent;
    box-shadow:none;
    backdrop-filter:none;
}
.member-type-amateur .badge-type-amateur{
    color:#a51d27;
    background:#fff0f1;
    border-color:#ffc9cd;
}
.member-type-candidate .badge-type-candidate{
    color:#096d9d;
    background:#edf9ff;
    border-color:#bce9fb;
}
.member-type-visitor .badge-type-visitor{
    color:#526170;
    background:#f1f5f8;
    border-color:#d7e0e6;
}

/* Aksen halus pada foto, tanpa memenuhi area judul dengan warna. */
.member-type-amateur .legacy-member-photo{box-shadow:inset 0 3px 0 #ef4444,0 5px 14px rgba(15,47,71,.10)}
.member-type-candidate .legacy-member-photo{box-shadow:inset 0 3px 0 #38aee5,0 5px 14px rgba(15,47,71,.10)}
.member-type-visitor .legacy-member-photo{box-shadow:inset 0 3px 0 #94a3b8,0 5px 14px rgba(15,47,71,.10)}

/* Dropdown tetap berada di atas card tanpa mengubah ukuran/layout card. */
.member-action-wrap{contain:layout style}
.member-action-menu{will-change:auto}

@media(max-width:700px){
    .legacy-member-title-line{padding:4px 40px 4px 0}
}

/* Posisi badge direktori: jenis akun di bawah foto, status di kanan bawah card. */
.legacy-member-photo-column{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:122px;
    min-width:0;
    gap:7px;
}
.legacy-member-photo-column .legacy-member-photo{
    flex:0 0 auto;
}
.legacy-member-photo-column .badge-type{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:25px;
    padding:5px 7px;
    border-radius:7px;
    text-align:center;
    font-size:10px;
    line-height:1.15;
    letter-spacing:.045em;
    white-space:normal;
}
.legacy-member-title-line{
    padding-right:46px;
}
.legacy-member-row > .badge-status{
    position:absolute;
    z-index:3;
    right:0;
    bottom:6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    max-width:min(320px,calc(100% - 170px));
    min-height:27px;
    padding:6px 11px;
    border-radius:7px 0 0 7px;
    box-shadow:0 3px 9px rgba(15,35,50,.12);
    font-size:10px;
    line-height:1.15;
    text-align:center;
    white-space:normal;
}
.legacy-member-row > .badge-status-approved{
    color:#05603f;
    background:#dff8ea;
    border:1px solid #a9e8c6;
    border-right:0;
}
.legacy-member-row > .badge-status-awaiting_admin_review{
    color:#fff;
    background:#9a6424;
    border:1px solid #85531b;
    border-right:0;
}
.legacy-member-row > .badge-status-deactivated{
    color:#fff;
    background:#b42318;
    border:1px solid #941b13;
    border-right:0;
}
.legacy-member-row > .badge-status-rejected{
    color:#fff;
    background:#7f1d1d;
    border:1px solid #641313;
    border-right:0;
}
.legacy-member-main{
    padding-bottom:34px;
}

@media(max-width:700px){
    .legacy-member-row{
        grid-template-columns:82px minmax(0,1fr);
        gap:10px;
        padding:8px 8px 42px;
        min-height:0;
    }
    .legacy-member-photo-column{
        width:82px;
        gap:6px;
    }
    .legacy-member-photo-column .legacy-member-photo{
        width:82px;
        height:104px;
    }
    .legacy-member-photo-column .badge-type{
        min-height:22px;
        padding:4px 5px;
        border-radius:6px;
        font-size:7.5px;
        letter-spacing:.025em;
    }
    .legacy-member-title-line{
        min-height:30px;
        margin-bottom:5px;
        padding:2px 38px 2px 0;
    }
    .legacy-member-main{
        padding-bottom:0;
    }
    .legacy-member-row > .badge-status{
        right:0;
        bottom:7px;
        max-width:calc(100% - 18px);
        min-height:25px;
        padding:5px 9px;
        border-radius:7px 0 0 7px;
        font-size:8.5px;
    }
}

@media(max-width:420px){
    .legacy-member-row{
        grid-template-columns:72px minmax(0,1fr);
        gap:9px;
    }
    .legacy-member-photo-column{width:72px}
    .legacy-member-photo-column .legacy-member-photo{
        width:72px;
        height:92px;
    }
    .legacy-member-photo-column .badge-type{
        font-size:7px;
        padding-inline:3px;
    }
}

/* Compact member cards: lebih padat tanpa mengubah dropdown, popup, atau live search. */
.legacy-member-list{gap:8px}
.legacy-member-row{
    grid-template-columns:108px minmax(0,1fr) 38px;
    gap:12px;
    min-height:0;
    padding:8px 9px;
    border-radius:12px;
}
.legacy-member-photo-column{
    width:108px;
    gap:4px;
}
.legacy-member-photo-column .legacy-member-photo{
    width:108px;
    height:132px;
    border-radius:9px;
}
.legacy-member-photo-column .badge-type{
    min-height:21px;
    padding:3px 5px;
    border-radius:6px;
    font-size:8px;
    line-height:1.05;
}
.legacy-member-main{
    align-self:start;
    padding:0 0 25px;
}
.legacy-member-title-line{
    min-height:28px;
    margin:0 0 3px;
    padding:1px 40px 1px 0;
}
.legacy-member-title-line h2{
    margin:0;
    font-size:16px;
    line-height:1.15;
}
.legacy-member-meta{
    display:grid;
    gap:1px;
    margin-top:1px;
}
.legacy-member-meta div{
    min-height:20px;
    padding:0;
    line-height:1.22;
}
.legacy-member-meta dt,
.legacy-member-meta dd{
    font-size:12px;
    line-height:1.22;
	font-weight: 600;
	text-transform:uppercase;
}
.member-action-wrap{top:9px;right:9px}
.member-action-trigger{width:34px;height:34px}
.legacy-member-row > .badge-status{
    right:0;
    bottom:5px;
    min-height:23px;
    max-width:min(290px,calc(100% - 140px));
    padding:4px 9px;
    font-size:8.5px;
    border-radius:6px 0 0 6px;
}

@media(max-width:700px){
    .legacy-member-list{gap:7px}
    .legacy-member-row{
        grid-template-columns:72px minmax(0,1fr);
        gap:8px;
        padding:7px 7px 31px;
        border-radius:10px;
    }
    .legacy-member-photo-column{width:72px;gap:3px}
    .legacy-member-photo-column .legacy-member-photo{
        width:72px;
        height:88px;
        border-radius:7px;
    }
    .legacy-member-photo-column .badge-type{
        min-height:18px;
        padding:2px 3px;
        font-size:6.7px;
        border-radius:5px;
    }
    .legacy-member-title-line{
        min-height:24px;
        margin-bottom:2px;
        padding:0 34px 0 0;
    }
    .legacy-member-title-line h2{font-size:14px}
    .legacy-member-main{padding-bottom:0}
    .legacy-member-meta{gap:0}
    .legacy-member-meta div{min-height:18px;grid-template-columns:74px minmax(0,1fr)}
    .legacy-member-meta dt,.legacy-member-meta dd{font-size:10.5px;line-height:1.18}
    .member-action-wrap{top:7px;right:7px}
    .member-action-trigger{width:31px;height:31px}
    .legacy-member-row > .badge-status{
        bottom:5px;
        max-width:calc(100% - 14px);
        min-height:21px;
        padding:3px 7px;
        font-size:7.5px;
        border-radius:6px 0 0 6px;
    }
}

@media(max-width:420px){
    .legacy-member-row{grid-template-columns:64px minmax(0,1fr);gap:7px;padding-bottom:29px}
    .legacy-member-photo-column{width:64px}
    .legacy-member-photo-column .legacy-member-photo{width:64px;height:80px}
    .legacy-member-photo-column .badge-type{font-size:6.2px}
    .legacy-member-meta div{grid-template-columns:68px minmax(0,1fr)}
    .legacy-member-meta dt,.legacy-member-meta dd{font-size:10px}
}

/* Hotfix foto direktori: pertahankan rasio asli dan kembalikan posisi badge klasik. */
.legacy-member-row{
    grid-template-columns:108px minmax(0,1fr) 38px;
    align-items:start;
}
.legacy-member-photo-column{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:108px;
    min-width:0;
    gap:4px;
}
.legacy-member-photo-column .legacy-member-photo{
    width:108px;
    height:auto !important;
    min-height:0;
    padding:0;
    overflow:hidden;
    aspect-ratio:auto !important;
}
.legacy-member-photo-column .legacy-member-photo img{
    display:block;
    width:100%;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:center;
}
.legacy-member-photo-column .legacy-member-photo > span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:126px;
}
.legacy-member-photo-column .badge-type{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:21px;
    padding:3px 5px;
    border-radius:6px;
    text-align:center;
    font-size:8px;
    line-height:1.05;
    letter-spacing:.035em;
    white-space:normal;
}
.legacy-member-title-line{
    min-height:28px;
    margin:0 0 3px;
    padding:1px 40px 1px 0;
}
.legacy-member-row > .badge-status{
    position:absolute;
    z-index:3;
    right:1px;
    bottom:5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    max-width:min(290px,calc(100% - 140px));
    min-height:23px;
    padding:4px 9px;
    border-radius:6px 0 0 6px;
    font-size:8.5px;
    line-height:1.15;
    text-align:center;
    white-space:normal;
    box-shadow:0 3px 9px rgba(15,35,50,.12);
}
.legacy-member-row > .badge-status-approved{color:#05603f;background:#dff8ea;border:1px solid #a9e8c6;border-right:0}
.legacy-member-row > .badge-status-awaiting_admin_review{color:#7b4d08;background:#fff0bd;border:1px solid #efd77e;border-right:0}
.legacy-member-row > .badge-status-deactivated{color:#fff;background:#b42318;border:1px solid #941b13;border-right:0}
.legacy-member-row > .badge-status-rejected{color:#fff;background:#7f1d1d;border:1px solid #641313;border-right:0}
.legacy-member-main{padding:0 25px}

@media(max-width:700px){
    .legacy-member-row{
        grid-template-columns:72px minmax(0,1fr);
        gap:8px;
        padding:7px 7px 31px;
    }
    .legacy-member-photo-column{width:72px;gap:3px}
    .legacy-member-photo-column .legacy-member-photo{width:72px;height:auto!important}
    .legacy-member-photo-column .legacy-member-photo img{width:100%;height:auto!important}
    .legacy-member-photo-column .legacy-member-photo > span{min-height:84px}
    .legacy-member-photo-column .badge-type{min-height:18px;padding:2px 3px;font-size:6.7px;border-radius:5px}
    .legacy-member-main{padding-bottom:0}
    .legacy-member-row > .badge-status{
        bottom:5px;
        max-width:calc(100% - 14px);
        min-height:21px;
        padding:3px 7px;
        font-size:7.5px;
        border-radius:6px 0 0 6px;
    }
}
@media(max-width:420px){
    .legacy-member-row{grid-template-columns:64px minmax(0,1fr);gap:7px;padding-bottom:29px}
    .legacy-member-photo-column{width:64px}
    .legacy-member-photo-column .legacy-member-photo{width:64px;height:auto!important}
    .legacy-member-photo-column .legacy-member-photo > span{min-height:76px}
    .legacy-member-photo-column .badge-type{font-size:6.2px}
}


/* Hotfix: jangan tampilkan avatar inisial bila foto berhasil dimuat. */
.legacy-member-photo[ data-photo-popup ] > span[hidden],
.legacy-member-photo > span[hidden]{
    display:none !important;
}

/* Background lembut berdasarkan jenis akun. Status nonaktif menjadi prioritas. */
.legacy-member-row.member-type-amateur{
    background:linear-gradient(90deg, rgba(255,247,237,.98), rgba(255,255,255,.98) 58%);
    border-left-color:#fb923c;
}
.legacy-member-row.member-type-candidate{
    background:linear-gradient(90deg, rgba(239,248,255,.98), rgba(255,255,255,.98) 58%);
    border-left-color:#38bdf8;
}
.legacy-member-row.member-type-visitor{
    background:linear-gradient(90deg, rgba(245,247,249,.98), rgba(255,255,255,.98) 58%);
    border-left-color:#94a3b8;
}
.legacy-member-row.member-status-awaiting_admin_review{
    background:linear-gradient(90deg, rgba(255,250,224,.99), rgba(255,255,255,.98) 64%);
    border-color:#eab308;
    border-left-color:#eab308;
}
.legacy-member-row.member-status-deactivated{
    background:linear-gradient(90deg, rgba(255,235,235,.99), rgba(255,255,255,.98) 64%);
    border-color:#ef4444;
    border-left-color:#dc2626;
}
.legacy-member-row.member-status-rejected{
    background:linear-gradient(90deg, rgba(255,238,242,.99), rgba(255,255,255,.98) 64%);
    border-color:#f43f5e;
    border-left-color:#e11d48;
}

/* Pastikan area kosong di bawah gambar tidak terbentuk oleh fallback avatar. */
.legacy-member-photo-column .legacy-member-photo:has(img:not([hidden])) > span{
    display:none !important;
}

/* Mobile directory stabilization: compact badges, role backgrounds, full action sheet. */
.legacy-member-toolbar,
.legacy-member-toolbar *{box-sizing:border-box}
.legacy-member-toolbar{max-width:100%;overflow:hidden}
.legacy-member-toolbar label,
.legacy-member-toolbar select,
.legacy-member-toolbar input{min-width:0;max-width:100%}

/* Restore role backgrounds even after later thumbnail/layout patches. */
.legacy-member-row.member-type-amateur{
    background: linear-gradient(90deg,#ffe7c2 0%,#fffdf9 52%,#ffead8 100%) !important;
	border-color:#f80 !important;
}
.legacy-member-row.member-type-candidate{
    background: linear-gradient(90deg,#e5f3ff 0%,#def1ff 52%,#f5fcff 100%) !important;
	border-color:#088 !important;
}
.legacy-member-row.member-type-visitor{
    background: linear-gradient(90deg,#ccffa2 0%,#fafbfc 52%,#c6d8b7 100%) !important;
	border-color:#888 !important;
}
.legacy-member-row.member-status-awaiting_admin_review{
    background: linear-gradient(90deg,#bebebe 0%,#fafbfc 52%,#e7e7e7 100%) !important;
}
.legacy-member-row.member-status-deactivated{
    background: linear-gradient(90deg,#ff5d6c 0%,#fff4f4 60%,#f9b8b8 100%) !important;
    border-color:#ef4444 !important;
}
.legacy-member-row.member-status-rejected{
    background:linear-gradient(90deg,#ffe8ee 0%,#fff5f7 60%,#fff 100%) !important;
    border-color:#f43f5e !important;
}

@media(max-width:700px){
    .directory-hero-compact{display:none}
    .public-member-toolbar{
        grid-template-columns:1fr 1fr;
        gap:8px;
        width:100%;
        margin:8px 0 10px;
        padding:8px;
        overflow:visible;
    }
    .public-member-toolbar .legacy-search-field{grid-column:1/-1}
    .public-member-toolbar select,
    .public-member-toolbar input{width:100%;height:36px}

    .legacy-member-list{gap:8px}
    .legacy-member-row{
        grid-template-columns:76px minmax(0,1fr);
        gap:9px;
        min-height:0;
        padding:8px 8px 28px;
        border-radius:11px;
        overflow:visible;
    }
    .legacy-member-photo-column{
        width:76px;
        gap:3px;
        align-self:end;
    }
    .legacy-member-photo-column .legacy-member-photo{
        width:76px;
        height:auto !important;
        min-height:0;
        border-radius:8px;
        background:transparent;
    }
    .legacy-member-photo-column .legacy-member-photo img{
        display:block;
        width:100%;
        height:auto !important;
        max-height:112px;
        object-fit:contain !important;
    }
    .legacy-member-photo-column .legacy-member-photo > span:not([hidden]){
        display:flex;
        min-height:92px;
        border-radius:8px;
        background:#edf2f4;
    }
    .legacy-member-photo-column .badge-type{
        width:100%;
        min-height:17px;
        padding:2px 2px;
        border-radius:5px;
        font-size:6.4px;
        line-height:1;
        white-space:nowrap;
    }
    .legacy-member-main{padding:0 10px;min-width:0}
    .legacy-member-title-line{
        min-height:22px;
        margin:0 0 3px;
        padding:0 34px 0 0;
    }
    .legacy-member-title-line h2{font-size:14px;line-height:1.15}
    .legacy-member-meta{margin-top:2px;gap:0}
    .legacy-member-meta div{
        grid-template-columns:90px minmax(0,1fr);
        gap:4px;
        min-height:18px;
    }
    .legacy-member-meta dt,
    .legacy-member-meta dd{font-size:10px;line-height:1.2}

    .legacy-member-row > .badge-status{
        right:0;
        bottom:5px;
        width:auto;
        max-width:calc(100% - 94px);
        min-height:19px;
        padding:3px 7px;
        border-radius:6px 0 0 6px;
        font-size:7px;
        line-height:1.05;
        white-space:nowrap;
    }

    .member-action-wrap{position:absolute;top:8px;right:8px;z-index:20}
    .member-action-trigger{width:31px;height:31px}
    .member-action-wrap.is-open{z-index:10004}
    .member-action-wrap.is-open .member-action-menu{
        position:fixed !important;
        z-index:10005 !important;
        top:auto !important;
        right:12px !important;
        bottom:12px !important;
        left:12px !important;
        display:block;
        width:auto !important;
        min-width:0 !important;
        max-width:none !important;
        max-height:min(72vh,560px);
        padding:7px 0;
        overflow-y:auto;
        border:1px solid #b8c8d1;
        border-radius:14px;
        background:#eef4f7;
        box-shadow:0 20px 60px rgba(15,23,42,.30);
    }
    .member-action-menu a,
    .member-action-menu button{
        display:block !important;
        width:100% !important;
        min-height:44px;
        padding:11px 16px !important;
        color:#102638 !important;
        background:transparent;
        text-align:left !important;
        font-size:14px !important;
        line-height:1.3 !important;
        white-space:normal !important;
        visibility:visible !important;
        opacity:1 !important;
    }
    .member-action-menu form{display:block;width:100%;margin:0}
    .action-menu-backdrop{z-index:10003;background:rgba(15,23,42,.18)}
}

@media(max-width:420px){
    .public-member-toolbar{grid-template-columns:1fr}
    .public-member-toolbar .legacy-search-field{grid-column:auto}
    .legacy-member-row{grid-template-columns:70px minmax(0,1fr);gap:8px;padding:7px 7px 27px}
    .legacy-member-photo-column{width:65px}
    .legacy-member-photo-column .legacy-member-photo{width:65px}
    .legacy-member-photo-column .legacy-member-photo img{max-height:104px}
    .legacy-member-photo-column .badge-type{font-size:6px}
    .legacy-member-meta div{grid-template-columns:78px minmax(0,1fr)}
    .legacy-member-meta dt,.legacy-member-meta dd{font-size:8px}
}

/* Registrasi Calon Amatir: form bergaya formulir CAMAR lama */
.candidate-registration-panel{
    padding:28px;
    border:1px solid #c5ddeb;
}
.candidate-number-preview{
    margin:0 0 28px;
    font-size:20px;
    color:#102d43;
}
.candidate-number-preview strong{font-weight:500}
.candidate-number-preview small{
    display:block;
    margin-top:5px;
    color:#5c7180;
    font-size:12px;
}
.candidate-form-stack{display:grid;gap:18px;max-width:620px;margin:0 auto}
.candidate-form-stack .form-group{gap:8px}
.candidate-form-stack label{font-weight:700;color:#3d4d59}
.candidate-form-stack input,
.candidate-form-stack select{
    min-height:48px;
    border-color:#c3d1dc;
    border-radius:2px;
    background:#fff;
}
.required-mark{color:#9aa7ae;margin-left:4px}
.crop-upload-group{text-align:left}
.crop-upload-group label small{font-weight:500}
.visually-hidden-file{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}
.crop-upload-button{
    width:200px;
    align-self:center;
    margin:0 auto;
    background:#2f9dd3;
    color:#fff;
    border:0;
    box-shadow:0 3px 8px rgba(20,72,101,.2);
}
.crop-upload-button:hover{background:#238cc1}
.crop-upload-group>small{display:block;text-align:center;color:#617783}
.crop-result-preview{
    position:relative;
    width:160px;
    margin:4px auto;
    overflow:hidden;
    border:3px solid #fff;
    border-radius:8px;
    box-shadow:0 4px 15px rgba(15,47,71,.16);
}
.crop-result-preview img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.crop-result-preview-wide{width:min(100%,360px)}
.crop-result-preview-wide img{aspect-ratio:auto;max-height:260px}
.crop-change-link{
    width:100%;
    padding:8px;
    border:0;
    background:#fff;
    color:#f26b21;
    font-weight:700;
    cursor:pointer;
}
.image-crop-modal[hidden]{display:none!important}
.image-crop-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:18px}
.image-crop-backdrop{position:absolute;inset:0;background:rgba(5,20,29,.76)}
.image-crop-dialog{
    position:relative;
    width:min(94vw,700px);
    max-height:94vh;
    overflow:auto;
    padding:20px;
    border-radius:14px;
    background:#fff;
    box-shadow:0 24px 80px rgba(0,0,0,.35);
}
.image-crop-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}
.image-crop-header h2{margin:0 0 3px;font-size:21px}
.image-crop-header p{margin:0;color:#64748b;font-size:13px}
.crop-close-button{border:0;background:transparent;font-size:32px;line-height:1;cursor:pointer;color:#64748b}
.crop-stage-wrap{
    display:grid;
    place-items:center;
    min-height:300px;
    padding:12px;
    overflow:hidden;
    border-radius:10px;
    background:#17232b;
}
.crop-stage-wrap canvas{display:block;max-width:100%;max-height:58vh;touch-action:none;cursor:grab;background:#111}
.crop-stage-wrap canvas:active{cursor:grabbing}
.crop-controls{display:grid;gap:7px;margin-top:15px}
.crop-controls label{font-weight:700}
.crop-controls small{color:#64748b}
.crop-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.crop-modal-open{overflow:hidden}
@media(max-width:700px){
    .candidate-registration-panel{padding:20px 14px}
    .candidate-number-preview{font-size:18px}
    .image-crop-modal{padding:8px}
    .image-crop-dialog{padding:14px;border-radius:10px}
    .crop-stage-wrap{min-height:220px;padding:6px}
    .crop-dialog-actions .button{flex:1}
}

/* Inline editor halaman detail anggota */
.profile-edit-permission {
    display: inline-flex;
    align-items: center;
    padding: .28rem .65rem;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}
.member-info-editable .profile-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.profile-details-editable input,
.profile-details-editable textarea {
    width: 100%;
    min-height: 40px;
    padding: .55rem .7rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #102a43;
    font: inherit;
    box-sizing: border-box;
}
.profile-details-editable textarea {
    resize: vertical;
    min-height: 68px;
}
.profile-details-editable input:focus,
.profile-details-editable textarea:focus {
    outline: none;
    border-color: #0f8a66;
    box-shadow: 0 0 0 3px rgba(15,138,102,.12);
}
.member-inline-edit-actions {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.4rem 1.25rem;
    border-top: 1px solid #e5e7eb;
}
.member-profile-hero-visitor { background: linear-gradient(135deg,#475569,#64748b); }
@media (max-width: 640px) {
    .profile-details-editable > div { align-items: flex-start; }
    .profile-details-editable input,
    .profile-details-editable textarea { min-height: 38px; }
    .member-inline-edit-actions { padding: .85rem 1rem 1rem; }
    .member-inline-edit-actions .button { width: 100%; }
}

/* Read-only profile with explicit edit mode */
.member-profile-hero { position: relative; }
.member-profile-edit-button { position: absolute; top: 1.25rem; right: 1.25rem; background: rgba(170, 207, 233, 0.96); color: #12324e; }
.profile-card-title { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.profile-card-title .button-small { min-height: 34px; padding: .45rem .8rem; }
.member-edit-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; }
.member-edit-heading h1 { margin: .35rem 0 .15rem; }
.member-edit-heading p { margin: 0; color: #637586; }
.readonly-note { color: #66788a; font-size: .82rem; font-weight: 700; }
.member-edit-form .profile-card { margin-bottom: 1rem; }
.member-edit-upload-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; padding: 1rem; }
.member-edit-upload-card { border: 1px solid #d9e2e8; border-radius: 12px; background: #f9fbfc; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
.member-edit-upload-card h3 { margin: 0; }
.member-edit-current-image { max-width: 220px; max-height: 280px; width: auto; height: auto; border-radius: 8px; object-fit: contain; border: 1px solid #dce4e9; }
.member-edit-current-ktp { max-width: 100%; max-height: 260px; }
.remove-document-option { display: inline-flex; width: auto; max-width: 100%; gap: .45rem; align-items: center; flex-wrap: nowrap; white-space: nowrap; font-size: .88rem; line-height: 1.2; color: #9b2525; }
.remove-document-option input[type="checkbox"] { appearance: auto; -webkit-appearance: checkbox; flex: 0 0 auto; width: 16px !important; height: 16px !important; min-width: 16px; min-height: 16px; margin: 0; padding: 0; }
.member-edit-actions { position: sticky; bottom: 0; z-index: 12; display: flex; justify-content: flex-end; gap: .75rem; padding: .9rem 0; background: linear-gradient(to top, #f4f7f9 70%, rgba(244,247,249,0)); }
.member-edit-upload-card input[type="file"] { max-width: 100%; }

@media (max-width: 720px) {
    .member-profile-edit-button { top: .75rem; right: .75rem; padding: .45rem .7rem; }
    .member-edit-heading { align-items: flex-start; flex-direction: column; }
    .member-edit-upload-grid { grid-template-columns: 1fr; padding: .75rem; }
    .member-edit-actions { justify-content: stretch; }
    .member-edit-actions .button { flex: 1; text-align: center; }
    .profile-card-title { align-items: flex-start; }
    .readonly-note { max-width: 48%; text-align: right; }
}

/* Profil: mode edit mempertahankan tata letak mode baca */
.member-profile-inline-form { display: contents; }
.profile-edit-details > div { display:grid; grid-template-columns:minmax(150px, 190px) minmax(0,400px); align-items:center; gap:18px; padding:2px 0; border-bottom: 1px solid #3d66828c; }
.profile-edit-details label { color:#58708e; font-weight:700; text-transform: uppercase; }
.profile-edit-details input,
.profile-edit-details textarea { width:100%; min-width:0; border:1px solid #c8d4df; border-radius:8px; padding:10px 12px; background:#fff; }
.profile-edit-details input[readonly] { background:#f3f6f8; color:#657587; }
.member-edit-document-grid .member-document-item { align-content:start; }
.member-edit-document-grid input[type=file] { max-width:100%; }
.sticky-edit-actions { position:sticky; bottom:12px; z-index:30; margin-top:16px; padding:12px; border:1px solid #d7e0e7; border-radius:12px; background:rgba(255,255,255,.96); box-shadow:0 8px 24px rgba(15,42,67,.12); }
@media (max-width:700px){.member-profile-hero .member-profile-edit-button{top:12px;right:12px}.sticky-edit-actions{bottom:6px} }

.member-profile-hero-actions{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap;align-self:end}.button-card-generate{background:#a60043;color:#fff;border-color:#a60043}.button-card-generate:hover{background:#860013}.candidate-card-modal[hidden]{display:none}.candidate-card-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px}.candidate-card-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62)}.candidate-card-modal-dialog{position:relative;width:min(420px,100%);background:#fff;border-radius:8px;box-shadow:0 18px 55px rgba(0,0,0,.35);overflow:hidden}.candidate-card-modal-dialog header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid #ddd}.candidate-card-modal-dialog header h2{font-size:18px;margin:0}.candidate-card-modal-dialog header button{border:0;background:transparent;font-size:24px;cursor:pointer}.candidate-card-modal-dialog form{padding:18px;display:grid;gap:10px}.candidate-card-modal-dialog input[type=date]{width:100%;padding:10px;border:1px solid #9aa7b1;border-radius:5px}.candidate-card-modal-dialog small{color:#667}.candidate-card-modal-actions{display:flex;gap:10px;margin-top:8px}
@media(max-width:680px){.member-profile-hero-actions{width:100%;margin-left:0}.member-profile-hero-actions .button{flex:1;text-align:center}}

.generated-card-pdf-preview {
    display: block;
    width: 100%;
    min-height: 420px;
    border: 1px solid #d7e0e7;
    border-radius: 8px;
    background: #fff;
}


/* Kartu hasil generate tampil sebagai panel khusus di bawah header profil. */
.generated-card-showcase{margin:-8px 0 24px;padding:12px;overflow:hidden;background:#fff;border:1px solid #d9e3df;border-radius:14px;box-shadow:0 8px 24px rgba(22,52,72,.08)}
.generated-card-showcase-preview{display:flex;align-items:center;justify-content:center;min-height:0;padding:0;background:#f8faf9;border:1px solid #d8e2de;border-radius:9px 9px 0 0}
.generated-card-showcase-preview>a{display:flex;align-items:center;justify-content:center;width:100%;padding:10px;text-align:center}
.generated-card-showcase-preview img{display:block;width:auto;max-width:680px;max-height:430px;height:auto;border:1px solid #c9d5d0;border-radius:6px;background:#fff;object-fit:contain}
.generated-card-showcase-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 18px 2px;background:#fff}
.generated-card-showcase-actions .button:first-child{justify-self:start}
.generated-card-showcase-actions .button:last-child{justify-self:end}
.generated-card-showcase .generated-card-pdf-preview{width:100%;height:430px;border:0}
@media(max-width:700px){.generated-card-showcase{margin-top:-6px;padding:8px}.generated-card-showcase-preview>a{padding:6px}.generated-card-showcase-preview img{max-width:100%;max-height:none}.generated-card-showcase-actions{grid-template-columns:1fr 1fr;padding:10px 4px 2px}.generated-card-showcase-actions .button{font-size:12px;padding:9px 12px}}
/* Admin member management refresh */
.admin-page-head.member-manage-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:18px}.member-admin-summary{display:grid;grid-template-columns:auto minmax(180px,1fr) auto;align-items:center;gap:14px;padding:16px 18px;margin-bottom:18px;border:1px solid #cbd9df;border-radius:14px;background:linear-gradient(135deg,#fff,#f2f8f6);box-shadow:0 8px 24px rgba(15,47,71,.07)}.member-admin-avatar{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#17324d;color:#fff;font-size:22px;font-weight:900}.member-admin-summary>div:nth-child(2){display:grid;gap:3px}.member-admin-summary>div:nth-child(2) strong{font-size:20px;color:#102f49}.member-admin-summary>div:nth-child(2) span{color:#607180}.member-admin-summary dl{display:flex;gap:22px;margin:0}.member-admin-summary dl div{display:grid;gap:2px}.member-admin-summary dt{font-size:11px;text-transform:uppercase;color:#7a8995}.member-admin-summary dd{margin:0;font-weight:700;color:#263f50}.member-manage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}.manage-card{padding:0;overflow:hidden;border:1px solid #cfdae0;border-radius:14px;background:#fff;box-shadow:0 7px 20px rgba(15,47,71,.06)}.manage-card-wide{grid-column:1/-1}.manage-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid #e3ebee;background:#f7faf9}.manage-card>header>div{display:flex;align-items:center;gap:10px}.manage-card h2{margin:0;font-size:17px;color:#15364b}.manage-card header p{margin:4px 0 0;color:#687985;font-size:12px}.manage-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#fff0e7;color:#f26b21}.manage-form{display:grid;gap:13px;padding:18px}.grid-form-3{grid-template-columns:repeat(3,minmax(0,1fr))}.manage-form label>span{display:block;margin-bottom:6px;color:#314b5c;font-size:12px;font-weight:800}.manage-form input,.manage-form select{width:100%;min-height:42px;padding:9px 11px;border:1px solid #bfccd3;border-radius:8px;background:#fff;font:inherit}.manage-form input:focus,.manage-form select:focus{border-color:#f26b21;outline:3px solid rgba(242,107,33,.12)}.span-all{grid-column:1/-1}.field-help{margin:-4px 0 0;color:#71808b;font-size:12px}.role-check-grid{display:grid;gap:9px}.role-choice{display:flex!important;align-items:flex-start;gap:10px;padding:11px;border:1px solid #d8e2e6;border-radius:9px;background:#fbfdfc}.role-choice input{width:auto!important;min-height:auto!important;margin-top:3px}.role-choice span{display:grid!important;gap:2px;margin:0!important}.role-choice small{color:#6c7b85;line-height:1.35}.official-data-card{margin-top:0}.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;padding:8px 18px 18px}.detail-grid div{padding:12px 8px;border-bottom:1px solid #edf1f3}.detail-grid dt{font-size:11px;text-transform:uppercase;color:#71818d}.detail-grid dd{margin:4px 0 0;color:#18374b;font-weight:700}.empty-inline{padding:20px;color:#677986}.button-danger{background:#b42318;color:#fff;border-color:#b42318}.button-danger:hover{background:#940308}
/* cleaner member list */
.legacy-member-toolbar{padding:14px!important;border:1px solid  #95abb6!important;border-radius:4px!important;background: #a2d4e7 !important;box-shadow:0 5px 16px rgba(15,47,71,.05)}.legacy-member-row{min-height:145px!important;padding:15px 13px 15px 13px;border:1px solid #d1dce1!important; border-radius:4px!important;box-shadow:0 5px 16px rgba(15,47,71,.055)!important}.legacy-member-photo{border-radius:4px!important}.member-action-trigger{border:1px solid #d5e0e5!important;background:#fff!important;box-shadow:0 3px 9px rgba(15,47,71,.08)}
@media(max-width:900px){.grid-form-3{grid-template-columns:1fr 1fr}.member-admin-summary{grid-template-columns:auto 1fr}.member-admin-summary dl{grid-column:1/-1}.detail-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.admin-page-head.member-manage-head{align-items:stretch;flex-direction:column}.member-manage-grid{grid-template-columns:1fr}.manage-card-wide{grid-column:auto}.grid-form-3,.detail-grid{grid-template-columns:1fr}.member-admin-summary{grid-template-columns:auto 1fr}.member-admin-summary dl{display:grid;grid-template-columns:1fr 1fr;gap:10px}.manage-card>header{align-items:stretch;flex-direction:column}}

.site-identity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.site-media-card{border:1px solid #d8e1e7;border-radius:14px;padding:18px;background:#f9fbfc}.site-media-card h3{margin:0 0 6px}.site-media-card p{margin:0 0 14px;color:#617181;font-size:.92rem}.site-media-preview{min-height:110px;display:flex;align-items:center;justify-content:center;border:1px dashed #b8c7d1;border-radius:12px;background:#fff;padding:14px;margin-bottom:12px}.site-media-preview img{display:block;max-width:100%;max-height:100px;object-fit:contain}.site-media-preview.is-icon img{width:72px;height:72px}.danger-check{display:block;color:#a33232;margin-bottom:12px}.brand-logo-image{width:46px;height:46px;object-fit:contain;flex:0 0 auto}.admin-brand-logo{max-width:150px;max-height:58px;display:block;object-fit:contain;margin-bottom:8px}@media(max-width:760px){.site-identity-grid{grid-template-columns:1fr}}

/* Patch 2026-07-19: sidebar tetap, formulir admin dan preview pengaturan */
@media (min-width: 961px) {
  .admin-body { overflow: hidden; }
  .admin-shell { height: 100vh; min-height: 0; }
  .admin-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; box-sizing: border-box; }
  .admin-content { height: 100vh; overflow-y: auto; box-sizing: border-box; }
}
.admin-account-create .admin-type-panel{display:grid;gap:1rem;padding:1rem;border:1px solid #d9e4e0;border-radius:12px;background:#f8fbfa}
.admin-member-type-grid{margin-bottom:.25rem}.admin-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.admin-photo-grid .crop-upload-group{padding:1rem;border:1px solid #d8e2e7;border-radius:12px;background:#f8fafb}.admin-photo-grid .crop-result-preview img{max-height:320px;object-fit:contain;border-radius:8px}.image-crop-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px}.image-crop-modal[hidden]{display:none}.image-crop-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.68)}.image-crop-dialog{position:relative;width:min(680px,96vw);max-height:94vh;overflow:auto;background:#fff;border-radius:14px;padding:18px;display:grid;gap:14px}.image-crop-dialog header{display:flex;justify-content:space-between;align-items:center}.image-crop-dialog header button{border:0;background:none;font-size:28px}.image-crop-canvas-wrap{display:grid;place-items:center;background:#18201d;padding:12px;border-radius:10px;overflow:auto}.image-crop-canvas-wrap canvas{max-width:100%;height:auto;touch-action:none}.site-settings-preview{position:relative;display:grid;gap:14px;padding:20px;border:1px solid #cfe0da;border-radius:14px;background:linear-gradient(135deg,#fff,#eef8f4); display:none;}.site-settings-preview-brand{display:flex;align-items:center;gap:14px}.site-settings-preview-brand img{width:72px;height:72px;object-fit:contain}.site-settings-preview-brand div{display:grid}.site-settings-preview-brand strong{font-size:1.35rem}.site-settings-preview-brand span{color:#e45c1a;font-size:.85rem;letter-spacing:.08em}.site-settings-preview p{margin:0;color:#52635d}.site-settings-preview-icon{position:absolute;right:18px;top:18px;display:grid;justify-items:center;gap:4px}.site-settings-preview-icon img{width:42px;height:42px;object-fit:contain}.privacy-matrix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.privacy-matrix>section{padding:1rem;border:1px solid #d8e3df;border-radius:12px;background:#fafcfb}.privacy-matrix h3{margin-top:0}
@media(max-width:760px){.admin-photo-grid,.privacy-matrix{grid-template-columns:1fr}.site-settings-preview-icon{position:static;justify-self:start}}

/* Menu aksi anggota tetap berupa dropdown balok ringkas pada mobile. */
@media (max-width: 640px) {
	.legacy-member-row{
		padding:5px 13px 5px 13px!important;
	}
  .member-action-menu {
    position: absolute !important;
    top: 38px !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: min(82vw, 260px) !important;
    max-height: 65vh;
    overflow: auto;
    border-radius: 6px !important;
  }
  .member-action-menu a,
  .member-action-menu button {
    width: auto;
    min-width: 0 !important;
    white-space: nowrap;
    text-align: left;
  }
}

/* 2026-07-20: pulihkan ukuran header dan jadikan menu aksi mobile dropdown balok ringkas */
.site-header .nav-wrapper{
  min-height:72px !important;
  height:auto !important;
  padding-inline:8px;
}
.site-header .brand{
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  min-width:0;
}
.site-header .brand-logo-image{
  display:block !important;
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  max-width:46px !important;
  max-height:46px !important;
  object-fit:contain !important;
}
.site-header .brand-copy strong{font-size:23px;line-height:1.05 !important}
.site-header .brand-copy small{font-size:12px;line-height:1.1 !important}
.site-header .main-nav{align-items:center}
.site-header .nav-user{
  display:inline-flex !important;
  align-items:center !important;
  min-width:0;
}
.site-header .nav-user .nav-avatar{
  display:inline-grid !important;
  place-items:center !important;
  flex:0 0 25px !important;
  width:25px !important;
  height:25px !important;
  min-width:25px !important;
  max-width:25px !important;
  min-height:25px !important;
  max-height:25px !important;
  margin-right:7px !important;
  overflow:hidden !important;
  border-radius:50% !important;
}
.site-header .nav-user .nav-avatar img{
  display:block !important;
  width:25px !important;
  height:25px !important;
  min-width:25px !important;
  max-width:25px !important;
  min-height:25px !important;
  max-height:25px !important;
  object-fit:cover !important;
  border-radius:50% !important;
}

.profile-details input,
.profile-details select {
    width: 100%;
    height: 34px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid #c5d3e2;
    border-radius: 5px;
    font: inherit;
}

@media (max-width:900px){
  .site-header .nav-wrapper {
    min-height: 54px !important;
    align-items: center !important;
  }
  .site-header .brand-logo-image{
    width:42px !important;height:42px !important;
    min-width:42px !important;max-width:42px !important;max-height:42px !important;
  }
  .site-header .brand-copy strong{font-size:16px !important}
  .site-header .main-nav{
    align-items:stretch !important;
    max-height:calc(100vh - 88px);
    overflow-y:auto;
  }
  .site-header .nav-user{width:100% !important}
}

@media (max-width:640px){
  /* Mengalahkan aturan lama yang menjadikan menu seperti bottom sheet. */
  .member-action-wrap.is-open .member-action-menu,
  .member-action-menu{
    position:absolute !important;
    z-index:10005 !important;
    top:38px !important;
    right:0 !important;
    bottom:auto !important;
    left:auto !important;
    display:block !important;
    width:max-content !important;
    min-width:0 !important;
    max-width:min(82vw,260px) !important;
    max-height:65vh !important;
    padding:5px 0 !important;
    overflow:auto !important;
    border:1px solid #c4d0d7 !important;
    border-radius:6px !important;
    background:#eef4f7 !important;
    box-shadow:0 12px 30px rgba(15,23,42,.22) !important;
  }
  .member-action-wrap.is-open .member-action-menu a,
  .member-action-wrap.is-open .member-action-menu button,
  .member-action-menu a,
  .member-action-menu button{
    display:block !important;
    width:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:9px 13px !important;
    white-space:nowrap !important;
    text-align:left !important;
    font-size:13px !important;
    line-height:1.25 !important;
  }
  .member-action-wrap.is-open .member-action-menu form,
  .member-action-menu form{display:block !important;width:auto !important;margin:0 !important}
  .action-menu-backdrop{background:transparent !important}
}

/* FIX: menu aksi anggota harus tertutup sampai tombol roda gigi diklik. */
.member-action-menu[hidden],
.member-action-wrap:not(.is-open) > .member-action-menu{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.member-action-wrap.is-open > .member-action-menu:not([hidden]){
  visibility:visible !important;
  pointer-events:auto !important;
}

/* Login dan bantuan lupa password via WhatsApp */
.login-card{max-width:560px}.login-heading{margin-bottom:22px}.login-form{display:grid;gap:16px}.password-input-wrap{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:8px}.password-input-wrap input{min-width:0}.password-toggle{border:1px solid #c7d3df;border-radius:9px;background:#fff;color:var(--navy);font-size:18px;cursor:pointer}.password-toggle:hover{background:#f3f7fa}.login-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center}.password-help-line{margin:0;color:#6b7b8b;font-size:13px}.password-help-link{padding:0;border:0;background:transparent;color:var(--orange-dark);text-decoration:underline;cursor:pointer;font:inherit}.password-help-modal[hidden]{display:none!important}.password-help-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:20px;background:rgba(8,27,43,.58)}.password-help-card{position:relative;width:min(100%,460px);padding:28px;border-radius:16px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.28)}.password-help-card h2{margin:4px 0 8px}.password-help-card>p:not(.eyebrow):not(.form-error-text){color:#5f7080;line-height:1.55}.password-help-card label{display:block;margin:18px 0 7px;font-weight:700}.password-help-card input{width:100%; padding:8px}.modal-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;border-radius:50%;background:#edf2f6;color:var(--navy);font-size:22px;cursor:pointer}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.form-error-text{margin:6px 0 0;color:#b42318;font-size:13px}.modal-open{overflow:hidden}
@media(max-width:560px){.login-actions{align-items:stretch}.login-actions .button{width:100%;text-align:center}.password-help-card{padding:24px 18px}}

/* Login: opsi sesi tetap masuk */
.remember-me-row {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    width: fit-content;
    margin: .1rem 0 .9rem;
    font-weight: 600;
    cursor: pointer;
}
.remember-me-row input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary, #087f5b);
}


/* Patch 2026-07-21: direktori sebagai beranda, filter mobile inline, kelola akun */
.self-account-card{margin-top:18px}.self-account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:18px}.self-account-grid h3{margin:0 0 12px}.member-action-menu .action-danger{color:#b42318!important;font-weight:800!important}
@media(max-width:700px){
  .public-member-toolbar,.legacy-member-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
  .public-member-toolbar>label:not(.legacy-search-field),.legacy-member-toolbar>label:not(.legacy-search-field){min-width:0}
  .public-member-toolbar label span,.legacy-member-toolbar label span{font-size:10px}
  .public-member-toolbar select,.legacy-member-toolbar select{min-width:0;width:100%;padding-left:5px;padding-right:18px;font-size:10px}
  .public-member-toolbar .legacy-search-field,.legacy-member-toolbar .legacy-search-field{grid-column:1/-1!important}
  .self-account-grid{grid-template-columns:1fr;padding:12px}
}
@media(max-width:420px){
  .site-header .brand-copy strong {font-size: 11px !important}
  .site-header .brand-copy small {font-size: 6px !important}
  .public-member-toolbar,.legacy-member-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .public-member-toolbar .legacy-search-field,.legacy-member-toolbar .legacy-search-field{grid-column:1/-1!important}
}

/* Patch 2026-07-21c: dropdown akun di navbar dan halaman kelola akun. */
.nav-account{position:relative;display:flex;align-items:center}
.nav-account .nav-user{border:0;background:transparent;font:inherit;cursor:pointer}
.nav-account-caret{margin-left:3px;font-size:10px;transition:transform .16s ease}
.nav-account.is-open .nav-account-caret{transform:rotate(180deg)}
.nav-account-menu{position:absolute;z-index:11000;top:calc(100% + 8px);right:0;width:178px;padding:6px;border:1px solid #d3dee4;border-radius:10px;background:#fff;box-shadow:0 14px 34px rgba(15,23,42,.2)}
.nav-account-menu[hidden]{display:none!important}
.nav-account-menu a,.nav-account-menu button{display:block;width:100%;padding:10px 12px;border:0;border-radius:7px;background:transparent;color:#17354a;text-align:left;text-decoration:none;font:inherit;cursor:pointer}
.nav-account-menu a:hover,.nav-account-menu button:hover{background:#fff5ee;color:#f26b21}
.nav-account-menu form{margin:0}
.account-page{max-width:980px;margin:0 auto}.account-page-heading{margin-bottom:18px}.account-page-heading p:last-child{color:#657684}.account-manage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.account-manage-card{overflow:hidden}.account-manage-card .manage-form{padding:18px}
@media(max-width:900px){.nav-account{display:block;width:100%}.nav-account .nav-user{justify-content:flex-start;width:100%!important}.nav-account-menu{position:static;width:100%;margin:4px 0 0;box-shadow:none}.account-manage-grid{grid-template-columns:1fr}}

/* Patch 2026-07-21d: dropdown akun stabil dan terukur. */
.site-header .nav-account{position:relative!important;align-self:stretch;display:flex!important;align-items:center!important}
.site-header .nav-account::after{content:"";position:absolute;z-index:10999;top:100%;right:0;width:210px;height:12px;pointer-events:auto}
.site-header .nav-account-menu{top:100%!important;right:0!important;margin-top:6px!important;width:190px!important;min-width:190px!important;max-width:calc(100vw - 24px)!important;padding:7px!important;overflow:visible!important}
.site-header .nav-account-menu a,.site-header .nav-account-menu button{font-size:14px!important;line-height:1.25!important;white-space:nowrap!important}
.site-header .nav-account .nav-user{height:auto!important;min-height:38px!important;padding:6px 8px!important;overflow:visible!important}
.site-header .nav-account .nav-avatar,.site-header .nav-account .nav-avatar img{width:28px!important;height:28px!important;min-width:28px!important;max-width:28px!important;min-height:28px!important;max-height:28px!important;object-fit:cover!important}
@media(max-width:900px){
 .site-header .nav-account{display:block!important;align-self:auto}
 .site-header .nav-account::after{display:none}
 .site-header .nav-account-menu{position:relative!important;top:auto!important;right:auto!important;margin:4px 0 0!important;width:100%!important;min-width:0!important;max-width:none!important}
}

/* Kelola akun terpadu + Permission User */
.account-manage-grid-wide{grid-template-columns:minmax(0,2fr) minmax(280px,1fr);align-items:start}
.account-profile-card{min-width:0}.account-metadata-form input[readonly]{background:#eef2f4;color:#60717d;cursor:not-allowed}.permission-na{color:#9aa7af}.user-permission-table th:not(:first-child),.user-permission-table td:not(:first-child){text-align:center;min-width:150px}
@media(max-width:900px){.account-manage-grid-wide{grid-template-columns:1fr}.user-permission-table th:not(:first-child),.user-permission-table td:not(:first-child){min-width:120px}}

/* Account page layout repair: metadata + password on top, documents full-width below. */
.account-page{max-width:1180px}
.account-manage-grid-wide{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(320px,1fr);
  gap:18px;
  align-items:start;
}
.account-manage-grid-wide>.account-profile-card{grid-column:1;grid-row:1}
.account-manage-grid-wide>.account-documents-card{grid-column:1/-1;grid-row:2}
.account-manage-grid-wide>.account-manage-card:last-child{grid-column:2;grid-row:1}
.account-documents-card .member-edit-document-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}
.account-documents-card .member-document-item{min-width:0}
.account-documents-card .member-document-item img{
  display:block;
  width:100%;
  max-width:280px;
  height:210px;
  margin:0 auto 12px;
  object-fit:contain;
}
.account-documents-card input[type=file]{display:block;width:100%;max-width:100%;overflow:hidden}
.account-documents-card .button{white-space:normal}
@media(max-width:900px){
  .account-page{max-width:100%}
  .account-manage-grid-wide{grid-template-columns:1fr}
  .account-manage-grid-wide>.account-profile-card,
  .account-manage-grid-wide>.account-documents-card,
  .account-manage-grid-wide>.account-manage-card:last-child{grid-column:1;grid-row:auto}
  .account-manage-grid-wide>.account-documents-card{order:2}
  .account-manage-grid-wide>.account-manage-card:last-child{order:3}
}
@media(max-width:560px){
  .account-documents-card .member-edit-document-grid{grid-template-columns:1fr}
  .account-manage-card .manage-form{padding:14px}
}

/* Permission Role: tambah role */
.permission-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.role-create-card{margin-bottom:1rem;padding:1rem}
.role-create-card[hidden]{display:none!important}
.role-create-card label{display:grid;gap:.4rem;font-weight:700}
.role-create-card input{width:100%;padding:.75rem .85rem;border:1px solid #d8e0e8;border-radius:8px;background:#fff;font:inherit}
.role-create-actions{display:flex;gap:.65rem;margin-top:1rem}
@media(max-width:760px){.permission-page-head{align-items:stretch;flex-direction:column}.permission-page-head>.button{align-self:flex-start}}

/* Patch 2026-07-21: popup dokumen/kartu dan nav-toggle admin mobile */
.document-image-popup,
.generated-card-popup-button{
    display:block;
    width:100%;
    padding:0;
    border:0;
    background:transparent;
    cursor:zoom-in;
    text-align:center;
	padding: 10px 0 10px;
}
.document-image-popup img,
.generated-card-popup-button img{pointer-events:none}
.generated-card-popup-button{height:100%}
.generated-card-popup-button img{display:block;max-width:100%;margin:auto;object-fit:contain}
.admin-sidebar-head{display:block}
.admin-sidebar-menu{display:flex;flex:1;min-height:0;flex-direction:column}
.admin-nav-toggle{display:none}
@media (max-width:960px){
    .admin-shell{display:block}
    .admin-sidebar{
        position:relative!important;
        width:auto!important;
        height:auto!important;
        min-height:0;
        padding:10px 14px!important;
        display:block!important;
        overflow:visible!important;
    }
    .admin-sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
    .admin-sidebar .brand{min-width:0;display:flex;align-items:center;gap:9px}
    .admin-sidebar .brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .admin-brand-logo{width:42px!important;height:42px!important;margin:0!important;flex:0 0 42px}
    .admin-nav-toggle{display:grid;place-content:center;gap:5px;flex:0 0 44px;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.45);border-radius:9px;background:rgba(255,255,255,.12);cursor:pointer}
    .admin-nav-toggle span{display:block;width:22px;height:2px;border-radius:99px;background:#fff;transition:transform .18s ease,opacity .18s ease}
    .admin-sidebar.is-menu-open .admin-nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .admin-sidebar.is-menu-open .admin-nav-toggle span:nth-child(2){opacity:0}
    .admin-sidebar.is-menu-open .admin-nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    .admin-sidebar-menu{display:none;padding-top:12px}
    .admin-sidebar.is-menu-open .admin-sidebar-menu{display:flex}
    .admin-sidebar-caption{display:block!important;margin:0 0 8px!important}
    .admin-nav{display:grid!important;grid-auto-flow:row!important;overflow:visible!important;gap:4px!important}
    .admin-nav-link{display:block}
    .admin-sidebar-footer{display:grid!important;margin-top:12px!important;padding-top:12px!important;border-top:1px solid rgba(255,255,255,.22)!important}
    .admin-content{height:auto!important;overflow:visible!important;padding:20px 12px!important}
}

/* Utility classes (replaces scattered inline style="" attributes in views) */
.input-uppercase {
    text-transform: uppercase;
}

.radio-hidden {
    display: none;
}

.field-hidden {
    display: none;
}

/* Pengaturan dan tombol export Excel */
.button-export-excel {
    align-self: end;
    white-space: nowrap;
    background: #217346;
    border-color: #217346;
    color: #fff;
}
.button-export-excel:hover { background: #185c37; border-color: #185c37; color: #fff; }
.export-column-groups { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 16px; }
.export-column-group { margin: 0; padding: 14px 16px; border: 1px solid #d7e0e8; border-radius: 12px; background: #fff; }
.export-column-group legend { padding: 0 7px; font-weight: 800; color: #17324a; }
.export-option-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 10px 18px; margin-top: 20px; }
.export-settings-form .check-row { display: flex; align-items: center; gap: 9px; margin: 8px 0; cursor: pointer; }
.export-settings-form .check-row input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; }
.export-settings-form input[type="color"] { width: 100%; min-height: 42px; padding: 4px; }
@media (max-width: 720px) {
    .public-member-toolbar .button-export-excel { width: 100%; text-align: center; }
}

/* Export template presets */
.export-page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}.export-page-heading h1{margin:.2rem 0}.export-template-card{padding:0;overflow:hidden}.export-template-table{width:100%}.table-subtext{display:block;margin-top:4px;color:var(--muted,#667085);font-size:.82rem;font-weight:400}.table-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.table-actions form{margin:0}.button-small{min-height:34px;padding:7px 12px;font-size:.86rem}.button-danger{background:#fff;color:#b42318;border:1px solid #f0b4ae}.button-danger:hover{background:#fff1f0}.empty-state{text-align:center;padding:56px 24px}.empty-state h2{margin-top:0}.export-settings-grid{display:grid;gap:20px}.settings-section{padding:24px}.settings-section>h2,.section-heading-inline h2{margin-top:0}.section-heading-inline{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.section-heading-inline>div:last-child{display:flex;gap:8px;flex-wrap:wrap}.export-column-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.export-column-groups fieldset{border:1px solid #e4e7ec;border-radius:12px;padding:14px}.export-column-groups legend{padding:0 8px;font-weight:700}.check-row{display:flex;align-items:flex-start;gap:9px;margin:8px 0;cursor:pointer}.check-row input{flex:0 0 auto;margin-top:3px}.check-row span{line-height:1.35}.export-option-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 18px;margin-top:18px}.sticky-form-actions{position:sticky;bottom:0;z-index:5;display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding:14px 0;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 25%)}.back-link{display:inline-block;margin-bottom:8px}.field-help{margin-bottom:0;color:#667085;font-size:.9rem}
@media(max-width:900px){.export-column-groups{grid-template-columns:repeat(2,minmax(0,1fr))}.export-option-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.export-page-heading,.section-heading-inline{align-items:stretch;flex-direction:column}.export-page-heading>.button{width:100%}.export-column-groups,.export-option-grid{grid-template-columns:1fr}.export-template-card{background:transparent;box-shadow:none}.export-template-table thead{display:none}.export-template-table,.export-template-table tbody,.export-template-table tr,.export-template-table td{display:block;width:100%}.export-template-table tr{background:#fff;border:1px solid #e4e7ec;border-radius:14px;margin-bottom:12px;padding:14px}.export-template-table td{border:0;padding:6px 0}.export-template-table td:before{content:attr(data-label);display:block;color:#667085;font-size:.75rem;text-transform:uppercase;font-weight:700;margin-bottom:2px}.table-actions{margin-top:8px}.table-actions .button,.table-actions form,.table-actions form button{flex:1}.table-actions form button{width:100%}}

/* Export templates UI refinement */
.export-page-heading{max-width:1180px;margin:0 auto 24px;padding:24px 0 0;align-items:center}
.export-page-heading h1{font-size:clamp(1.8rem,3vw,2.45rem);line-height:1.1;color:#102f49}
.export-page-heading p{max-width:820px;font-size:1rem;line-height:1.6;color:#475467}
.export-form-heading{padding-top:10px;align-items:flex-start}
.export-form-heading .back-link{color:#334155;font-size:.9rem;text-decoration:none}
.export-template-form{max-width:1180px;margin:0 auto;padding-bottom:24px}
.export-settings-grid{gap:22px}
.export-template-form .settings-section{padding:26px;border:1px solid #dce4ec;border-radius:16px;box-shadow:0 5px 18px rgba(16,47,73,.055)}
.settings-section-title{display:flex;align-items:flex-start;gap:13px;margin-bottom:20px}
.settings-section-title>span{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:#fff1e8;color:#f56619;font-weight:800}
.settings-section-title h2{margin:0;color:#123653;font-size:1.25rem}
.settings-section-title p{margin:4px 0 0;color:#667085;font-size:.91rem}
.export-form-grid{gap:18px 22px}
.export-template-form .field{display:flex;flex-direction:column;gap:7px;min-width:0}
.export-template-form .field>span{font-size:.88rem;font-weight:700;color:#344054}
.export-template-form input:not([type=checkbox]):not([type=color]),.export-template-form select,.export-template-form textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid #cfd8e3;border-radius:9px;background:#fff;font:inherit;color:#162b3c}
.export-template-form textarea{min-height:86px;resize:vertical}
.export-template-form input:focus,.export-template-form select:focus,.export-template-form textarea:focus{outline:0;border-color:#f56619;box-shadow:0 0 0 3px rgba(245,102,25,.13)}
.export-template-form input[type=color]{width:100%;height:44px;padding:4px;border:1px solid #cfd8e3;border-radius:9px;background:#fff}
.notice-soft{padding:10px 13px;border-radius:9px;background:#f8fafc;border-left:3px solid #f56619}
.section-tools{display:flex;gap:8px;flex-wrap:wrap}
.export-column-groups fieldset{background:#fbfcfd;border-color:#dce4ec;padding:16px;border-radius:13px}
.export-column-groups legend{color:#123653}
.export-template-form .check-row{padding:3px 0;align-items:center}
.export-template-form .check-row input[type=checkbox]{width:17px;height:17px;margin:0}
.custom-columns-box{margin-top:22px;padding:18px;border:1px dashed #c7d2df;border-radius:13px;background:#f8fafc}
.custom-columns-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}
.custom-columns-head h3{margin:0;color:#123653;font-size:1.05rem}
.custom-columns-head p{margin:4px 0 0;color:#667085;font-size:.88rem}
.custom-columns-list{display:grid;gap:10px}
.custom-column-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;padding:11px;background:#fff;border:1px solid #e1e7ee;border-radius:10px}
.custom-column-row .field,.admin-custom-columns .custom-column-row label{margin:0}
.custom-column-row .button{margin-bottom:1px}
.sticky-form-actions{max-width:1180px;margin:20px auto 0;padding:16px 0 10px;border-top:1px solid #e5e7eb;background:rgba(255,255,255,.96);backdrop-filter:blur(7px)}

.export-template-card{max-width:1180px;margin:0 auto;border:1px solid #dbe3eb;border-radius:16px;box-shadow:0 6px 20px rgba(16,47,73,.06)}
.export-template-table{border-collapse:separate;border-spacing:0}
.export-template-table thead th{padding:15px 16px;background:#173f5f;color:#fff;border:0;font-size:.9rem;letter-spacing:.01em;white-space:nowrap}
.export-template-table thead th:first-child{border-radius:14px 0 0 0}
.export-template-table thead th:last-child{border-radius:0 14px 0 0}
.export-template-table tbody td{padding:16px;border-bottom:1px solid #e6ebf0;vertical-align:middle;color:#243b4d}
.export-template-table tbody tr:last-child td{border-bottom:0}
.export-template-table tbody tr:hover td{background:#fbfdff}
.export-template-table .col-number{width:82px;text-align:center}
.export-template-table .col-action{width:255px;text-align:center}
.export-template-table .cell-number{text-align:center}
.export-template-table .cell-number span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#edf4f8;color:#173f5f;font-weight:800}
.template-name{display:block;color:#102f49;font-size:1rem}
.filter-summary-pill{display:inline-block;padding:6px 9px;border-radius:8px;background:#f2f6f9;color:#36566f;font-size:.88rem}
.export-template-table .table-actions{justify-content:center;flex-wrap:nowrap}

.admin-custom-columns{margin-top:20px}
.admin-custom-columns .custom-column-row label{display:flex;flex-direction:column;gap:6px}
.admin-custom-columns .custom-column-row label>span{font-weight:700;color:#344054;font-size:.88rem}
.admin-custom-columns .custom-column-row input{width:100%}

@media(max-width:900px){
 .export-page-heading,.export-template-form,.export-template-card{max-width:calc(100% - 28px)}
 .export-column-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
 .export-template-table .table-actions{flex-wrap:wrap}
}
@media(max-width:640px){
 .export-page-heading{padding-top:15px}.export-template-form .settings-section{padding:18px}
 .export-column-groups{grid-template-columns:1fr}.custom-columns-head{align-items:stretch;flex-direction:column}.custom-column-row{grid-template-columns:1fr}.custom-column-row .button{width:100%}
 .sticky-form-actions{max-width:100%;padding:12px 14px;display:grid;grid-template-columns:1fr 1fr}.sticky-form-actions .button:last-child{grid-column:1/-1}
 .export-template-table .table-actions{justify-content:stretch}.export-template-table .table-actions>*{flex:1}
}
@media(max-width:740px){
.generated-card-popup-button{padding:0}
}
/* Export multi-filter dan pengurutan kolom */
.export-template-form select[multiple] { min-height: 9rem; padding: .55rem; }
.export-template-form select[multiple] option { padding: .45rem .55rem; border-radius: .35rem; }
.column-order-box { margin-top: 1.25rem; padding: 1rem; border: 1px solid #d9e2ec; border-radius: 12px; background: #f8fafc; }
.column-order-list { display: grid; gap: .45rem; margin-top: .8rem; }
.column-order-item { display: grid; grid-template-columns: 2rem minmax(0,1fr) auto; align-items: center; gap: .65rem; padding: .55rem .65rem; border: 1px solid #d5dee8; border-radius: 9px; background: #fff; cursor: grab; }
.column-order-item.is-dragging { opacity: .5; }
.column-order-item .drag-handle { font-size: 1.1rem; text-align: center; color: #64748b; }
.column-order-item > div { display: flex; gap: .35rem; }
.column-order-item .button { min-width: 2rem; padding-inline: .55rem; }
.admin-column-order { margin-bottom: 1rem; }
@media (max-width: 640px) {
  .column-order-item { grid-template-columns: 1.5rem minmax(0,1fr) auto; }
}


/* Export logo upload */
.export-logo-upload{margin-top:18px;padding:16px;border:1px dashed #c8d6e3;border-radius:12px;background:#f8fbfd;display:grid;gap:14px}.export-logo-upload input[type=file]{width:100%;padding:10px;border:1px solid #d4dee7;border-radius:8px;background:#fff}.export-logo-preview{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.export-logo-preview img{max-width:180px;max-height:90px;object-fit:contain;padding:8px;border:1px solid #d8e1e8;border-radius:10px;background:#fff}.admin-export-logo-upload>label{display:grid;gap:7px}.admin-export-logo-upload small{color:#667788}


/* Floating kembali ke header */
.floating-to-header{
  position:fixed!important;
  right:22px!important;
  bottom:24px!important;
  z-index:2147483000!important;
  display:grid!important;
  place-items:center!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:#f26b21!important;
  color:#fff!important;
  box-shadow:0 10px 28px rgba(0,0,0,.28)!important;
  font-size:27px!important;
  font-weight:800!important;
  line-height:1!important;
  text-decoration:none!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(14px) scale(.88);
  transition:opacity .28s ease,visibility .28s ease,transform .28s ease,filter .2s ease!important;
}
.floating-to-header[hidden]{display:none!important}
.floating-to-header.is-visible{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(0) scale(1)!important;
}
.floating-to-header:hover{color:#fff!important;filter:brightness(1.08);transform:translateY(-3px) scale(1.04)!important}
.floating-to-header:focus-visible{outline:3px solid rgba(242,107,33,.3)!important;outline-offset:3px!important}
@media(max-width:640px){.floating-to-header{right:14px!important;bottom:18px!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;font-size:24px!important}}
@media(prefers-reduced-motion:reduce){.floating-to-header{transition:none!important}}


/* Generate Kartu: modal CSS :target tanpa ketergantungan JavaScript */
.candidate-card-modal{display:none;position:fixed;inset:0;z-index:10000;place-items:center;padding:20px}
.candidate-card-modal:target{display:grid}
.candidate-card-modal-backdrop{position:absolute;inset:0;display:block;background:rgba(0,0,0,.62)}
.candidate-card-modal-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;font-size:26px;line-height:1;color:#173750;text-decoration:none}
.candidate-card-modal-close:hover{background:#eef3f6;color:#b0003a;text-decoration:none}
.candidate-card-modal-actions .button{text-align:center}

/* Header profil ringkas horizontal - final override */
.member-profile-hero{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:16px!important;
  min-height:124px!important;
  padding:18px 20px!important;
  margin-bottom:18px!important;
  border-radius:16px!important;
}
.member-profile-hero>.member-profile-avatar{
  width:88px!important;
  height:88px!important;
  min-width:88px!important;
  min-height:88px!important;
  flex-basis:88px!important;
}
.member-profile-hero>.member-profile-avatar .member-profile-photo-button{
  width:100%!important;
  height:100%!important;
}
.member-profile-hero>div:nth-child(2){
  min-width:0!important;
  align-self:center!important;
}
.member-profile-hero h1{
  margin:7px 0 2px!important;
  font-size:clamp(20px,3vw,30px)!important;
  line-height:1.08!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.member-profile-hero .badge{
  display:inline-flex!important;
  width:max-content!important;
}
.member-profile-hero .member-profile-identity{
  margin:0!important;
  line-height:1.2!important;
}
.member-profile-hero-actions{
  position:static!important;
  margin-left:0!important;
  width:auto!important;
  min-width:154px!important;
  align-self:stretch!important;
  display:grid!important;
  grid-template-rows:auto 1fr auto!important;
  justify-items:end!important;
  align-items:start!important;
  gap:8px!important;
}
.member-profile-hero-actions .member-profile-edit-button{
  position:static!important;
  grid-row:1!important;
  min-width:72px!important;
  padding:.55rem .9rem!important;
  text-align:center!important;
}
.member-profile-hero-actions .button-card-generate{
  grid-row:3!important;
  min-width:154px!important;
  padding:.72rem 1rem!important;
  text-align:center!important;
  white-space:nowrap!important;
}
@media(max-width:700px){
  .member-profile-hero{
    grid-template-columns:auto minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:11px!important;
    min-height:108px!important;
    padding:12px 13px!important;
  }
  .member-profile-hero>.member-profile-avatar{
    width:72px!important;
    height:72px!important;
    min-width:72px!important;
    min-height:72px!important;
    flex-basis:72px!important;
  }
  .member-profile-hero h1{
    margin:5px 0 1px!important;
    font-size:19px!important;
  }
  .member-profile-hero .badge{
    font-size:10px!important;
    padding:4px 9px!important;
  }
  .member-profile-hero .member-profile-identity{font-size:13px!important}
  .member-profile-hero-actions{
    width:auto!important;
    min-width:105px!important;
    gap:6px!important;
  }
  .member-profile-hero-actions .member-profile-edit-button{
    min-width:52px!important;
    padding:.42rem .6rem!important;
    font-size:12px!important;
  }
  .member-profile-hero-actions .button-card-generate{
    min-width:105px!important;
    padding:.58rem .62rem!important;
    font-size:11px!important;
  }
}
@media(max-width:430px){
  .member-profile-hero{gap:8px!important;padding:10px!important}
  .member-profile-hero>.member-profile-avatar{
    width:64px!important;height:64px!important;min-width:64px!important;min-height:64px!important;flex-basis:64px!important
  }
  .member-profile-hero h1{font-size:17px!important}
  .member-profile-hero-actions{min-width:91px!important}
  .member-profile-hero-actions .button-card-generate{min-width:91px!important;font-size:10px!important;padding:.52rem .45rem!important}
}

/* === Keuangan === */
.nav-finance-menu{position:relative;display:flex;align-items:center}
.nav-finance-main{padding-right:.35rem!important}
.nav-finance-toggle{border:0;background:transparent;color:inherit;padding:.4rem .35rem;cursor:pointer;font-size:.85rem}
.nav-finance-dropdown{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 16px 38px rgba(15,23,42,.16);padding:7px;z-index:1000}
.nav-finance-dropdown a{display:block!important;color:#334155!important;padding:10px 12px!important;border-radius:8px;white-space:nowrap}
.nav-finance-dropdown a:hover{background:#fff3e8;color:#c75212!important}
.nav-finance-menu:hover .nav-finance-dropdown,.nav-finance-menu.is-open .nav-finance-dropdown{display:block}
.finance-hero{padding:34px 0 18px;max-width:850px}.finance-hero h1,.finance-report-head h1{margin:.15rem 0 .45rem}.finance-lead{font-size:1.08rem;color:#64748b}
.finance-narrative{padding:24px;margin-bottom:22px;line-height:1.75}.finance-narrative p:last-child{margin-bottom:0}
.finance-source-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:35px}
.finance-source-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:24px;box-shadow:0 10px 30px rgba(15,23,42,.06);display:flex;flex-direction:column;gap:20px}
.finance-source-card>div:first-child{display:flex;gap:15px;align-items:flex-start}
.finance-source-card h2{margin:0 0 6px}
.finance-source-card p{margin:0;color:#64748b}
.finance-source-icon{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#f26b21,#ff9c5a);color:#fff;font-weight:800;font-size:1.2rem}
.finance-mini-summary{display:flex;gap:25px;margin:0;padding:14px;background:#f8fafc;border-radius:12px}
.finance-mini-summary dt{font-size:.78rem;color:#64748b}
.finance-mini-summary dd{margin:3px 0 0;font-weight:800}
.finance-source-card .button{align-self:flex-start}
.finance-report-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:28px 0 18px}
.finance-report-head p{margin:.2rem 0;color:#64748b}
.finance-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.finance-stat{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px;box-shadow:0 7px 20px rgba(15,23,42,.04)}
.finance-stat span{display:block;color:#64748b;font-size:.84rem;margin-bottom:7px}
.finance-stat strong{font-size:1.15rem}
.finance-stat.income{border-top:4px solid #16a34a}
.finance-stat.expense{border-top:4px solid #dc2626}
.finance-stat.balance{border-top:4px solid #2563eb}
.finance-filter{display:grid;grid-template-columns:repeat(3,minmax(145px,1fr)) minmax(220px,2fr);gap:12px;align-items:end;padding:18px;margin-bottom:18px}
.finance-filter label span{display:block;font-size:.8rem;font-weight:700;margin-bottom:6px}
.finance-filter input,.finance-filter select{width:100%; padding:7px}
.finance-filter.is-loading{opacity:.72}
#finance-live-results[aria-busy="true"]{opacity:.72;transition:opacity .15s ease}
.finance-filter-actions{display:flex;gap:8px}.finance-table-wrap{padding:0;overflow:auto}
.finance-table{width:100%;border-collapse:collapse;min-width:1000px}
.finance-table th{background:#1f4e78;color:#fff;text-align:left;padding:12px 11px;font-size:.82rem}
.finance-table td{padding:11px;border-bottom:1px solid #e5e7eb;vertical-align:top}
.finance-table tbody tr:nth-child(even){background:#f8fafc}
.finance-table .money{text-align:right;white-space:nowrap}
.finance-table .income{color:#15803d}
.finance-table .expense{color:#b91c1c}
.finance-proof-link{display:inline-block;margin-left:5px;font-weight:700}
.finance-pagination{display:flex;justify-content:center;gap:7px;margin:22px 0}
.finance-pagination a{display:grid;place-items:center;min-width:38px;height:38px;border:1px solid #dbe3ec;border-radius:9px;background:#fff;text-decoration:none}
.finance-pagination a.is-current{background:#f26b21;color:#fff;border-color:#f26b21}.field-full{grid-column:1/-1}
@media(max-width:900px){
	.finance-source-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.finance-summary-grid{margin-bottom:4px}
	.finance-filter{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:0}
	.finance-filter-actions{grid-column:1/-1}.nav-finance-menu{display:grid!important;grid-template-columns:1fr auto;width:100%}
	.nav-finance-dropdown{position:static;grid-column:1/-1;box-shadow:none;border:0;border-left:3px solid #f26b21;border-radius:0;margin-left:12px;padding-left:10px;background:transparent}
	.nav-finance-menu:hover .nav-finance-dropdown{display:none}
	.nav-finance-menu.is-open .nav-finance-dropdown{display:block}
	.finance-stat span{font-size:12px}
	.finance-stat strong{font-size:14px}
	.finance-filter-actions{display:none}
	.filter-tanggal{display:none}
}
@media(max-width:640px){
	.finance-source-grid{grid-template-columns:1fr}
	.finance-summary-grid{gap: 4px;}
	.finance-report-head{align-items:stretch;flex-direction:column}
	.finance-report-head .button{align-self:flex-start}
	.finance-table{min-width:0}
	.finance-table thead{display:none}
	.finance-table,.finance-table tbody,.finance-table tr,.finance-table td{display:block; width:100%}
	.finance-table tr{padding:12px;border-bottom:1px solid #e2e8f0}
	.finance-table td{border:0;padding:5px 6px 5px 45%;position:relative;text-align:left!important}
	.finance-table td:before{content:attr(data-label);position:absolute;left:6px;width:40%;font-weight:700;color:#64748b}
	.finance-table td.empty-state{padding:20px}.finance-table td.empty-state:before{display:none}
	.finance-stat{padding:4px}
	.finance-stat span{font-size:10px}
	.finance-stat strong{font-size:11px}
}
/* Finance visibility matrix */
.finance-access-settings{margin-top:24px;padding-top:22px;border-top:1px solid #e5e7eb}.finance-access-table-wrap{margin-top:14px;border:1px solid #dbe2ea;border-radius:14px;overflow:auto;background:#fff}.finance-access-table{margin:0;min-width:680px}.finance-access-table thead th{background:#173b63;color:#fff;text-align:center}.finance-access-table thead th:first-child{text-align:left}.finance-access-table tbody th{min-width:230px;text-align:left;background:#f8fafc;color:#1f2937}.finance-access-table td{text-align:center;vertical-align:middle}.finance-access-check{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin:auto;border-radius:10px;cursor:pointer}.finance-access-check:hover{background:#eef5fb}.finance-access-check input{width:20px;height:20px;margin:0;accent-color:#1769aa}.form-help{margin:12px 0 0;color:#64748b;font-size:.92rem}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Export template filter checkbox groups */
.export-filter-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}.export-filter-group{margin:0;padding:14px 16px 16px;border:1px solid var(--border-color,#d9dee7);border-radius:10px;min-width:0}.export-filter-group legend{padding:0 8px;font-weight:700}.export-filter-group-wide{grid-column:1/-1}.export-filter-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 12px}.export-filter-group .check-row{margin:0;padding:7px 4px}.export-filter-group .check-all-row{padding-bottom:9px;margin-bottom:5px;border-bottom:1px solid var(--border-color,#e1e5eb);font-weight:700}.export-filter-bottom{margin-top:16px}@media(max-width:760px){.export-filter-groups{grid-template-columns:1fr}.export-filter-group-wide{grid-column:auto}.export-filter-options{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:420px){.export-filter-options{grid-template-columns:1fr}}

/* === Patch: duplicate export, media checkbox alignment, finance/nav mobile === */
.danger-check{display:inline-flex!important;align-items:center!important;gap:8px!important;width:auto!important;margin:10px 0 12px!important;color:#b42318;font-weight:700;cursor:pointer}
.danger-check input{flex:0 0 auto;width:16px!important;height:16px!important;margin:0!important;padding:0!important}
.danger-check span{display:inline!important;margin:0!important}

.nav-dropdown-backdrop{position:fixed;z-index:9990;inset:0;background:transparent;cursor:default}
.nav-account,.nav-finance-menu{z-index:9991}
.nav-account.is-open,.nav-finance-menu.is-open{z-index:9992}
.nav-account-menu,.nav-finance-dropdown{z-index:9993!important}
.nav-finance-menu{position:relative;display:flex;align-items:center}
.nav-finance-toggle{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:inherit;padding:10px 8px;cursor:pointer;font:inherit;font-weight:inherit}
.nav-finance-caret{font-size:.78em;transition:transform .18s ease}
.nav-finance-menu.is-open .nav-finance-caret{transform:rotate(180deg)}
.nav-finance-dropdown[hidden]{display:none!important}
.nav-finance-menu.is-open .nav-finance-dropdown{display:block!important}
.nav-finance-menu:hover .nav-finance-dropdown{display:none}
.nav-finance-menu.is-open:hover .nav-finance-dropdown{display:block}

@media(max-width:640px){
  .finance-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .finance-table{display:table!important;width:100%!important;min-width:590px!important;table-layout:auto;border-collapse:collapse;font-size:11px}
  .finance-table thead{display:table-header-group!important}
  .finance-table tbody{display:table-row-group!important}
  .finance-table tr{display:table-row!important;width:auto!important;padding:0!important;border:0!important}
  .finance-table th,.finance-table td{display:table-cell!important;width:auto!important;position:static!important;padding:4px 6px!important;border-bottom:1px solid #e5e7eb!important;text-align:left!important;vertical-align:top!important}
  .finance-table th{font-size:10px!important;white-space:nowrap}
  .finance-table td{font-size:8.5px!important;line-height:1.25}
  .finance-table td:before{display:none!important;content:none!important}
  .finance-table .money{text-align:right!important;white-space:nowrap}
  .finance-table .finance-col-no,.finance-table .finance-col-description,.finance-table .finance-col-proof{display:none!important}
  .finance-table td.empty-state{display:table-cell!important;padding:18px!important}
}
@media(max-width:900px) and (orientation:landscape){
  .finance-table{min-width:900px!important;font-size:11px}
  .finance-table .finance-col-no,.finance-table .finance-col-description,.finance-table .finance-col-proof{display:table-cell!important}
  .finance-table th,.finance-table td{padding:7px 6px!important;font-size:10.5px!important}
}
@media(max-width:900px){
  .nav-finance-menu{display:block!important;width:100%}
  .nav-finance-toggle{box-sizing:border-box;width:100%;justify-content:space-between;text-align:left}
  .nav-finance-dropdown{position:static;box-shadow:none;border:0;border-left:3px solid #f26b21;border-radius:0;margin:0 0 0 12px;padding:2px 0 2px 10px;background:transparent}
}

/* Avatar yang memakai Foto Diri 3:4 difokuskan ke bagian atas agar wajah tidak terpotong. */
.member-profile-avatar.avatar-source-self img,
.site-header .nav-avatar img.avatar-source-self {
    object-position: center top !important;
}

/* Callbook publik dan popup header */
.nav-callbook-toggle{appearance:none;border:0;background:transparent;color:inherit;font:inherit;font-weight:600;padding:10px 12px;border-radius:8px;cursor:pointer}.nav-callbook-toggle:hover,.nav-callbook-toggle.is-active{background:#fff1e9;color:#ee5a16}.callbook-modal[hidden]{display:none!important}.callbook-modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:18px}.callbook-modal-backdrop{position:absolute;inset:0;background:rgba(8,27,43,.62)}.callbook-modal-dialog{position:relative;width:min(520px,100%);background:#fff;border-radius:16px;padding:26px;box-shadow:0 24px 70px rgba(0,0,0,.28)}.callbook-modal-dialog h2{margin:0 36px 7px 0;color:#173b5c}.callbook-modal-dialog p{margin:0 0 18px;color:#61778a}.callbook-modal-close{position:absolute;right:12px;top:9px;border:0;background:transparent;font-size:30px;line-height:1;color:#637888;cursor:pointer}.callbook-modal-form{display:flex;gap:9px}.callbook-modal-form input{flex:1;min-width:0;border:1px solid #b7c7d0;border-radius:9px;padding:12px 13px;font-size:16px;text-transform:uppercase}.callbook-modal-form button{border:0;border-radius:9px;padding:12px 20px;background:#ff641c;color:#fff;font-weight:700;cursor:pointer}.callbook-modal-full{display:inline-block;margin-top:14px;color:#173b5c;font-weight:700;text-decoration:none}.has-modal-open{overflow:hidden}@media(max-width:760px){.nav-callbook-toggle{width:100%;text-align:left;padding:12px 16px}.callbook-modal{align-items:start;padding-top:74px}.callbook-modal-form{flex-direction:column}.callbook-modal-form button{width:100%}}

/* Register: explicit camera/gallery choice on mobile */
.crop-source-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crop-source-actions .crop-upload-button{margin:0}
@media (max-width:640px){.crop-source-actions{display:grid;grid-template-columns:1fr 1fr}.crop-source-actions .button{width:100%;padding-left:8px;padding-right:8px;font-size:13px}}


/* Callbook popup: pencarian tetap di modal, halaman /callbook tetap untuk URL publik/share. */
.callbook-modal-dialog{max-height:calc(100vh - 36px);overflow:auto}
.callbook-modal-output{margin-top:16px}
.callbook-modal-loading,.callbook-modal-error{padding:12px 14px;border-radius:9px}
.callbook-modal-loading{background:#eef5f8;color:#526d80}
.callbook-modal-error{background:#fff0ef;border:1px solid #efbbb6;color:#9b2924}
.callbook-modal-source{padding:9px 12px;border-radius:8px 8px 0 0;background:#e8f2f8;color:#173b5c;font-weight:800}
.callbook-modal-result{border:1px solid #d5e0e5;border-top:0;border-radius:0 0 10px 10px;overflow:hidden}
.callbook-modal-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:9px 12px;border-bottom:1px solid #e5ecef;font-size:14px}
.callbook-modal-row:last-child{border-bottom:0}
.callbook-modal-row span{color:#587187;font-weight:700}
.callbook-modal-row strong{overflow-wrap:anywhere}
.callbook-modal-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px}
.callbook-modal-actions a{color:#173b5c;font-weight:800;text-decoration:none}
.callbook-modal-actions a:hover{text-decoration:underline}
.callbook-modal-form button:disabled{opacity:.65;cursor:wait}
@media(max-width:560px){.callbook-modal-dialog{padding:21px 18px}.callbook-modal-row{grid-template-columns:1fr;gap:3px}.callbook-modal-actions{font-size:14px}}

/* Laman publik */
.site-page{max-width:980px;margin:28px auto;padding:clamp(20px,4vw,46px);background: white}.site-page-header{border-bottom:1px solid #dce5e9;margin-bottom:24px}.site-page-header h1{margin:0}.site-page-header p{font-size:1.08rem;color:#5c7080}.site-page-content{line-height:1.75}.site-page-content img{max-width:100%;height:auto}.site-page-content table{width:100%;border-collapse:collapse}.site-page-content th,.site-page-content td{padding:8px;border:1px solid #ccd7dd}


/* Callbook popup mobile: pertahankan label dan nilai dalam dua kolom inline. */
@media (max-width:560px){
  .callbook-modal-row{
    grid-template-columns:minmax(135px, 38%) minmax(0, 1fr);
    align-items:start;
    gap:10px;
    padding:10px 12px;
  }
  .callbook-modal-row span,
  .callbook-modal-row strong{
    min-width:0;
    line-height:1.35;
  }
}

@media (max-width:380px){
  .callbook-modal-row{
    grid-template-columns:minmax(112px, 36%) minmax(0, 1fr);
    gap:8px;
    padding-left:10px;
    padding-right:10px;
    font-size:13px;
  }
}

/* Edit foto profil langsung dari avatar pada halaman /anggota/{username}/edit */
.member-profile-avatar-editor{position:relative;display:block;width:88px;height:88px;align-self:center;overflow:visible;z-index:8}
.member-profile-avatar-editor>.member-profile-avatar{width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important}
.member-profile-avatar-edit-trigger{position:absolute;right:-2px;bottom:-2px;z-index:6;display:grid;place-items:center;width:31px;height:31px;padding:0;border:3px solid #fff;border-radius:50%;background:#f26b21;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25);font-size:18px;line-height:1;cursor:pointer}
.member-profile-avatar-edit-trigger:hover,.member-profile-avatar-edit-trigger:focus-visible{background:#d95612;transform:scale(1.05)}
.member-profile-avatar-edit-trigger:focus-visible{outline:3px solid rgba(255,255,255,.55);outline-offset:2px}
.member-profile-avatar-menu{position:absolute;top:calc(100% + 9px);left:0;z-index:30;width:max-content;min-width:185px;padding:6px;border:1px solid #d8e0e6;border-radius:11px;background:#fff;box-shadow:0 14px 32px rgba(15,36,54,.24)}
.member-profile-avatar-menu[hidden]{display:none!important}
.member-profile-avatar-menu button{display:block;width:100%;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:#173e5b;text-align:left;font:inherit;font-size:13px;font-weight:750;cursor:pointer;white-space:nowrap}
.member-profile-avatar-menu button:hover,.member-profile-avatar-menu button:focus-visible{background:#eef4f7;outline:0}
.member-profile-avatar-menu button.is-danger{color:#b42318}
.member-profile-avatar-menu button.is-danger:hover,.member-profile-avatar-menu button.is-danger:focus-visible{background:#fff0ee}
@media(max-width:700px){.member-profile-avatar-editor{width:72px;height:72px}.member-profile-avatar-edit-trigger{width:28px;height:28px;font-size:16px}.member-profile-avatar-menu{left:-4px}}
@media(max-width:430px){.member-profile-avatar-editor{width:64px;height:64px}.member-profile-avatar-menu{min-width:172px}}


/* Floating CallBook launcher */
.floating-callbook{position:fixed;z-index:1450;left:18px;bottom:18px;display:flex;align-items:center;gap:8px;min-height:46px;padding:10px 15px;border:1px solid rgba(255,255,255,.48);border-radius:999px;background:#173b5c;color:#fff;box-shadow:0 10px 28px rgba(15,47,71,.3);font:inherit;font-size:13px;cursor:pointer}
.floating-callbook span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ff641c;color:#fff;font-size:19px;line-height:1}
.floating-callbook strong{font-weight:800;letter-spacing:.01em}
.floating-callbook:hover,.floating-callbook:focus-visible{background:#102f49;transform:translateY(-1px);outline:3px solid rgba(255,100,28,.24);outline-offset:2px}
@media(max-width:560px){.floating-callbook{left:12px;bottom:12px;min-height:43px;padding:8px 12px}.floating-callbook strong{font-size:12px}}
.legacy-member-photo[data-photo-popup]{padding:0;border:0;cursor:zoom-in}
.legacy-member-photo[data-photo-popup]:disabled{cursor:default}


/* Field domisili manual hanya tampil saat memilih Di Luar Kabupaten Enrekang. */
.outside-enrekang-fields[hidden]{display:none!important}
#amateur-ktp-group[hidden]{display:none!important}








/* =========================================================
   TABEL DATABASE CALON AMATIR
   ========================================================= */

.candidate-database-table {
    width: 100%;
}

.candidate-table-scroll {
    width: 100%;
    overflow-x: auto;
    border-radius: 6px;
}

.candidate-page-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
}

.candidate-page-table thead {
    background: #1689a1;
}

.candidate-page-table th {
    padding: 10px 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.65);
    background: #1689a1;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    white-space: nowrap;
}

.candidate-page-table th:last-child {
    border-right: 0;
}

.candidate-page-table td {
    padding: 11px 12px;
    border: 1px solid var(--border-color, #d5dde3);
    border-top: 0;
    vertical-align: middle;
}

.candidate-page-table tbody tr:nth-child(even) {
    background: rgba(127, 127, 127, 0.05);
}

.candidate-page-table tbody tr:hover {
    background: rgba(22, 137, 161, 0.09);
}

.candidate-page-table a {
    font-weight: 700;
    text-decoration: none;
}

.candidate-page-table a:hover {
    text-decoration: underline;
}

.candidate-page-table .candidate-col-number {
    width: 100px;
    white-space: nowrap;
}

.candidate-page-table .candidate-col-name {
    min-width: 180px;
}

.candidate-page-table .candidate-col-address {
    min-width: 220px;
}

.candidate-page-table .candidate-col-district {
    min-width: 135px;
}

.candidate-page-table .candidate-col-expiry {
    width: 130px;
    white-space: nowrap;
}

.candidate-table-empty {
    padding: 28px 15px !important;
    text-align: center;
    opacity: 0.75;
}

/* Mobile: hanya NO CA, NAMA, dan KECAMATAN */
@media (max-width: 767px) {
    .candidate-page-table {
        table-layout: fixed;
        font-size: 12px;
    }

    .candidate-page-table th,
    .candidate-page-table td {
        padding: 9px 7px;
        overflow-wrap: anywhere;
    }

    .candidate-page-table .candidate-col-address,
    .candidate-page-table .candidate-col-expiry {
        display: none;
    }

    .candidate-page-table .candidate-col-number {
        width: 25%;
    }

    .candidate-page-table .candidate-col-name {
        width: 45%;
        min-width: 0;
    }

    .candidate-page-table .candidate-col-district {
        width: 30%;
        min-width: 0;
    }
}
/* =========================================================
   Jadwal dan kuota UNAR publik
   ========================================================= */
.unar-page{max-width:1100px;margin:0 auto 44px}.unar-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:34px 0 24px}.unar-eyebrow{display:inline-block;color:var(--orange);font-size:.82rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.unar-hero h1{margin:.35rem 0 .55rem;color:var(--navy);font-size:clamp(1.85rem,4vw,2.65rem)}.unar-hero p{max-width:720px;margin:0;color:var(--muted);font-size:1.02rem;line-height:1.7}.unar-update-card{flex:0 0 auto;min-width:230px;padding:16px 18px;border:1px solid #b9e6ce;border-radius:14px;background:#effcf4;box-shadow:0 8px 25px rgba(15,23,42,.05)}.unar-update-card span{display:block;margin-bottom:5px;color:#3f6f54;font-size:.77rem;font-weight:800;text-transform:uppercase}.unar-update-card strong{color:#17613a}.unar-update-card.is-stale{border-color:#f1cf8f;background:#fff8e8}.unar-update-card.is-stale span,.unar-update-card.is-stale strong{color:#8b5a08}.unar-notice{margin-bottom:18px;padding:14px 16px;border-radius:12px;line-height:1.55}.unar-notice-warning{border:1px solid #f2d18e;background:#fff8e8;color:#805409}.unar-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:22px}.unar-schedule-card{position:relative;overflow:hidden;padding:23px;border:1px solid #dfe7ec;border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(15,23,42,.06)}.unar-schedule-card:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:#22a06b}.unar-schedule-card.is-low:before{background:#e49a18}.unar-schedule-card.is-full:before{background:#d64545}.unar-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.unar-date{color:#526575;font-size:.88rem;font-weight:700}.unar-status-badge{padding:5px 9px;border-radius:999px;background:#e8f8ef;color:#167044;font-size:.73rem;font-weight:800;text-transform:uppercase}.is-low .unar-status-badge{background:#fff4db;color:#91600c}.is-full .unar-status-badge{background:#fff0f0;color:#aa2929}.unar-schedule-card h2{margin:17px 0 20px;color:var(--navy);font-size:1.05rem;line-height:1.5}.unar-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:0 0 17px}.unar-stats div{padding:12px;border-radius:11px;background:#f6f9fb;text-align:center}.unar-stats dt{color:#70808d;font-size:.74rem}.unar-stats dd{margin:3px 0 0;color:#253746;font-size:1.35rem;font-weight:800}.unar-stats .unar-remaining{background:#edf9f2}.is-low .unar-stats .unar-remaining{background:#fff6e4}.is-full .unar-stats .unar-remaining{background:#fff0f0}.unar-progress{height:8px;overflow:hidden;border-radius:999px;background:#e8eef2}.unar-progress span{display:block;height:100%;border-radius:inherit;background:#22a06b}.is-low .unar-progress span{background:#e49a18}.is-full .unar-progress span{background:#d64545}.unar-schedule-card small{display:block;margin-top:8px;color:#72818d}.unar-table-panel{padding:0;overflow:hidden}.unar-table-scroll{overflow-x:auto}.unar-table{width:100%;border-collapse:collapse}.unar-table th{padding:13px 15px;background:#173f5f;color:#fff;text-align:left;font-size:.84rem}.unar-table td{padding:13px 15px;border-bottom:1px solid #e2e8ec;vertical-align:top}.unar-table tbody tr:nth-child(even){background:#f8fafb}.unar-table td:not(:first-child),.unar-table th:not(:first-child){text-align:center;white-space:nowrap}.unar-empty{padding:38px;text-align:center}.unar-empty h2{margin-top:0}.unar-disclaimer{max-width:850px;margin:18px auto 0;color:#6c7d89;font-size:.88rem;line-height:1.65;text-align:center}
.is-full .unar-stats .unar-remaining dd,.unar-table-remaining.is-full strong{color:#b72f2f}
@media(max-width:760px){.unar-hero{align-items:stretch;flex-direction:column;padding-top:22px}.unar-update-card{min-width:0}.unar-card-grid{grid-template-columns:1fr}.unar-table thead{display:none}.unar-table,.unar-table tbody,.unar-table tr,.unar-table td{display:block;width:100%}.unar-table tr{padding:12px 14px;border-bottom:1px solid #e2e8ec}.unar-table td{position:relative;padding:6px 6px 6px 44%;border:0;text-align:left!important;white-space:normal!important}.unar-table td:before{content:attr(data-label);position:absolute;left:6px;width:36%;color:#647583;font-size:.75rem;font-weight:800;text-transform:uppercase}.unar-stats dd{font-size:1.15rem}}

/* =========================================================
   JADWAL UNAR — DARK THEME (cache-busted in main layout)
   ========================================================= */
html[data-theme="dark"] .unar-update-card{
  background:#173329!important;
  border-color:#2d6b50!important;
  color:#d8f5e4!important;
  box-shadow:0 10px 26px rgba(0,0,0,.24)!important;
}
html[data-theme="dark"] .unar-update-card span{color:#9fd7b8!important}
html[data-theme="dark"] .unar-update-card strong{color:#d8f5e4!important}
html[data-theme="dark"] .unar-update-card.is-stale,
html[data-theme="dark"] .unar-notice-warning{
  background:#3a2d18!important;
  border-color:#7b5b23!important;
  color:#ffe0a3!important;
}
html[data-theme="dark"] .unar-update-card.is-stale span,
html[data-theme="dark"] .unar-update-card.is-stale strong{color:#ffd990!important}
html[data-theme="dark"] .unar-schedule-card{
  background:#18232d!important;
  color:#dce6ed!important;
  border-color:#344652!important;
  box-shadow:0 10px 30px rgba(0,0,0,.26)!important;
}
html[data-theme="dark"] .unar-schedule-card h2{color:#eef5f9!important}
html[data-theme="dark"] .unar-date{color:#b9c8d1!important}
html[data-theme="dark"] .unar-status-badge{background:#18382b!important;color:#9be0b9!important}
html[data-theme="dark"] .unar-schedule-card.is-low .unar-status-badge{background:#3a2d18!important;color:#ffd58a!important}
html[data-theme="dark"] .unar-schedule-card.is-full .unar-status-badge{background:#3b2023!important;color:#ffb4b4!important}
html[data-theme="dark"] .unar-stats div{
  background:#111c24!important;
  border:1px solid #2f424e!important;
}
html[data-theme="dark"] .unar-stats dt{color:#aebdca!important}
html[data-theme="dark"] .unar-stats dd{color:#f0f6f9!important}
html[data-theme="dark"] .unar-stats .unar-remaining{background:#173329!important;border-color:#2d6049!important}
html[data-theme="dark"] .unar-schedule-card.is-low .unar-stats .unar-remaining{background:#3a2d18!important;border-color:#725522!important}
html[data-theme="dark"] .unar-schedule-card.is-full .unar-stats .unar-remaining{background:#3b2023!important;border-color:#714046!important}
html[data-theme="dark"] .unar-schedule-card.is-full .unar-stats .unar-remaining dd,
html[data-theme="dark"] .unar-table-remaining.is-full strong{color:#ff9d9d!important}
html[data-theme="dark"] .unar-progress{background:#2a3a45!important}
html[data-theme="dark"] .unar-schedule-card small,
html[data-theme="dark"] .unar-disclaimer,
html[data-theme="dark"] .unar-hero p{color:#aebdca!important}
html[data-theme="dark"] .unar-table-panel{
  background:#18232d!important;
  border-color:#344652!important;
}
html[data-theme="dark"] .unar-table{background:#18232d!important;color:#dce6ed!important}
html[data-theme="dark"] .unar-table th{background:#223640!important;color:#f2f7fa!important;border-color:#3b4f5b!important}
html[data-theme="dark"] .unar-table td{background:#18232d!important;color:#dce6ed!important;border-color:#31434f!important}
html[data-theme="dark"] .unar-table tbody tr:nth-child(even) td{background:#14202a!important}
html[data-theme="dark"] .unar-table tbody tr:nth-child(odd) td{background:#18232d!important}
html[data-theme="dark"] .unar-table tbody tr:hover td{background:#20313c!important}
html[data-theme="dark"] .unar-table td:before{color:#9fb1bd!important}

/* =========================================================
   Halaman sambutan registrasi
   ========================================================= */
.welcome-page{position:relative;isolation:isolate;max-width:1080px;margin:10px auto 48px;padding:54px 42px 38px;overflow:hidden;border:1px solid #dce6ec;border-radius:28px;background:linear-gradient(145deg,#fff 0%,#f7fafc 52%,#eef7f3 100%);box-shadow:0 24px 60px rgba(15,39,56,.1)}
.welcome-glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(2px);pointer-events:none}.welcome-glow-one{width:360px;height:360px;top:-190px;right:-110px;background:rgba(242,107,33,.13)}.welcome-glow-two{width:300px;height:300px;bottom:-190px;left:-90px;background:rgba(31,142,91,.12)}
.welcome-hero{max-width:780px;margin:0 auto;text-align:center}.welcome-success-mark{display:grid;width:76px;height:76px;margin:0 auto 18px;place-items:center;border:8px solid rgba(31,142,91,.14);border-radius:50%;background:#1f8e5b;color:#fff;box-shadow:0 14px 30px rgba(31,142,91,.22)}.welcome-success-mark span{font-size:2rem;font-weight:900;line-height:1}.welcome-eyebrow{margin:0;color:#d85c18;font-size:.78rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.welcome-hero h1{max-width:760px;margin:10px auto 12px;color:var(--navy);font-size:clamp(2rem,5vw,3.35rem);line-height:1.08;letter-spacing:-.035em}.welcome-personal{margin:0 0 7px;color:#244457;font-size:1.08rem}.welcome-intro{max-width:720px;margin:0 auto;color:var(--muted);font-size:1.05rem;line-height:1.75}.welcome-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:28px}.welcome-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;border-radius:13px;text-decoration:none;font-weight:800}.welcome-primary{border:1px solid #e8621c;background:linear-gradient(135deg,#f47b32,#df5814);color:#fff;box-shadow:0 10px 22px rgba(224,88,20,.22)}.welcome-primary:hover{transform:translateY(-1px);color:#fff}.welcome-secondary{border:1px solid #cad8e0;background:rgba(255,255,255,.78);color:#173f5f}.welcome-secondary:hover{border-color:#9fb4c1;background:#fff;color:#173f5f}
.welcome-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:42px}.welcome-step-card{display:flex;gap:15px;min-height:158px;padding:22px;border:1px solid rgba(199,215,224,.85);border-radius:18px;background:rgba(255,255,255,.78);box-shadow:0 10px 24px rgba(15,39,56,.055);backdrop-filter:blur(8px)}.welcome-step-number{display:grid;flex:0 0 42px;width:42px;height:42px;place-items:center;border-radius:12px;background:#edf4f8;color:#173f5f;font-size:.78rem;font-weight:900}.welcome-step-card h2{margin:1px 0 7px;color:#173f5f;font-size:1rem}.welcome-step-card p{margin:0;color:#657783;font-size:.9rem;line-height:1.6}.welcome-note{display:flex;align-items:flex-start;gap:15px;margin-top:18px;padding:20px 22px;border:1px solid #cce8d9;border-radius:17px;background:#effaf4}.welcome-note-icon{display:grid;flex:0 0 38px;width:38px;height:38px;place-items:center;border-radius:11px;background:#1f8e5b;color:#fff;font-size:1.1rem}.welcome-note h2{margin:0 0 5px;color:#185f40;font-size:1rem}.welcome-note p{margin:0;color:#3f6f58;line-height:1.6}.welcome-page-candidate .welcome-success-mark{background:#e26a24;border-color:rgba(226,106,36,.15);box-shadow:0 14px 30px rgba(226,106,36,.22)}.welcome-page-candidate .welcome-note{border-color:#f0d2b8;background:#fff7ef}.welcome-page-candidate .welcome-note-icon{background:#e26a24}.welcome-page-candidate .welcome-note h2{color:#8b431b}.welcome-page-candidate .welcome-note p{color:#73513d}.welcome-page-amateur .welcome-glow-two{background:rgba(23,63,95,.12)}
@media(max-width:820px){.welcome-page{padding:40px 24px 28px;border-radius:22px}.welcome-steps{grid-template-columns:1fr}.welcome-step-card{min-height:0}.welcome-hero h1{font-size:clamp(1.85rem,8vw,2.7rem)}}
@media(max-width:520px){.welcome-page{margin-top:0;padding:32px 17px 22px;border-radius:18px}.welcome-success-mark{width:66px;height:66px}.welcome-actions{flex-direction:column}.welcome-actions .btn{width:100%}.welcome-step-card{padding:18px}.welcome-note{padding:17px}.welcome-note-icon{display:none}}
html[data-theme="dark"] .welcome-page{border-color:#344652;background:linear-gradient(145deg,#18232d 0%,#14202a 58%,#172b25 100%);box-shadow:0 24px 60px rgba(0,0,0,.28)}html[data-theme="dark"] .welcome-hero h1,html[data-theme="dark"] .welcome-personal,html[data-theme="dark"] .welcome-step-card h2{color:#eef5f9}html[data-theme="dark"] .welcome-intro,html[data-theme="dark"] .welcome-step-card p{color:#aebdca}html[data-theme="dark"] .welcome-step-card{border-color:#344652;background:rgba(17,28,36,.82);box-shadow:0 10px 24px rgba(0,0,0,.2)}html[data-theme="dark"] .welcome-step-number{background:#223640;color:#dce8ee}html[data-theme="dark"] .welcome-secondary{border-color:#405563;background:#1c2b35;color:#e7f0f4}html[data-theme="dark"] .welcome-secondary:hover{background:#263945;color:#fff}html[data-theme="dark"] .welcome-note{border-color:#2d6049;background:#173329}html[data-theme="dark"] .welcome-note h2{color:#b7ebcc}html[data-theme="dark"] .welcome-note p{color:#a8cfb8}html[data-theme="dark"] .welcome-page-candidate .welcome-note{border-color:#725522;background:#3a2d18}html[data-theme="dark"] .welcome-page-candidate .welcome-note h2{color:#ffd89a}html[data-theme="dark"] .welcome-page-candidate .welcome-note p{color:#e0c49b}


/* Tautan asli yang membentang pada card direktori.
   Mendukung klik kanan, Ctrl+klik, dan klik tengah untuk membuka tab baru. */
.legacy-member-row[data-profile-card]{cursor:pointer}
.legacy-member-card-link{
    position:absolute;
    z-index:1;
    inset:0;
    border-radius:inherit;
    text-decoration:none;
}
.legacy-member-card-link:focus-visible{
    outline:3px solid rgba(8,118,83,.32);
    outline-offset:2px;
}
.legacy-member-row > .badge-status{
    position:relative;
}
.member-action-wrap{
    z-index:2;
}
.legacy-member-photo{
    position:relative;
    z-index:2;
}
.legacy-member-photo-column > .badge-type{
    position:relative;
    z-index:2;
    pointer-events:none;
}
.legacy-member-row > .badge-status{
    z-index:2;
    pointer-events:none;
}

/* Hotfix stretched-link card: pertahankan posisi asli badge status.
   Rule patch sebelumnya tidak boleh mengubah badge dari absolute ke relative. */
.legacy-member-row > .badge-status{
    position:absolute;
    z-index:3;
}
.member-action-wrap{
    z-index:20;
}
.member-action-wrap.is-open{
    z-index:10004;
}

/* Form masa berlaku manual pada generator kartu Calon Amatir. */
.candidate-card-validity-field {
    display: grid;
    gap: .65rem;
}
.candidate-card-validity-field > label {
    font-weight: 700;
}
.candidate-card-date-fields {
    display: grid;
    grid-template-columns: minmax(88px, .75fr) minmax(150px, 1.25fr) minmax(110px, .9fr);
    gap: .75rem;
}
.candidate-card-date-fields label {
    display: grid;
    gap: .35rem;
}
.candidate-card-date-fields label > span {
    font-size: .82rem;
    font-weight: 700;
    opacity: .82;
}
.candidate-card-date-fields select,
.candidate-card-date-fields input {
    width: 100%;
	padding: 7px;
}
@media (max-width: 560px) {
    .candidate-card-date-fields {
        grid-template-columns: 1fr 1.35fr;
    }
    .candidate-card-date-fields label:last-child {
        grid-column: 1 / -1;
    }
}

/* Patch 2026-07-31: legacy-member-toolbar responsif dan adaptif terhadap filter privasi.
   Jumlah filter dapat berubah karena filter yang tidak diizinkan tidak dirender. */
.legacy-member-toolbar,
.public-member-toolbar{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(132px,1fr)) !important;
    grid-auto-flow:row dense;
    align-items:end;
    gap:10px !important;
    width:100%;
    max-width:100%;
    margin:0 0 12px;
    padding:12px !important;
    overflow:visible !important;
}
.legacy-member-toolbar > label,
.public-member-toolbar > label{
    min-width:0;
    width:100%;
    margin:0;
}
.legacy-member-toolbar > label > span,
.public-member-toolbar > label > span{
    display:block;
    min-height:1.25em;
    margin-bottom:4px;
    overflow:hidden;
    color:inherit;
    font-size:12px !important;
    font-weight:700;
    line-height:1.25;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.legacy-member-toolbar select,
.legacy-member-toolbar input,
.public-member-toolbar select,
.public-member-toolbar input{
    display:block;
    min-width:0 !important;
    width:100% !important;
    max-width:100%;
    height:38px !important;
    padding:7px 30px 7px 9px !important;
    font-size:13px !important;
    line-height:1.2;
}
.legacy-member-toolbar input,
.public-member-toolbar input{
    padding-right:9px !important;
}
.legacy-member-toolbar .legacy-search-field,
.public-member-toolbar .legacy-search-field{
    grid-column:span 2 !important;
    min-width:0;
}
.legacy-member-toolbar > .button,
.public-member-toolbar > .button,
.legacy-member-toolbar > noscript,
.public-member-toolbar > noscript{
    min-width:0;
    width:100%;
}
.legacy-member-toolbar > .button,
.public-member-toolbar > .button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    white-space:nowrap;
}

@media (max-width:900px){
    .legacy-member-toolbar,
    .public-member-toolbar{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:8px !important;
        padding:10px !important;
    }
    .legacy-member-toolbar .legacy-search-field,
    .public-member-toolbar .legacy-search-field{
        grid-column:span 2 !important;
    }
}

@media (max-width:640px){
    .legacy-member-toolbar,
    .public-member-toolbar{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
        margin:8px 0 10px;
        padding:9px !important;
    }
    .legacy-member-toolbar .legacy-search-field,
    .public-member-toolbar .legacy-search-field,
    .legacy-member-toolbar > .button,
    .public-member-toolbar > .button,
    .legacy-member-toolbar > noscript,
    .public-member-toolbar > noscript{
        grid-column:1 / -1 !important;
    }
    .legacy-member-toolbar > label > span,
    .public-member-toolbar > label > span{
        font-size:11px !important;
    }
    .legacy-member-toolbar select,
    .legacy-member-toolbar input,
    .public-member-toolbar select,
    .public-member-toolbar input{
        height:38px !important;
        font-size:12px !important;
    }
}

/* Pada lebar 420px tetap dua kolom agar toolbar ringkas tetapi masih mudah disentuh. */
@media (max-width:420px){
    .legacy-member-toolbar,
    .public-member-toolbar{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:7px !important;
        padding:8px !important;
    }
    .legacy-member-toolbar .legacy-search-field,
    .public-member-toolbar .legacy-search-field,
    .legacy-member-toolbar > .button,
    .public-member-toolbar > .button,
    .legacy-member-toolbar > noscript,
    .public-member-toolbar > noscript{
        grid-column:1 / -1 !important;
    }
    .legacy-member-toolbar > label > span,
    .public-member-toolbar > label > span{
        font-size:10px !important;
    }
    .legacy-member-toolbar select,
    .legacy-member-toolbar input,
    .public-member-toolbar select,
    .public-member-toolbar input{
        height:37px !important;
        padding-left:7px !important;
        font-size:11px !important;
    }
}

/* Cadangan untuk perangkat yang benar-benar lebih sempit dari target 420px. */
@media (max-width:340px){
    .legacy-member-toolbar,
    .public-member-toolbar{
        grid-template-columns:1fr !important;
    }
    .legacy-member-toolbar .legacy-search-field,
    .public-member-toolbar .legacy-search-field{
        grid-column:auto !important;
    }
}

/* Patch 2026-08-02: header dan sidebar navigasi khusus mobile. Desktop tetap memakai tata letak lama. */
.mobile-header-account,
.mobile-nav-theme,
.mobile-nav-backdrop,
.mobile-account-backdrop{display:none!important}

@media (max-width:900px){
  body.mobile-nav-open{overflow:hidden}
  .site-header .nav-wrapper{
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr) 48px;
    gap:6px!important;
    min-height:56px!important;
    padding:0 8px!important;
  }
  .site-header .nav-toggle{
    position:relative;
    z-index:112;
    display:block!important;
    grid-column:1;
    grid-row:1;
    justify-self:start;
    width:44px;
    height:44px;
    padding:7px!important;
    border:0!important;
    cursor:pointer;
  }
  .site-header .nav-toggle span{width:25px!important;transition:transform .18s ease,opacity .18s ease}
  .site-header .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-header .nav-toggle.is-open span:nth-child(2){opacity:0}
  .site-header .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .site-header .brand{
    grid-column:2;
    grid-row:1;
    justify-self:start;
    width:min(100%,250px);
    gap:8px!important;
  }
  .site-header .brand-logo-image{
    width:40px!important;height:40px!important;
    min-width:40px!important;max-width:40px!important;max-height:40px!important;
  }
  .site-header .header-theme-control{display:none!important}
  .site-header .mobile-header-account{
    position:relative!important;
    z-index:113;
    display:flex!important;
    grid-column:3;
    grid-row:1;
    justify-self:end;
    width:44px!important;
    align-self:center!important;
  }
  .site-header .mobile-header-account .nav-user{
    display:grid!important;
    place-items:center;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:2px!important;
    border:0;
    border-radius:50%;
    background:transparent;
  }
  .site-header .mobile-header-account .nav-avatar,
  .site-header .mobile-header-account .nav-avatar img{
    width:38px!important;height:38px!important;
    min-width:38px!important;max-width:38px!important;
    min-height:38px!important;max-height:38px!important;
    margin:0!important;border-radius:50%!important;object-fit:cover!important;
  }
  .site-header .mobile-header-account .nav-account-menu{
    position:absolute!important;
    top:calc(100% + 6px)!important;
    right:0!important;
    width:190px!important;
    margin:0!important;
    box-shadow:0 14px 34px rgba(15,23,42,.2)!important;
  }
  .site-header .main-nav .nav-account{display:none!important}
  .site-header .main-nav{
    position:fixed!important;
    z-index:111!important;
    inset:0 auto 0 0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:min(84vw,320px)!important;
    max-height:none!important;
    padding:74px 14px 22px!important;
    overflow-y:auto!important;
    border:0!important;
    border-radius:0 16px 16px 0!important;
    background:#fff!important;
    box-shadow:16px 0 40px rgba(15,23,42,.24)!important;
    transform:translateX(-105%);
    visibility:hidden;
    pointer-events:none;
    transition:transform .22s ease,visibility 0s linear .22s;
  }
  .site-header .main-nav.is-open{
    transform:translateX(0);
    visibility:visible;
    pointer-events:auto;
    transition:transform .22s ease;
  }
  .site-header .main-nav>a,
  .site-header .main-nav>.nav-callbook-toggle,
  .site-header .main-nav .nav-finance-toggle,
  .site-header .mobile-nav-theme{
    display:flex!important;
    align-items:center;
    width:100%!important;
    min-height:44px;
    padding:10px 12px!important;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#17354a;
    text-align:left;
    font:inherit;
    font-weight:700;
    cursor:pointer;
  }
  .site-header .mobile-nav-theme{gap:10px;order:99;border-top:1px solid #dfe7ec;border-radius:0;margin-top:8px;padding-top:14px!important}
  .site-header .mobile-nav-theme-icon{display:inline-grid;place-items:center;width:24px;font-size:18px}
  .site-header .mobile-nav-backdrop:not([hidden]){
    position:fixed;
    z-index:110;
    inset:0;
    display:block;
    background:rgba(9,25,37,.48);
    cursor:default!important;
    touch-action:none;
  }
  .mobile-account-backdrop:not([hidden]){
    position:fixed;
    z-index:112;
    inset:0;
    display:block!important;
    background:transparent;
    cursor:default!important;
    touch-action:none;
    pointer-events:auto;
  }
}

@media (max-width:420px){
  .site-header .brand-copy strong{font-size:11px!important}
  .site-header .brand-copy small{font-size:6px!important}
}

/* Patch 2026-08-02 v2: brand mobile benar-benar di tengah dan memakai ruang header secara maksimal. */
@media (max-width:900px){
  .site-header .nav-wrapper{
    grid-template-columns:48px minmax(0,1fr) 48px!important;
  }
  .site-header .brand{
    grid-column:2!important;
    justify-self:center!important;
    justify-content:center!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    padding-inline:2px!important;
    overflow:hidden;
  }
  .site-header .brand-copy{
    min-width:0!important;
    width:auto!important;
    max-width:calc(100% - 48px)!important;
  }
  .site-header .brand-copy strong{
    display:block!important;
    margin:0!important;
    font-size:clamp(14px,3.7vw,23px)!important;
    line-height:1.05!important;
    letter-spacing:clamp(.7px,.24vw,1.5px)!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .site-header .brand-copy small{
    display:block!important;
    margin-top:4px!important;
    font-size:clamp(7px,1.7vw,12px)!important;
    line-height:1.1!important;
    letter-spacing:clamp(.8px,.25vw,1.7px)!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

@media (max-width:420px){
  .site-header .brand-copy strong{font-size:clamp(13px,4vw,16px)!important}
  .site-header .brand-copy small{font-size:clamp(7px,2vw,9px)!important}
}

/* Patch 2026-08-02 v4: paksa avatar akun khusus mobile tersembunyi pada desktop.
   Selector dibuat lebih spesifik daripada aturan lama .site-header .nav-account. */
.site-header .mobile-header-account{
    display:none!important;
}

@media (max-width:900px){
    .site-header .mobile-header-account{
        display:flex!important;
    }
}

/* Patch 2026-08-02 v5: ikon profil untuk pengunjung/logout pada header mobile. */
@media (max-width:900px){
    .site-header .mobile-header-account.is-guest .guest-profile-icon{
        display:grid!important;
        place-items:center;
        background:#eef4f7!important;
        border:1px solid #b8c8d1!important;
        color:#17344a!important;
    }
    .site-header .mobile-header-account.is-guest .guest-profile-icon svg{
        width:23px!important;
        height:23px!important;
        fill:currentColor;
        display:block;
    }
    [data-theme="dark"] .site-header .mobile-header-account.is-guest .guest-profile-icon{
        background:#1c2b36!important;
        border-color:#425766!important;
        color:#f3f7fa!important;
    }
}

/* Patch 2026-08-02 v7: kunci interaksi di luar main-navigation mobile. */
@media (max-width:900px){
  /* Cursor area di luar sidebar tidak mengikuti cursor link/tombol di belakang. */
  body.mobile-nav-open *{
    cursor:default!important;
  }
  /* Interaksi dan cursor normal hanya di dalam sidebar serta tombol pembukanya. */
  body.mobile-nav-open .site-header .main-nav,
  body.mobile-nav-open .site-header .main-nav *{
    cursor:auto!important;
  }
  body.mobile-nav-open .site-header .main-nav a,
  body.mobile-nav-open .site-header .main-nav button,
  body.mobile-nav-open .site-header .main-nav [role=button],
  body.mobile-nav-open .site-header .nav-toggle,
  body.mobile-nav-open .site-header .nav-toggle *{
    cursor:pointer!important;
  }
  body.mobile-nav-open .site-header .mobile-nav-backdrop{
    cursor:default!important;
  }
}

/* Patch 2026-08-02 v8: kunci interaksi di luar dropdown avatar profil mobile. */
@media (max-width:900px){
  /* Selama dropdown avatar terbuka, cursor area belakang tidak mengikuti
     cursor link, tombol, atau card yang tertutup secara visual. */
  body.mobile-account-menu-open *{
    cursor:default!important;
  }
  /* Cursor dan interaksi normal hanya pada tombol avatar dan isi dropdown. */
  body.mobile-account-menu-open .site-header .mobile-header-account,
  body.mobile-account-menu-open .site-header .mobile-header-account *{
    cursor:auto!important;
  }
  body.mobile-account-menu-open .site-header .mobile-header-account [data-nav-account-toggle],
  body.mobile-account-menu-open .site-header .mobile-header-account .nav-account-menu a,
  body.mobile-account-menu-open .site-header .mobile-header-account .nav-account-menu button{
    cursor:pointer!important;
  }
}

/* Patch 2026-08-02: header + drawer admin mobile seperti navigasi situs utama. */
.admin-mobile-backdrop{display:none}

@media (max-width:960px){
  body.admin-mobile-nav-open{overflow:hidden}

  .admin-shell{display:block!important}
  .admin-sidebar{
    position:sticky!important;
    z-index:233!important;
    top:0!important;
    width:100%!important;
    height:68px!important;
    min-height:68px!important;
    padding:0 18px!important;
    display:block!important;
    overflow:visible!important;
    box-sizing:border-box!important;
    background:#0d1d28!important;
    border-bottom:1px solid rgba(255,255,255,.18);
  }
  .admin-sidebar-head{
    position:relative;
    z-index:230;
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr) 48px;
    align-items:center;
    gap:8px;
    width:100%;
    height:68px;
  }
  .admin-nav-toggle{
    position:relative;
    z-index:234;
    grid-column:1;
    grid-row:1;
    justify-self:start;
    display:grid!important;
    place-content:center;
    gap:5px;
    width:44px!important;
    height:44px!important;
    padding:0!important;
    border:1px solid #526371!important;
    border-radius:9px!important;
    background:#273744!important;
    cursor:pointer;
  }
  .admin-nav-toggle span{
    display:block;
    width:24px!important;
    height:2px!important;
    border-radius:99px;
    background:#fff!important;
  }
  .admin-sidebar.is-menu-open .admin-nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .admin-sidebar.is-menu-open .admin-nav-toggle span:nth-child(2){opacity:0}
  .admin-sidebar.is-menu-open .admin-nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .admin-sidebar-head .brand{
    grid-column:2;
    grid-row:1;
    justify-self:center;
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:10px!important;
    width:100%;
    min-width:0;
    max-width:520px;
    color:#fff!important;
    text-decoration:none;
  }
  .admin-sidebar-head .brand span{
    display:block;
    min-width:0;
    overflow:hidden;
    color:#fff!important;
    font-size:clamp(14px,3.5vw,20px);
    font-weight:900;
    letter-spacing:.6px;
    line-height:1.08;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .admin-brand-logo{
    width:38px!important;
    height:46px!important;
    max-width:38px!important;
    max-height:46px!important;
    margin:0!important;
    flex:0 0 38px!important;
    object-fit:contain!important;
  }
  .admin-theme-wrap{
    grid-column:3;
    grid-row:1;
    justify-self:end;
    display:flex!important;
    align-items:center;
    margin:0!important;
    padding:0!important;
  }
  .admin-theme-wrap .theme-switch{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    padding:0!important;
    border:1px solid #526371!important;
    border-radius:50%!important;
    background:#182d3a!important;
  }

  .admin-sidebar-menu{
    position:fixed!important;
    z-index:232!important;
    inset:0 auto 0 0!important;
    display:flex!important;
    flex-direction:column!important;
    width:min(84vw,320px)!important;
    height:100dvh!important;
    min-height:100vh!important;
    padding:84px 16px 22px!important;
    overflow-y:auto!important;
    box-sizing:border-box!important;
    background:#17324d!important;
    box-shadow:16px 0 40px rgba(0,0,0,.32)!important;
    transform:translateX(-105%);
    visibility:hidden;
    pointer-events:none;
    transition:transform .22s ease,visibility 0s linear .22s;
  }
  .admin-sidebar.is-menu-open .admin-sidebar-menu{
    transform:translateX(0);
    visibility:visible;
    pointer-events:auto;
    transition:transform .22s ease;
  }
  .admin-sidebar-caption{display:block!important;margin:0 0 8px!important}
  .admin-nav{display:grid!important;grid-auto-flow:row!important;overflow:visible!important;gap:4px!important}
  .admin-nav-link{display:block!important}
  .admin-sidebar-footer{display:grid!important;margin-top:auto!important;padding-top:14px!important;border-top:1px solid rgba(255,255,255,.22)!important}

  .admin-mobile-backdrop:not([hidden]){
    position:fixed;
    z-index:231;
    inset:0;
    display:block!important;
    background:rgba(4,15,23,.52);
    cursor:default!important;
    touch-action:none;
  }
  .admin-content{height:auto!important;overflow:visible!important;padding:20px 12px!important}

  /* Backdrop berada di atas header/konten, tetapi di bawah drawer dan tombol
     hamburger. Karena itu area luar selalu cursor default dan tidak dapat
     mengeksekusi elemen di belakang, tanpa mengubah cursor isi drawer. */
  body.admin-mobile-nav-open .admin-mobile-backdrop{cursor:default!important}
  body.admin-mobile-nav-open .admin-sidebar-menu a,
  body.admin-mobile-nav-open .admin-sidebar-menu button,
  body.admin-mobile-nav-open .admin-nav-toggle{cursor:pointer!important}
  body.admin-mobile-nav-open .admin-sidebar-menu{cursor:auto!important}
}

@media (max-width:420px){
  .admin-sidebar{padding-inline:10px!important}
  .admin-sidebar-head{grid-template-columns:46px minmax(0,1fr) 46px;gap:5px}
  .admin-sidebar-head .brand{gap:7px!important}
  .admin-brand-logo{width:31px!important;height:42px!important;max-width:31px!important;flex-basis:31px!important}
  .admin-sidebar-head .brand span{font-size:clamp(12px,4vw,16px)}
}


/* Patch 2026-08-02 v12: pastikan drawer admin berada di atas backdrop.
   Sebelumnya .admin-sidebar membentuk stacking context z-index 230, sehingga
   child .admin-sidebar-menu z-index 232 tetap tertutup backdrop sibling 231. */
@media (max-width:960px){
  .admin-sidebar{z-index:233!important}
  .admin-mobile-backdrop:not([hidden]){z-index:231!important}
  .admin-sidebar-menu{z-index:232!important}
}

/* Patch 2026-08-02 v13: normalisasi cursor sesudah toggle tema.
   Class ini hanya aktif selama pointer masih diam di atas tombol setelah klik;
   pointer kembali normal saat keluar dan menjadi pointer lagi saat masuk ulang. */
.theme-switch.theme-switch-cursor-reset,
[data-theme-toggle].theme-switch-cursor-reset{
  cursor:default!important;
}


/* Halaman khusus akun yang masa keanggotaannya telah berakhir. */
.welcome-page-expire{background:linear-gradient(145deg,#fff 0%,#fff9f1 55%,#fff2e3 100%)}
.welcome-page-expire .welcome-success-mark{background:#c75318;border-color:rgba(199,83,24,.16);box-shadow:0 14px 30px rgba(199,83,24,.24)}
.welcome-page-expire .welcome-note{border-color:#efc79e;background:#fff6eb}
.welcome-page-expire .welcome-note-icon{background:#c75318}
.welcome-page-expire .welcome-note h2{color:#843710}
.welcome-page-expire .welcome-note p{color:#744b32}
html[data-theme="dark"] .welcome-page-expire{border-color:#5d4938;background:linear-gradient(145deg,#1b252d 0%,#292118 58%,#302116 100%)}
html[data-theme="dark"] .welcome-page-expire .welcome-note{border-color:#74502f;background:#3a291b}
html[data-theme="dark"] .welcome-page-expire .welcome-note h2{color:#ffd0a7}
html[data-theme="dark"] .welcome-page-expire .welcome-note p{color:#e4c1a2}

/* Password reset */
.password-reset-note{margin-top:1.25rem;padding:1rem;border:1px solid var(--border-color,#d7dee5);border-radius:.75rem;background:rgba(127,127,127,.06);font-size:.94rem;line-height:1.55}
.password-reset-note p{margin:.25rem 0}.password-reset-note code{font-size:.88em}.password-help-line a.password-help-link{display:inline-block}

/* Patch integrasi laporan iuran Bendahara */
.candidate-card-option {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 1rem 0;
    padding: .9rem 1rem;
    border: 1px solid var(--border-color, #d7dee8);
    border-radius: 12px;
    background: var(--surface-soft, rgba(127,127,127,.06));
    cursor: pointer;
}
.candidate-card-option input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .15rem;
    flex: 0 0 auto;
}
.candidate-card-option span { line-height: 1.35; }
.candidate-card-option small,
.candidate-card-validity-field > small { display: block; margin-top: .3rem; opacity: .78; }
.candidate-card-validity-field[hidden] { display: none !important; }

/* Tautan WhatsApp pada card direktori anggota. */
.legacy-member-main .directory-wa-link {
    position: relative;
    z-index: 5;
    pointer-events: auto;
    display: inline-block;
    color: #128c4a;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

.legacy-member-main .directory-wa-link:hover,
.legacy-member-main .directory-wa-link:focus-visible {
    color: #075e54;
}

html[data-theme="dark"] .legacy-member-main .directory-wa-link {
    color: #6ee7a5 !important;
}