:root {
    --primary: #35A9DD;
    --primary-dark: #147BA8;
    --primary-soft: #E9F8FE;
    --bg: #F5FAFD;
    --card: #FFFFFF;
    --text: #1F2937;
    --muted: #6B7280;
    --border: #D8E9F0;
    --danger: #B91C1C;
    --danger-soft: #FEE2E2;
    --success: #047857;
    --success-soft: #D1FAE5;
    --warning: #92400E;
    --warning-soft: #FEF3C7;
    --shadow: 0 8px 26px rgba(15, 76, 129, 0.07);
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}
a { color: var(--primary-dark); text-decoration: none; }
.topbar {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    padding: 18px 16px;
}
.brand-title { font-weight: 800; font-size: 1.15rem; letter-spacing: .01em; }
.brand-subtitle { font-size: .9rem; opacity: .95; }
.nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 12px;
    background: white;
    border-bottom: 1px solid var(--border);
}
.nav a {
    white-space: nowrap;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--text);
    background: #EEF7FB;
    font-size: .92rem;
}
.nav a:hover { background: #E2F2F9; }
.container { max-width: 1080px; margin: 18px auto; padding: 0 14px; }
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin: 8px 0 14px;
}
.page-head h1 { margin-bottom: 4px; }
.page-subtitle { color: var(--muted); margin: 0; }
.section-title-row, .card-header-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}
.accent-card { border-left: 5px solid var(--primary); }
h1, h2, h3 { margin-top: 0; line-height: 1.2; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.28rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row { margin-bottom: 12px; }
.form-row-button { align-self: end; }
label { display: block; font-weight: 700; margin-bottom: 6px; }
input, select, textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font: inherit;
    background: white;
}
input[readonly] { background: #F8FAFC; color: var(--muted); }
input[type="checkbox"] { width: auto; padding: 0; border-radius: 4px; }
.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    cursor: pointer;
    margin-bottom: 8px;
}
.checkbox-label input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
.signer-name-preview { margin: 4px 0 0; }
textarea { min-height: 110px; }
button, .btn {
    display: inline-block;
    border: 0;
    border-radius: 10px;
    padding: 10px 14px;
    background: var(--primary-dark);
    color: white;
    font-weight: 800;
    cursor: pointer;
    text-align: center;
    line-height: 1.1;
}
button:hover, .btn:hover { filter: brightness(.97); }
.btn-secondary { background: #E5F4FA; color: var(--primary-dark); }
.btn-danger { background: var(--danger); color: white; }
.btn-success { background: var(--success); color: white; }
.btn-muted { background: #E5E7EB; color: #374151; }
.btn-linklike { background: #EEF7FB; color: var(--primary-dark); }
.actions, .action-row, .action-stack {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.action-row form, .action-stack form { margin: 0; }
.compact-actions .btn, .compact-actions button { padding: 8px 10px; font-size: .9rem; }
.action-group-title {
    font-weight: 800;
    color: var(--muted);
    font-size: .86rem;
    margin-top: 12px;
    margin-bottom: 6px;
}
.action-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.alert { padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; }
.alert-success { background: var(--success-soft); color: #065F46; }
.alert-error { background: var(--danger-soft); color: #991B1B; }
.alert-info { background: #DBEAFE; color: #1E3A8A; }
.status { font-weight: 800; padding: 8px 12px; border-radius: 999px; display: inline-block; }
.status-valid { background: var(--success-soft); color: var(--success); }
.status-revoked { background: var(--danger-soft); color: var(--danger); }
.status-reserved { background: var(--warning-soft); color: var(--warning); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: white; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: #EEF7FB; font-weight: 800; }
tr:hover td { background: #FBFEFF; }
.meta-row { border-bottom: 1px solid var(--border); padding: 10px 0; }
.meta-label { color: var(--muted); font-size: .88rem; }
.meta-value { font-weight: 600; }
.public-box { max-width: 620px; margin: 0 auto; }
.qr-block { text-align: center; border: 1px dashed var(--border); border-radius: 16px; padding: 14px; background: #FAFDFF; }
.qr-block img { width: 220px; max-width: 100%; height: auto; }
.code-big { font-size: 1.7rem; font-weight: 900; letter-spacing: 2px; margin-top: 8px; }
.code-inline { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.copy-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; }
.footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 30px 10px; }
.recaptcha { margin: 14px 0; }
.small { font-size: .88rem; color: var(--muted); }
.hidden { display:none; }
.count-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-weight: 800;
    white-space: nowrap;
}
.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1;
}
.badge-active, .badge-valid { background: var(--success-soft); color: var(--success); }
.badge-inactive, .badge-revoked { background: var(--danger-soft); color: var(--danger); }
.badge-neutral { background: #EEF7FB; color: var(--primary-dark); }
.details-box {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #FAFDFF;
    padding: 0;
    margin-top: 10px;
    overflow: hidden;
}
.details-box > summary {
    list-style: none;
    cursor: pointer;
    padding: 11px 12px;
    font-weight: 800;
    color: var(--primary-dark);
    background: #EEF7FB;
}
.details-box > summary::-webkit-details-marker { display: none; }
.details-box > summary::after { content: "▾"; float: right; color: var(--muted); }
.details-box[open] > summary::after { content: "▴"; }
.details-content { padding: 12px; }
.compact-form .form-row { margin-bottom: 10px; }
.mini-details { margin-top: 8px; }
.mini-details summary { cursor: pointer; color: var(--primary-dark); font-weight: 700; }
.inline-reset-form { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.inline-reset-form input { min-width: 210px; }
.list-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 4px;
}
.list-tabs a {
    padding: 8px 10px;
    border-radius: 999px;
    background: #EEF7FB;
    color: var(--primary-dark);
    font-weight: 800;
    font-size: .9rem;
}
.list-tabs a.active { background: var(--primary-dark); color: #fff; }
.empty-state {
    text-align: center;
    color: var(--muted);
    padding: 24px 12px;
    border: 1px dashed var(--border);
    border-radius: 14px;
    background: #FAFDFF;
}
.word-break { overflow-wrap: anywhere; }
.mobile-list { display: none !important; }
.mobile-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 5px 16px rgba(15, 76, 129, 0.04);
}
.mobile-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.item-card-title { font-weight: 800; font-size: 1.08rem; margin-bottom: 3px; overflow-wrap: anywhere; }
.item-card-subtitle { color: var(--muted); font-size: .92rem; margin-bottom: 10px; overflow-wrap: anywhere; }
.info-list { display: grid; gap: 8px; margin: 12px 0; }
.info-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; align-items: start; }
.info-label { color: var(--muted); font-size: .86rem; }
.info-value { font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 760px) {
    .topbar { padding: 14px 12px; }
    .brand-title { font-size: 1rem; }
    .brand-subtitle { font-size: .82rem; }
    .nav {
        padding: 8px 10px;
        gap: 7px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav::-webkit-scrollbar { display: none; }
    .nav a { font-size: .86rem; padding: 8px 9px; }
    .container { margin-top: 12px; padding: 0 10px; }
    .card { border-radius: 14px; padding: 14px; }
    .page-head { display: block; }
    .page-head .count-pill { margin-top: 8px; }
    h1 { font-size: 1.5rem; line-height: 1.2; }
    h2 { font-size: 1.15rem; }
    h3 { font-size: 1.02rem; }
    .form-grid { grid-template-columns: 1fr; }
    .desktop-table { display: none !important; }
    .mobile-list { display: block !important; }
    .info-item { grid-template-columns: 1fr; gap: 2px; }
    .action-stack { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .action-stack .btn, .action-stack button, .actions .btn, .actions button { width: 100%; }
    .actions { display: grid; grid-template-columns: 1fr; }
    .action-grid-3 { grid-template-columns: 1fr; }
    .inline-form { display: block; margin: 6px 0 0; }
    .inline-reset-form { display: grid; grid-template-columns: 1fr; }
    .inline-reset-form input, .inline-reset-form button { width: 100%; min-width: 0; }
    .list-tabs { display: grid; grid-template-columns: 1fr; }
    .list-tabs a { text-align: center; }
    button, .btn { min-height: 42px; }
}

/* v1.16: pastikan data tidak tampil dobel. Desktop memakai tabel, HP memakai kartu. */
.desktop-table { display: block !important; }
@media (max-width: 760px) {
    .desktop-table { display: none !important; }
    .mobile-list { display: block !important; }
}
@media (min-width: 761px) {
    .mobile-list { display: none !important; }
}

/* v1.17: gunakan satu sumber data saja, tanpa duplikasi tabel dan kartu. */
.mobile-list { display: none !important; }
.desktop-table { display: block !important; }

@media (max-width: 760px) {
    .desktop-table { display: block !important; }
    .desktop-table.table-wrap { overflow: visible; }
    .desktop-table table,
    .desktop-table tbody,
    .desktop-table tr,
    .desktop-table td {
        display: block;
        width: 100%;
    }
    .desktop-table thead { display: none; }
    .desktop-table tr {
        border: 1px solid var(--border);
        border-radius: 14px;
        background: #fff;
        padding: 12px;
        margin-bottom: 12px;
        box-shadow: 0 5px 16px rgba(15, 76, 129, 0.05);
    }
    .desktop-table td {
        border-bottom: 0;
        padding: 8px 0;
        background: transparent !important;
    }
    .desktop-table td::before {
        content: attr(data-label);
        display: block;
        color: var(--muted);
        font-size: .84rem;
        font-weight: 800;
        margin-bottom: 3px;
    }
    .desktop-table td[data-label="Aksi"] .action-row,
    .desktop-table td[data-label="Kelola List"] .action-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .desktop-table td[data-label="Aksi"] .btn,
    .desktop-table td[data-label="Aksi"] button,
    .desktop-table td[data-label="Kelola List"] .btn,
    .desktop-table td[data-label="Kelola List"] button {
        width: 100%;
    }
}

.danger-card { border-color: rgba(185, 28, 28, 0.35); }

/* v1.27: hide risky delete-account action behind a disclosure, similar to reset password */
.danger-details summary {
    color: var(--danger);
}
.danger-panel {
    margin-top: 8px;
    padding: 10px;
    border: 1px solid #FECACA;
    border-radius: 12px;
    background: var(--danger-soft);
}
.danger-panel .btn-danger {
    margin-top: 4px;
}


.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 12px 0 16px;
}
.pagination .btn {
    padding: 8px 11px;
    font-size: .9rem;
}
.pagination-current {
    background: var(--primary-dark);
    color: #fff;
}
.pagination .disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}
.pagination-ellipsis {
    color: var(--muted);
    padding: 8px 4px;
}
@media (max-width: 720px) {
    .pagination {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .pagination .btn {
        width: 100%;
    }
    .pagination-ellipsis {
        display: none;
    }
}


.history-box {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #FFFFFF;
    padding: 12px;
    margin-top: 10px;
}
.history-item {
    border-left: 4px solid var(--primary);
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--primary-soft);
    border-radius: 10px;
}
.history-item:last-child {
    margin-bottom: 0;
}
.history-title {
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 3px;
}
.history-time {
    color: var(--muted);
    font-size: .9rem;
    margin-bottom: 6px;
}
.history-desc {
    word-break: break-word;
}


.master-menu-card .card-header-row {
    margin-bottom: 10px;
}
.master-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.master-tab {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    background: #EEF7FB;
    border: 1px solid #D8E9F0;
    color: var(--text);
    transition: .15s ease;
}
.master-tab:hover {
    background: #E2F2F9;
    transform: translateY(-1px);
}
.master-tab.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary-dark);
    color: #fff;
}
.master-tab-title {
    display: block;
    font-weight: 800;
    line-height: 1.2;
}
.master-tab-desc {
    display: block;
    margin-top: 4px;
    font-size: .86rem;
    color: var(--muted);
}
.master-tab.active .master-tab-desc {
    color: rgba(255,255,255,.88);
}
@media (max-width: 760px) {
    .master-tabs {
        grid-template-columns: 1fr;
    }
    .master-tab {
        padding: 13px 14px;
    }
}


/* v1.49: active top menu and account status pill */
.nav {
    align-items: center;
    justify-content: space-between;
}
.nav-links {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nav-links::-webkit-scrollbar {
    display: none;
}
.nav a.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-weight: 800;
}
.account-pill {
    margin-left: auto;
    white-space: nowrap;
    padding: 8px 12px;
    border-radius: 999px;
    background: #E5F4FA;
    color: var(--primary-dark);
    border: 1px solid #D8E9F0;
    font-weight: 800;
    font-size: .88rem;
}
@media (max-width: 760px) {
    .nav {
        align-items: flex-start;
        gap: 8px;
    }
    .nav-links {
        flex: 1 1 auto;
        max-width: calc(100% - 132px);
    }
    .account-pill {
        flex: 0 0 auto;
        font-size: .78rem;
        padding: 8px 10px;
    }
}


/* v1.50: active top menu and colored account status */
.nav {
    align-items: center;
    justify-content: space-between;
}
.nav-links {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nav-links::-webkit-scrollbar {
    display: none;
}
.nav a.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #fff !important;
    font-weight: 800;
}
.account-pill {
    margin-left: auto;
    white-space: nowrap;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 800;
    font-size: .88rem;
}
.account-pill.account-admin {
    background: #FEE2E2;
    color: #991B1B;
    border-color: #FECACA;
}
.account-pill.account-signer {
    background: #DCFCE7;
    color: #166534;
    border-color: #BBF7D0;
}
@media (max-width: 760px) {
    .nav {
        align-items: flex-start;
        gap: 8px;
    }
    .nav-links {
        flex: 1 1 auto;
        max-width: calc(100% - 132px);
    }
    .account-pill {
        flex: 0 0 auto;
        font-size: .78rem;
        padding: 8px 10px;
    }
}


/* v1.51: compact QR action buttons and green save-valid button */
.btn-sm,
button.btn-sm,
a.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px !important;
    font-size: .9rem;
    line-height: 1.2;
}
.btn-success,
button.btn-success,
a.btn-success {
    background: #16A34A !important;
    color: #FFFFFF !important;
}
.btn-success:hover,
button.btn-success:hover,
a.btn-success:hover {
    background: #15803D !important;
}


/* v1.52: uniform action buttons in generated QR section */
.action-btn-uniform,
button.action-btn-uniform,
a.action-btn-uniform {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    text-decoration: none !important;
}
button.action-btn-uniform {
    border: 0 !important;
}
.btn-success,
button.btn-success,
a.btn-success {
    background: #16A34A !important;
    color: #FFFFFF !important;
}
.btn-success:hover,
button.btn-success:hover,
a.btn-success:hover {
    background: #15803D !important;
}
.generated-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.generated-actions + .generated-actions {
    margin-top: 8px;
}
@media (max-width: 760px) {
    .generated-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .generated-actions .action-btn-uniform {
        width: 100% !important;
    }
}


/* v1.53: equal-width action buttons in generated QR section */
.generated-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.generated-actions + .generated-actions {
    margin-top: 8px;
}
.action-btn-uniform,
button.action-btn-uniform,
a.action-btn-uniform {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 185px !important;
    min-width: 185px !important;
    max-width: 185px !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    text-decoration: none !important;
    text-align: center !important;
    white-space: nowrap !important;
}
button.action-btn-uniform {
    border: 0 !important;
}
.btn-success,
button.btn-success,
a.btn-success {
    background: #16A34A !important;
    color: #FFFFFF !important;
}
.btn-success:hover,
button.btn-success:hover,
a.btn-success:hover {
    background: #15803D !important;
}
@media (max-width: 760px) {
    .generated-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .generated-actions .action-btn-uniform {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}


/* v1.54: exact generated QR buttons equal width */
.generated-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.generated-actions + .generated-actions {
    margin-top: 8px !important;
}
.generated-actions .action-btn-uniform,
.generated-actions a.action-btn-uniform,
.generated-actions button.action-btn-uniform {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 185px !important;
    min-width: 185px !important;
    max-width: 185px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
.generated-actions button.action-btn-uniform {
    border: 0 !important;
}
.generated-actions .btn-success,
.generated-actions button.btn-success,
.generated-actions a.btn-success {
    background: #16A34A !important;
    color: #FFFFFF !important;
}
.generated-actions .btn-success:hover,
.generated-actions button.btn-success:hover,
.generated-actions a.btn-success:hover {
    background: #15803D !important;
}
@media (max-width: 760px) {
    .generated-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
    .generated-actions .action-btn-uniform {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}


/* v1.55: inline button fix companion */
.generated-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.generated-actions + .generated-actions {
    margin-top: 8px !important;
}
@media (max-width: 760px) {
    .generated-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
    .generated-actions .action-btn-uniform {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}


/* v1.56: generated action buttons match Generate Kode button size */
.generated-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.generated-actions + .generated-actions {
    margin-top: 8px !important;
}
.action-btn-generate-size,
button.action-btn-generate-size,
a.action-btn-generate-size {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: .92rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: 0 !important;
}
@media (max-width: 760px) {
    .generated-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
    .generated-actions .action-btn-generate-size {
        width: 100% !important;
    }
}


/* v1.57: public signature history cards */
.signature-history-section {
    margin-top: 12px;
}
.signature-history-box {
    border: 1px solid #D8E9F0;
    border-radius: 14px;
    background: #FFFFFF;
    padding: 12px;
    margin-top: 10px;
}
.signature-history-item {
    border: 1px solid #D8E9F0;
    border-left: 6px solid #147BA8;
    border-radius: 12px;
    background: #F8FCFE;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.signature-history-item:last-child {
    margin-bottom: 0;
}
.signature-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.signature-history-title {
    font-weight: 900;
    color: #111827;
    font-size: 1rem;
}
.signature-history-time {
    color: #6B7280;
    font-size: .88rem;
    white-space: nowrap;
}
.signature-history-desc {
    border-top: 1px solid #E5EEF3;
    padding-top: 8px;
    color: #1F2937;
    line-height: 1.55;
    word-break: break-word;
}
.signature-history-created {
    border-left-color: #16A34A;
    background: #F0FDF4;
}
.signature-history-edit {
    border-left-color: #D97706;
    background: #FFFBEB;
}
.signature-history-revoke {
    border-left-color: #DC2626;
    background: #FEF2F2;
}
.signature-history-unrevoke {
    border-left-color: #147BA8;
    background: #F0F9FF;
}
.signature-history-empty {
    border: 1px dashed #D8E9F0;
    border-radius: 12px;
    padding: 12px;
    color: #6B7280;
    background: #FAFDFF;
}
@media (max-width: 760px) {
    .signature-history-head {
        display: block;
    }
    .signature-history-time {
        margin-top: 3px;
        white-space: normal;
    }
}


/* v1.59: public verification buttons match document_create Generate Kode size */
.public-action-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.public-action-row + .public-action-row {
    margin-top: 8px !important;
}
.public-action-btn,
button.public-action-btn,
a.public-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: .92rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: 0 !important;
    background: #147BA8 !important;
    color: #FFFFFF !important;
}
.public-action-btn:hover,
button.public-action-btn:hover,
a.public-action-btn:hover {
    background: #0F6D96 !important;
    color: #FFFFFF !important;
}
@media (max-width: 760px) {
    .public-action-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
    .public-action-row .public-action-btn {
        width: 100% !important;
    }
}


/* v1.60: admin maintenance page */
.maintenance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.maintenance-card {
    padding: 16px;
}
.maintenance-number {
    font-size: 2rem;
    line-height: 1;
    font-weight: 900;
    color: var(--primary-dark);
    margin-bottom: 8px;
}
.maintenance-label {
    color: var(--muted);
    line-height: 1.45;
}
.maintenance-warning {
    border-left: 6px solid var(--warning);
}
.maintenance-list {
    margin: 8px 0 0 18px;
    padding: 0;
}
.maintenance-list li {
    margin: 6px 0;
}
@media (max-width: 900px) {
    .maintenance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .maintenance-grid {
        grid-template-columns: 1fr;
    }
}