.credential-secret-actions,
.custom-secret-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.secret-display-toggle {
    min-height: 32px;
    border: 1px solid var(--border);
    background: var(--panel-soft);
    color: var(--muted);
    border-radius: 9px;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.secret-display-toggle.visible {
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.credential-secret-copy {
    min-width: 34px;
    height: 32px;
    padding: 0 8px;
}

.custom-data-root {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.custom-data-global-actions {
    display: flex;
    justify-content: flex-end;
}

.custom-data-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.custom-data-entry-panel {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel-soft);
}

.custom-data-entry-form {
    display: grid;
    gap: 12px;
}

.custom-entry-fields {
    display: grid;
    gap: 8px;
}

.custom-data-entry-topline {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
    gap: 12px;
}

.custom-entry-field {
    display: grid;
    gap: 6px;
}

.custom-entry-field > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.custom-entry-field input + input {
    margin-top: 6px;
}

.custom-data-template-sections {
    display: grid;
    gap: 12px;
}

.custom-data-template-section {
    margin: 0;
}

.custom-data-template-head {
    margin-bottom: 14px;
}

.custom-data-template-head .section-title-with-icon {
    margin-bottom: 0;
}

.custom-data-template-head h2 {
    margin-bottom: 3px;
}

.custom-data-template-head p {
    margin: 0;
}

.custom-data-view-switch {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--panel-soft);
}

.custom-data-view-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    padding: 5px 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: none;
}

.custom-data-view-button:hover {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--text);
}

.custom-data-view-button.active {
    background: var(--primary);
    color: #fff;
}

.custom-data-view {
    display: none;
}

.custom-data-template-section[data-custom-view="cards"] .custom-data-card-view {
    display: block;
}

.custom-data-template-section[data-custom-view="table"] .custom-data-table-view {
    display: block;
}

.custom-data-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
}

.custom-data-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel-soft);
    overflow: hidden;
}

.custom-data-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.custom-data-card-head h3 {
    margin: 0;
    font-size: 16px;
}

.custom-data-kv {
    padding: 0 16px;
}

.custom-data-kv-row {
    display: grid;
    grid-template-columns: minmax(120px, 34%) 1fr;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
    align-items: center;
}

.custom-data-kv-row:last-child {
    border-bottom: 0;
}

.custom-data-kv-row > strong {
    color: var(--muted);
    font-size: 12px;
}

.custom-data-kv-row a,
.custom-data-table a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.custom-data-copyable {
    cursor: copy;
    overflow-wrap: anywhere;
}


.custom-data-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel-soft);
}

.custom-data-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    border-spacing: 0;
}

.custom-data-table th,
.custom-data-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.custom-data-table th {
    background: color-mix(in srgb, var(--panel-soft) 86%, var(--primary) 4%);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .03em;
    white-space: nowrap;
}

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

.custom-data-table tbody tr:hover td {
    background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.custom-data-table td {
    font-size: 13px;
}

.custom-data-table-title {
    min-width: 170px;
}

.custom-data-table-title strong {
    color: var(--text);
    font-size: 13px;
}

.custom-data-table-action-col {
    width: 46px;
    min-width: 46px;
    text-align: right !important;
}

.custom-data-delete-form {
    margin: 0;
}

.custom-data-empty-state {
    padding: 8px 0;
}

.muted-value {
    color: var(--muted);
}

@media (max-width: 760px) {
    .secret-display-toggle,
    .credential-secret-copy {
        min-height: 44px;
    }

    .custom-data-global-actions {
        width: 100%;
    }

    .custom-data-global-actions > button {
        width: 100%;
    }

    .custom-data-head-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .custom-data-head-actions > button {
        min-height: 44px;
    }

    .custom-data-view-switch {
        width: 100%;
    }

    .custom-data-view-button {
        flex: 1 1 0;
        min-height: 38px;
    }

    .custom-data-entry-topline,
    .custom-data-kv-row {
        grid-template-columns: 1fr;
    }

    .custom-data-list {
        grid-template-columns: 1fr;
    }

    .custom-data-kv-row {
        gap: 4px;
    }

    .custom-data-table-wrap {
        border-radius: 12px;
        -webkit-overflow-scrolling: touch;
    }

    .custom-data-table {
        min-width: 680px;
    }

    .custom-data-table th,
    .custom-data-table td {
        padding: 10px 11px;
    }
}

@media (max-width: 430px) {
    .custom-data-head-actions {
        grid-template-columns: 1fr;
    }

    .custom-data-head-actions > button {
        width: 100%;
    }
}