.accessibility-panel {
    max-width: 360px;
}

.accessibility-header {
    background: #005bbb; /* blue header */
}

.profile-pill {
    background-color: #f5f5f5;
    border-radius: 999px;
    padding-inline: 14px;
    color: #333;
    border: 1px solid #ddd;
}
.profile-pill-active {
    background-color: #005bbb;
    color: #fff;
    border-color: #005bbb;
}

.accessibility-grid {
    margin-top: 8px;
}

.accessibility-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    padding: 10px 4px;
    cursor: pointer;
    text-align: center;
    background-color: #f9f9f9;
}
.accessibility-item .accessibility-icon {
    font-size: 22px;
    margin-bottom: 4px;
    color: #005bbb;
}
.accessibility-item .accessibility-label {
    font-size: 12px;
    line-height: 1.2;
}

/* selected state */
.accessibility-item input:checked + .accessibility-icon,
.accessibility-item input:checked ~ .accessibility-label {
    /* not used because input is before icon; we’ll handle via JS class */
}

.accessibility-item.active {
    background-color: #e6f2ff;
    border-color: #005bbb;
}

/* body classes for actual effects */
.a11y-high-contrast {
    background-color: #000 !important;
    color: #fff !important;
}
.a11y-high-contrast a {
    color: #0ff !important;
}
.a11y-low-saturation {
    filter: grayscale(80%);
}
.a11y-bigger-text {
    font-size: 110%;
}
.a11y-text-spacing p,
.a11y-text-spacing li {
    line-height: 1.8;
    letter-spacing: 0.06em;
}
.a11y-links-highlight a {
    text-decoration: underline !important;
    font-weight: 600;
}
.a11y-big-cursor {
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFklEQVQYV2NkYGD4z0AEYBxVSFQAAAwAAeYBf8sAAAAASUVORK5CYII='), auto;
}

/* Profile pill container */
.profile-box {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    border: 1px solid #dcdcdc;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s ease;
    text-align: center;
    padding: 8px 4px;
}

/* Icon */
.profile-box .profile-icon {
    font-size: 24px;
    color: #005bbb;
    margin-bottom: 4px;
}

/* Label */
.profile-box .profile-text {
    font-size: 12px;
    font-weight: 500;
    color: #333;
}

/* Active state */
.profile-box-active {
    border-color: #005bbb;
    background: #e6f2ff;
}

/* Hover effect */
.profile-box:hover {
    border-color: #005bbb;
}

.a11y-btn-pill {
    border-radius: 50px !important;
    padding: 10px 20px !important;
    font-weight: 600;
    font-size: 14px;
}