:root {
    /* Brand — indigo */
    --accent:        #4f46e5;
    --accent-border: #4338ca;
    --accent-ink:    #ffffff;
    --accent-ring:   rgba(79, 70, 229, 0.2);

    /* Surfaces — cool slate */
    --bg:           #f0f2f8;
    --surface:      #ffffff;
    --surface-soft: #e8eaf4;
    --input-bg:     #f8f9fc;

    /* Strokes & type */
    --border:   #d0d4e4;
    --ink:      #1a1d2e;
    --muted:    #5f6478;

    /* Semantic */
    --danger:   #b42318;
    --positive: #0e7459;
}

.guide-admin-panel-heading {
    padding: 18px;
}

.guide-admin-panel-heading h2 {
    margin-bottom: 4px;
}

.guide-admin-contacts {
    margin-top: 22px;
}

.admin-users-overview {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 18px;
}

.admin-users-stat {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    padding: 18px;
    text-decoration: none;
}

.admin-users-stat.is-active {
    border-color: var(--accent-border);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.admin-users-stat span {
    color: var(--muted);
    font-weight: 700;
}

.admin-users-stat strong {
    font-size: 1.75rem;
}

.admin-users-filter {
    margin-bottom: 0;
}

.admin-user-subscription {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
}

.admin-user-account-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 20px;
}

.admin-user-account-grid div {
    min-width: 0;
}

.admin-user-account-grid dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.admin-user-account-grid dd {
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere;
}

.admin-user-edit-form {
    margin-top: 20px;
}

.admin-user-edit-form > form {
    padding: 20px;
}

.admin-user-edit-heading {
    margin-bottom: 0;
}

.admin-user-edit-heading h2,
.admin-user-danger-zone h2 {
    margin: 0 0 5px;
}

.admin-user-edit-heading p,
.admin-user-danger-zone p {
    color: var(--muted);
    margin: 0;
}

.admin-user-danger-zone {
    align-items: center;
    border-color: var(--danger);
    display: flex;
    justify-content: space-between;
    padding: 18px 20px;
}

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

    .admin-user-account-grid {
        grid-template-columns: 1fr;
    }

    .admin-user-danger-zone {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }
}