/* Modules communautaires Webtoons — chargé après le socle UnivActif. */
.blackclover-community-page,
.blackclover-app:has(.member-report-panel),
.blackclover-app:has(.profile-report-page-panel) {
    --community-bg: #010a08;
    --community-panel: rgba(3, 22, 17, .96);
    --community-panel-soft: rgba(6, 34, 26, .9);
    --community-line: rgba(0, 220, 140, .3);
    --community-line-strong: rgba(137, 243, 189, .68);
    --community-gold: #00dc8c;
    --community-gold-light: #89f3bd;
    --community-green: #246b46;
    --community-green-light: #62bf83;
    --community-ink: #f8f2e7;
    --community-muted: rgba(226, 236, 229, .7);
    background:
        radial-gradient(circle at 15% 12%, rgba(30, 126, 76, .25), transparent 28rem),
        radial-gradient(circle at 88% 35%, rgba(0, 220, 140, .1), transparent 25rem),
        linear-gradient(180deg, #010806, #02150f 55%, #010806);
    color: var(--community-ink);
}

.blackclover-community-page::after,
.blackclover-app:has(.member-report-panel)::after,
.blackclover-app:has(.profile-report-page-panel)::after {
    position: fixed;
    inset: 76px 0 0;
    z-index: -1;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle at 6px 18px, rgba(74, 164, 102, .11) 0 8px, transparent 9px),
        radial-gradient(circle at 19px 18px, rgba(74, 164, 102, .09) 0 8px, transparent 9px),
        radial-gradient(circle at 12px 7px, rgba(74, 164, 102, .08) 0 8px, transparent 9px),
        linear-gradient(35deg, transparent 0 25px, rgba(0, 220, 140, .06) 26px 29px, transparent 30px);
    background-size: 230px 250px;
    opacity: .5;
    mask-image: linear-gradient(90deg, #000, transparent 40%, transparent 60%, #000);
}

.blackclover-community-page .workspace,
.blackclover-app:has(.member-report-panel) .workspace,
.blackclover-app:has(.profile-report-page-panel) .workspace {
    width: min(1180px, calc(100% - 40px));
    gap: 22px;
    padding-block: 30px 58px;
}

/* En-têtes illustrés : messagerie, réglages, notifications et signalements. */
.blackclover-community-page .messages-hero,
.blackclover-community-page .profile-edit-header,
.blackclover-app:has(.member-report-panel) .profile-edit-header,
.blackclover-app:has(.profile-report-page-panel) .profile-edit-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 224px;
    border: 1px solid var(--community-line-strong);
    border-radius: 12px;
    padding: clamp(28px, 5vw, 52px);
    background:
        linear-gradient(90deg, rgba(1, 11, 8, .98) 0%, rgba(3, 31, 22, .92) 47%, rgba(3, 24, 18, .45) 100%),
        url("/assets/images/webtoon-hero.png") center 48% / cover;
    box-shadow:
        0 26px 65px rgba(0, 0, 0, .42),
        inset 0 0 0 1px rgba(255, 255, 255, .035);
}

.blackclover-community-page .messages-hero {
    min-height: 285px;
    background:
        linear-gradient(90deg, rgba(1, 11, 8, .99) 0%, rgba(2, 25, 18, .91) 42%, rgba(2, 17, 13, .26) 72%),
        linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .5)),
        url("/assets/images/webtoon-hero.png") center / cover;
}

.blackclover-community-page .messages-hero::before,
.blackclover-community-page .profile-edit-header::before,
.blackclover-app:has(.member-report-panel) .profile-edit-header::before,
.blackclover-app:has(.profile-report-page-panel) .profile-edit-header::before {
    position: absolute;
    inset: 10px;
    z-index: -1;
    border: 1px solid rgba(137, 243, 189, .2);
    border-radius: 8px;
    content: "";
    pointer-events: none;
}

.blackclover-community-page .messages-hero::after,
.blackclover-community-page .profile-edit-header::after,
.blackclover-app:has(.member-report-panel) .profile-edit-header::after,
.blackclover-app:has(.profile-report-page-panel) .profile-edit-header::after {
    position: absolute;
    right: clamp(20px, 4vw, 46px);
    bottom: 20px;
    z-index: -1;
    width: 110px;
    height: 110px;
    border: 1px solid rgba(137, 243, 189, .34);
    border-radius: 50%;
    content: "\e139";
    display: grid;
    place-items: center;
    background: repeating-conic-gradient(from 15deg, rgba(0, 220, 140, .12) 0 5deg, transparent 5deg 22deg);
    color: rgba(137, 243, 189, .55);
    font-family: "Font Awesome 6 Free";
    font-size: 39px;
    font-weight: 900;
    box-shadow: 0 0 0 12px rgba(0, 220, 140, .035);
}

.blackclover-community-page .profile-edit-header > div,
.blackclover-app:has(.member-report-panel) .profile-edit-header > div,
.blackclover-app:has(.profile-report-page-panel) .profile-edit-header > div {
    position: relative;
    z-index: 2;
}

.blackclover-community-page .profile-edit-header h1,
.blackclover-app:has(.member-report-panel) .profile-edit-header h1,
.blackclover-app:has(.profile-report-page-panel) .profile-edit-header h1,
.blackclover-community-page .messages-hero h1 {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 850;
    line-height: 1.02;
    text-shadow: 0 3px 24px rgba(0, 0, 0, .55);
}

.blackclover-community-page .profile-edit-header span,
.blackclover-app:has(.member-report-panel) .profile-edit-header span,
.blackclover-app:has(.profile-report-page-panel) .profile-edit-header span,
.blackclover-community-page .messages-hero .eyebrow {
    color: var(--community-gold-light);
    letter-spacing: .1em;
}

.blackclover-community-page .breadcrumb-nav,
.blackclover-community-page .breadcrumb-nav span,
.blackclover-app:has(.member-report-panel) .breadcrumb-nav,
.blackclover-app:has(.profile-report-page-panel) .breadcrumb-nav { color: rgba(248, 242, 231, .65); }
.blackclover-community-page .breadcrumb-nav a,
.blackclover-app:has(.member-report-panel) .breadcrumb-nav a,
.blackclover-app:has(.profile-report-page-panel) .breadcrumb-nav a { color: var(--community-gold-light); }

/* Profil membre : véritable carte de chevalier-mage. */
.bc-member-profile-page .profile-hero-card {
    position: relative;
    border: 1px solid var(--community-line-strong);
    border-radius: 12px;
    background: var(--community-panel);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .42);
}

.bc-member-profile-page .profile-hero-card::before,
.blackclover-community-page .profile-panel::before,
.blackclover-app:has(.member-report-panel) .profile-panel::before,
.blackclover-app:has(.profile-report-page-panel) .profile-panel::before {
    position: absolute;
    top: -1px;
    left: 20px;
    width: 84px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--community-gold-light), transparent);
}

.bc-member-profile-page .profile-hero-cover {
    min-height: 270px;
    background-image:
        linear-gradient(90deg, rgba(1, 10, 8, .95), rgba(2, 23, 16, .48) 46%, rgba(1, 9, 7, .16)),
        linear-gradient(180deg, transparent 52%, rgba(1, 10, 8, .82)),
        var(--profile-cover-image, url("/assets/images/webtoon-hero.png"));
    background-position: center;
    background-size: cover;
}

.bc-member-profile-page .profile-hero-main {
    border-top: 1px solid rgba(0, 220, 140, .22);
    padding: 0 30px 20px;
    background:
        radial-gradient(circle at 78% 0, rgba(36, 107, 70, .2), transparent 32%),
        linear-gradient(180deg, rgba(5, 31, 23, .98), rgba(2, 19, 14, .98));
}

.bc-member-profile-page .profile-portrait-large {
    border-color: #0a3022;
    outline: 2px solid rgba(137, 243, 189, .48);
    outline-offset: 4px;
    background: linear-gradient(135deg, var(--community-green), #8b6926);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .55);
}

.bc-member-profile-page .profile-hero-identity h1,
.bc-member-profile-page .profile-hero-identity h1.role-member { color: #fff; }
.bc-member-profile-page .profile-hero-identity p { color: var(--community-muted); }

.bc-member-profile-page .profile-cover-badges span {
    border: 1px solid rgba(137, 243, 189, .34);
    background: rgba(2, 18, 13, .78);
    color: var(--community-ink);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
}

.bc-member-profile-page .profile-stat-strip-wide {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-color: var(--community-line);
    background: linear-gradient(90deg, rgba(3, 27, 20, .98), rgba(6, 37, 27, .92), rgba(3, 27, 20, .98));
}

.bc-member-profile-page .profile-stat-strip-wide article {
    min-width: 0;
    border-color: rgba(0, 220, 140, .16);
    background: rgba(255, 255, 255, .012);
}

.bc-member-profile-page .profile-stat-strip-wide article > i {
    border: 1px solid rgba(137, 243, 189, .2);
    background: rgba(0, 220, 140, .12);
    color: var(--community-gold-light);
}

.bc-member-profile-page .profile-stat-strip-wide article:nth-child(2) > i,
.bc-member-profile-page .profile-stat-strip-wide article:nth-child(5) > i {
    border-color: rgba(98, 191, 131, .25);
    background: rgba(36, 107, 70, .22);
    color: #79d39a;
}

.bc-member-profile-page .profile-stat-strip-wide article:nth-child(3) > i {
    border-color: rgba(143, 208, 165, .24);
    background: rgba(60, 133, 87, .18);
    color: #a2dfb7;
}

.bc-member-profile-page .profile-stat-strip-wide article:nth-child(4) > i {
    border-color: rgba(0, 220, 140, .28);
    background: rgba(139, 105, 38, .22);
    color: #efc86e;
}

.bc-member-profile-page .profile-stat-strip-wide article strong {
    color: var(--community-gold-light);
    font-size: 23px;
    font-weight: 900;
}

.bc-member-profile-page .profile-stat-strip-wide article span {
    color: rgba(226, 236, 229, .74);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .045em;
}

.bc-member-profile-page .profile-tabs {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    border: 1px solid var(--community-line);
    border-radius: 10px;
    background: rgba(2, 20, 15, .96);
    scrollbar-width: thin;
    scrollbar-color: var(--community-gold) transparent;
}

.bc-member-profile-page .profile-tabs a {
    position: relative;
    width: 100%;
    min-width: 0;
    justify-content: center;
    min-height: 56px;
    border-right: 1px solid rgba(0, 220, 140, .12);
    padding-inline: 10px;
    color: var(--community-muted);
    text-align: center;
}

.bc-member-profile-page .profile-tabs a:last-child { border-right: 0; }
.bc-member-profile-page .profile-tabs a.is-active { border-bottom-color: var(--community-gold); background: linear-gradient(180deg, rgba(0, 220, 140, .12), transparent); color: var(--community-gold-light); }

/* Panneaux façon pages de grimoire. */
.blackclover-community-page .profile-panel,
.blackclover-community-page .message-inbox-panel,
.blackclover-community-page .message-conversation-shell,
.blackclover-community-page .message-compose-form,
.blackclover-community-page .message-recipient-card,
.blackclover-community-page .message-report-preview,
.blackclover-community-page .message-report-panel,
.blackclover-app:has(.member-report-panel) .profile-panel,
.blackclover-app:has(.profile-report-page-panel) .profile-panel {
    position: relative;
    border: 1px solid var(--community-line);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .025), transparent 38%),
        radial-gradient(circle at 100% 0, rgba(36, 107, 70, .14), transparent 30%),
        var(--community-panel);
    color: var(--community-ink);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .3);
}

.blackclover-community-page .section-title,
.blackclover-app:has(.member-report-panel) .section-title,
.blackclover-app:has(.profile-report-page-panel) .section-title {
    border-color: rgba(0, 220, 140, .18);
}

.blackclover-community-page .section-title h2,
.blackclover-app:has(.member-report-panel) .section-title h2,
.blackclover-app:has(.profile-report-page-panel) .section-title h2 { color: #fff; }

.blackclover-community-page .section-title h2::before,
.blackclover-app:has(.member-report-panel) .section-title h2::before,
.blackclover-app:has(.profile-report-page-panel) .section-title h2::before {
    margin-right: 9px;
    color: var(--community-gold-light);
    content: "\e139";
    font-family: "Font Awesome 6 Free";
    font-size: .72em;
    font-weight: 900;
}

.bc-member-profile-page .profile-about-box,
.bc-member-profile-page .profile-section-summary-group,
.bc-member-profile-page .profile-post-card,
.bc-member-profile-page .profile-social-card,
.bc-member-profile-page .profile-badge-grid article,
.bc-member-profile-page .profile-link-showcase a {
    border-color: rgba(0, 220, 140, .2);
    background: rgba(255, 255, 255, .032);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.bc-member-profile-page .profile-about-box > span,
.bc-member-profile-page .profile-section-summary-group h3 i,
.bc-member-profile-page .profile-about-info-list i,
.bc-member-profile-page .profile-small-link { color: var(--community-gold-light); }
.bc-member-profile-page .profile-section-summary-group h3 i { background: rgba(0, 220, 140, .1); }
.bc-member-profile-page .profile-about-info-list,
.bc-member-profile-page .profile-section-summary-group p,
.bc-member-profile-page .profile-section-summary-group ul,
.bc-member-profile-page .profile-post-card p { color: var(--community-muted); }

/* Les styles historiques d'UnivActif imposaient encore du texte noir et des
   boutons blancs dans les résumés du profil. Ces règles restent volontairement
   spécifiques à la page membre afin de préserver les autres modules. */
.bc-member-profile-page .profile-section-summary-group h3 {
    color: var(--community-ink);
}

.bc-member-profile-page .profile-section-summary-group strong {
    color: var(--community-gold-light);
}

.bc-member-profile-page .profile-section-summary-group p a,
.bc-member-profile-page .profile-section-summary-group li a:not(.profile-count-link) {
    color: var(--community-gold-light);
}

.bc-member-profile-page .profile-count-link {
    border: 1px solid rgba(0, 220, 140, .38);
    background: linear-gradient(135deg, rgba(0, 220, 140, .16), rgba(36, 107, 70, .2));
    color: var(--community-gold-light) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.bc-member-profile-page .profile-count-link:hover,
.bc-member-profile-page .profile-count-link:focus-visible {
    border-color: var(--community-gold-light);
    background: var(--community-gold);
    color: #07150f !important;
}

/* Messagerie : courriers scellés du royaume. */
.bc-messages-page .messages-hero > div:first-child { position: relative; z-index: 2; max-width: 670px; }
.bc-messages-page .messages-hero-visual,
.bc-messages-page .messages-hero-recipient {
    position: relative;
    z-index: 2;
    border: 1px solid rgba(137, 243, 189, .42);
    background: rgba(2, 18, 13, .78);
    color: #fff;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .38);
}

.bc-messages-page .messages-hero-icon {
    border: 1px solid rgba(137, 243, 189, .36);
    background: radial-gradient(circle, rgba(0, 220, 140, .2), rgba(36, 107, 70, .2));
    color: var(--community-gold-light);
}

.bc-messages-page .message-inbox-panel > .section-title,
.bc-messages-page .message-conversation-head,
.bc-messages-page .message-reply-form {
    border-color: var(--community-line);
    background: linear-gradient(90deg, rgba(5, 35, 25, .98), rgba(2, 20, 15, .98));
}

.bc-messages-page .message-thread-row { border-color: rgba(0, 220, 140, .13); }
.bc-messages-page .message-thread-card { color: var(--community-ink); transition: background .18s ease, box-shadow .18s ease; }
.bc-messages-page .message-thread-card:hover { background: rgba(36, 107, 70, .13); box-shadow: inset 4px 0 var(--community-green-light); }
.bc-messages-page .message-thread-card.is-unread { border-left-color: var(--community-gold); background: linear-gradient(90deg, rgba(0, 220, 140, .12), rgba(36, 107, 70, .04)); }
.bc-messages-page .message-thread-title strong { color: #fff; }
.bc-messages-page .message-thread-title small,
.bc-messages-page .message-thread-preview { color: var(--community-muted); }
.bc-messages-page .message-unread-pill { border: 1px solid rgba(137, 243, 189, .25); background: rgba(0, 220, 140, .14); color: var(--community-gold-light); }

.bc-messages-page .message-search-form,
.bc-messages-page .message-search-form > div {
    border-color: rgba(0, 220, 140, .18);
    background: rgba(1, 15, 11, .82);
}

.bc-messages-page .message-search-form input { background: transparent; color: #fff; }
.bc-messages-page .message-search-form input::placeholder { color: rgba(226, 236, 229, .46); }

.bc-messages-page .message-bubble-list {
    background:
        linear-gradient(rgba(1, 12, 9, .84), rgba(1, 12, 9, .9)),
        url("/assets/images/webtoon-hero.png") center / cover;
}

.bc-messages-page .message-bubble {
    border-color: rgba(0, 220, 140, .22);
    background: rgba(5, 31, 23, .96);
    color: #edf3ef;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .3);
}

.bc-messages-page .message-bubble-row.is-own .message-bubble {
    border-color: rgba(137, 243, 189, .48);
    background: linear-gradient(135deg, rgba(18, 79, 51, .96), rgba(63, 56, 25, .95));
}

.bc-messages-page .message-bubble-footer small { color: rgba(226, 236, 229, .65); }
.bc-messages-page .private-message-report-link { color: var(--community-gold-light); }

/* Notifications et signalements. */
.bc-notification-page .notification-filters,
.blackclover-app:has(.member-report-panel) .member-report-item,
.blackclover-app:has(.profile-report-page-panel) .member-reported-post,
.blackclover-app:has(.profile-report-page-panel) .member-report-meta div {
    border-color: rgba(0, 220, 140, .2);
    background: rgba(1, 15, 11, .7);
}

.bc-notification-page .notification-item {
    border-color: rgba(0, 220, 140, .18);
    background: rgba(255, 255, 255, .028);
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.bc-notification-page .notification-item:hover { border-color: rgba(0, 220, 140, .4); background: rgba(36, 107, 70, .1); transform: translateY(-1px); }
.bc-notification-page .notification-item.is-unread { border-color: rgba(137, 243, 189, .46); background: linear-gradient(90deg, rgba(0, 220, 140, .12), rgba(36, 107, 70, .05)); }
.bc-notification-page .notification-item-icon { border: 1px solid rgba(137, 243, 189, .22); background: rgba(0, 220, 140, .12); color: var(--community-gold-light); }
.bc-notification-page .notification-item h3 { color: #fff; }
.bc-notification-page .notification-item-body,
.bc-notification-page .notification-item-body p { color: var(--community-muted); }

.blackclover-app:has(.member-report-panel) .member-report-status,
.blackclover-app:has(.profile-report-page-panel) .member-report-status,
.blackclover-app:has(.member-report-panel) .member-report-summary-label {
    border: 1px solid rgba(137, 243, 189, .24);
    background: rgba(0, 220, 140, .13);
    color: var(--community-gold-light);
}

.blackclover-app:has(.member-report-panel) .member-report-item strong,
.blackclover-app:has(.profile-report-page-panel) .member-reported-post strong,
.blackclover-app:has(.profile-report-page-panel) .member-report-block h2 { color: #fff; }
.blackclover-app:has(.member-report-panel) .member-report-item p,
.blackclover-app:has(.profile-report-page-panel) .member-report-block p { color: var(--community-muted); }

/* Formulaires et actions communs. */
.blackclover-community-page input,
.blackclover-community-page select,
.blackclover-community-page textarea,
.blackclover-app:has(.profile-report-page-panel) textarea {
    border-color: rgba(0, 220, 140, .28);
    background: rgba(1, 14, 10, .9);
    color: var(--community-ink);
}

.blackclover-community-page input:focus,
.blackclover-community-page select:focus,
.blackclover-community-page textarea:focus,
.blackclover-app:has(.profile-report-page-panel) textarea:focus {
    border-color: var(--community-gold);
    outline: 3px solid rgba(0, 220, 140, .12);
}

.blackclover-community-page .primary-action,
.blackclover-app:has(.profile-report-page-panel) .primary-action {
    border: 1px solid rgba(137, 243, 189, .78);
    background: linear-gradient(180deg, #f6d580, #c99634);
    color: #1a1307;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .24);
}

.blackclover-community-page .secondary-page-action,
.blackclover-app:has(.member-report-panel) .secondary-page-action,
.blackclover-app:has(.profile-report-page-panel) .secondary-page-action {
    border-color: rgba(0, 220, 140, .32);
    background: rgba(255, 255, 255, .055);
    color: var(--community-ink);
}

.blackclover-community-page .secondary-page-action:hover,
.blackclover-app:has(.member-report-panel) .secondary-page-action:hover,
.blackclover-app:has(.profile-report-page-panel) .secondary-page-action:hover {
    border-color: var(--community-line-strong);
    background: rgba(0, 220, 140, .12);
    color: var(--community-gold-light);
}

.blackclover-community-page .forum-form-error,
.blackclover-app:has(.profile-report-page-panel) .forum-form-error {
    border: 1px solid rgba(226, 93, 84, .35);
    border-radius: 7px;
    padding: 10px 12px;
    background: rgba(123, 31, 29, .24);
    color: #ffc1ba;
}

/* Préférences e-mail et Web Push. */
.blackclover-community-page .profile-web-push-card,
.blackclover-community-page .web-push-panel,
.blackclover-community-page .profile-notification-table {
    border-color: rgba(0, 220, 140, .3);
    background: rgba(1, 17, 12, .78);
    color: var(--community-ink);
}

.blackclover-community-page .profile-web-push-card strong,
.blackclover-community-page .web-push-panel h2 { color: #fff; }
.blackclover-community-page .profile-web-push-card small,
.blackclover-community-page .web-push-panel p { color: var(--community-muted); }
.blackclover-community-page .web-push-panel-icon {
    background: rgba(0, 220, 140, .14);
    color: var(--community-gold-light);
}

.blackclover-community-page .profile-notification-table { overflow-x: auto; }
.blackclover-community-page .profile-notification-head,
.blackclover-community-page .profile-notification-line { min-width: 650px; }
.blackclover-community-page .profile-notification-head {
    background: rgba(0, 220, 140, .12);
    color: var(--community-gold-light);
}
.blackclover-community-page .profile-notification-group {
    min-width: 650px;
    border-color: rgba(0, 220, 140, .22);
    background: rgba(36, 107, 70, .18);
}
.blackclover-community-page .profile-notification-group strong { color: #fff; }
.blackclover-community-page .profile-notification-line {
    border-color: rgba(0, 220, 140, .14);
    color: var(--community-ink);
}
.blackclover-community-page .profile-notification-line input { accent-color: var(--community-gold); }
.blackclover-community-page [data-web-push-toggle].is-active {
    border-color: rgba(98, 191, 131, .5);
    background: rgba(36, 107, 70, .28);
    color: #9ae0b2;
}

/* Annuaire des membres. */
.blackclover-app.module-page.bc-member-directory-page > main.workspace {
    width: min(1180px, calc(100% - 40px));
    gap: 20px;
    padding: 20px;
}

.bc-member-directory-page .member-directory-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 330px;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--community-line-strong);
    border-radius: 14px;
    padding: clamp(32px, 5vw, 58px);
    background:
        linear-gradient(90deg, rgba(1, 10, 8, .98) 0%, rgba(2, 22, 16, .94) 42%, rgba(2, 17, 13, .5) 67%, rgba(1, 9, 7, .12) 100%),
        linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, .55)),
        url("/assets/images/webtoon-hero.png") center 44% / cover;
    box-shadow: 0 26px 64px rgba(0, 0, 0, .38);
}

.bc-member-directory-page .member-directory-hero::before {
    position: absolute;
    inset: 10px;
    z-index: -1;
    border: 1px solid rgba(137, 243, 189, .2);
    border-radius: 10px;
    content: "";
    pointer-events: none;
}

.bc-member-directory-page .member-directory-hero-copy {
    position: relative;
    z-index: 1;
    width: min(100%, 650px);
}

.bc-member-directory-page .member-directory-hero .eyebrow {
    margin-bottom: 10px;
    color: var(--community-gold-light);
    letter-spacing: .14em;
}

.bc-member-directory-page .member-directory-hero h1 {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(38px, 6vw, 62px);
    line-height: 1;
    text-shadow: 0 4px 28px rgba(0, 0, 0, .7);
}

.bc-member-directory-page .member-directory-hero-copy > p:not(.eyebrow) {
    max-width: 560px;
    margin: 0;
    color: rgba(238, 244, 240, .78);
    font-size: clamp(15px, 2vw, 18px);
    line-height: 1.55;
}

.bc-member-directory-page .member-directory-search {
    display: grid;
    width: min(100%, 640px);
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    margin-top: 28px;
    border: 1px solid rgba(137, 243, 189, .36);
    border-radius: 10px;
    padding: 8px;
    background: rgba(1, 13, 9, .88);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .3);
    backdrop-filter: blur(8px);
}

.bc-member-directory-page .member-directory-search-field {
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    border: 1px solid rgba(0, 220, 140, .18);
    border-radius: 7px;
    background: rgba(0, 8, 6, .72);
}

.bc-member-directory-page .member-directory-search-field:focus-within {
    border-color: var(--community-gold);
    box-shadow: 0 0 0 3px rgba(0, 220, 140, .13);
}

.bc-member-directory-page .member-directory-search-field > i {
    padding-left: 14px;
    color: var(--community-gold-light);
}

.bc-member-directory-page .member-directory-search input,
.bc-member-directory-page .member-directory-search input:focus {
    width: 100%;
    min-height: 46px;
    border: 0;
    padding: 0 14px 0 10px;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font: inherit;
}

.bc-member-directory-page .member-directory-search input::placeholder {
    color: rgba(217, 229, 221, .55);
}

.bc-member-directory-page .member-directory-search button,
.bc-member-directory-page .member-directory-search > a {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(137, 243, 189, .7);
    border-radius: 7px;
    padding: 0 18px;
    font: inherit;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.bc-member-directory-page .member-directory-search button {
    background: linear-gradient(180deg, #f2cc70, #ce9d39);
    color: #191205;
    cursor: pointer;
}

.bc-member-directory-page .member-directory-search button:hover,
.bc-member-directory-page .member-directory-search button:focus-visible {
    filter: brightness(1.08);
}

.bc-member-directory-page .member-directory-search > a {
    border-color: rgba(0, 220, 140, .28);
    background: rgba(255, 255, 255, .055);
    color: var(--community-muted);
}

.bc-member-directory-page .member-directory-search > a:hover,
.bc-member-directory-page .member-directory-search > a:focus-visible {
    border-color: var(--community-gold);
    color: var(--community-gold-light);
}

.bc-member-directory-page .member-directory-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.bc-member-directory-page .member-directory-overview article {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
    border: 1px solid rgba(0, 220, 140, .22);
    border-radius: 10px;
    padding: 13px 16px;
    background: linear-gradient(135deg, rgba(36, 107, 70, .18), rgba(0, 220, 140, .07));
}

.bc-member-directory-page .member-directory-overview-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid rgba(137, 243, 189, .24);
    border-radius: 9px;
    background: rgba(0, 220, 140, .1);
    color: var(--community-gold-light);
}

.bc-member-directory-page .member-directory-overview article > span:last-child {
    display: grid;
    gap: 3px;
}

.bc-member-directory-page .member-directory-overview small {
    color: var(--community-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.bc-member-directory-page .member-directory-overview strong {
    color: var(--community-gold-light);
    font-size: 24px;
    line-height: 1;
}

.bc-member-directory-page .member-directory-overview strong em {
    color: var(--community-muted);
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
}

.bc-member-directory-page .member-directory-results {
    border: 1px solid var(--community-line);
    border-radius: 12px;
    padding: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(36, 107, 70, .14), transparent 28%),
        var(--community-panel);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .26);
}

.bc-member-directory-page .member-directory-results > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0, 220, 140, .18);
    padding-bottom: 16px;
}

.bc-member-directory-page .member-directory-results > header .eyebrow {
    margin: 0 0 5px;
    color: var(--community-gold-light);
}

.bc-member-directory-page .member-directory-results > header h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(22px, 3vw, 30px);
}

.bc-member-directory-page .member-directory-results > header > span {
    flex: 0 0 auto;
    border: 1px solid rgba(0, 220, 140, .24);
    border-radius: 999px;
    padding: 7px 11px;
    background: rgba(0, 220, 140, .09);
    color: var(--community-gold-light);
    font-size: 12px;
    font-weight: 850;
}

.bc-member-directory-page .member-mosaic {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.bc-member-directory-page .member-profile-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.bc-member-directory-page .member-profile-card:hover {
    border-color: rgba(137, 243, 189, .5);
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .32);
}

.bc-member-directory-page .member-profile-banner.theme-blackclover {
    min-height: 86px;
}

.bc-member-directory-page .member-profile-body {
    flex: 1;
    grid-template-rows: auto auto auto 1fr auto;
    padding: 0 16px 16px;
}

.bc-member-directory-page .member-profile-title a {
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.bc-member-directory-page .member-profile-title a:hover strong,
.bc-member-directory-page .member-profile-title a:focus-visible strong {
    color: var(--community-gold-light);
}

.bc-member-directory-page .member-profile-title strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bc-member-directory-page .member-profile-meta dt {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bc-member-directory-page .member-profile-actions .secondary-page-action {
    justify-content: center;
    width: 100%;
}

.bc-member-directory-page .member-directory-empty {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: 8px;
    border: 1px dashed rgba(0, 220, 140, .26);
    border-radius: 10px;
    padding: 48px 20px;
    background: rgba(255, 255, 255, .02);
    text-align: center;
}

.bc-member-directory-page .member-directory-empty > i {
    margin-bottom: 4px;
    color: var(--community-gold-light);
    font-size: 30px;
}

.bc-member-directory-page .member-directory-empty strong { color: #fff; font-size: 18px; }
.bc-member-directory-page .member-directory-empty p { margin: 0; color: var(--community-muted); }
.bc-member-directory-page .member-directory-empty a { margin-top: 8px; }

/* Console d'administration : même matériau que le grimoire de gestion. */
.admin-panel-body .admin-system-notification-form {
    border: 1px solid rgba(0, 220, 140, .28);
    border-radius: 10px;
    background:
        radial-gradient(circle at 100% 0, rgba(36, 107, 70, .16), transparent 32%),
        rgba(3, 22, 17, .92);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
}

@media (max-width: 820px) {
    .blackclover-community-page .workspace,
    .blackclover-app:has(.member-report-panel) .workspace,
    .blackclover-app:has(.profile-report-page-panel) .workspace { width: min(100% - 24px, 1180px); }
    .blackclover-community-page .messages-hero,
    .blackclover-community-page .profile-edit-header,
    .blackclover-app:has(.member-report-panel) .profile-edit-header,
    .blackclover-app:has(.profile-report-page-panel) .profile-edit-header { min-height: 210px; padding: 28px 24px; }
    .blackclover-community-page .messages-hero::after,
    .blackclover-community-page .profile-edit-header::after,
    .blackclover-app:has(.member-report-panel) .profile-edit-header::after,
    .blackclover-app:has(.profile-report-page-panel) .profile-edit-header::after { right: 20px; width: 80px; height: 80px; opacity: .45; }
    .bc-member-profile-page .profile-hero-main { padding: 0 20px 20px; }
    .bc-member-profile-page .profile-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; }
    .bc-member-profile-page .profile-tabs a:nth-child(3n) { border-right: 0; }
    .bc-member-profile-page .profile-tabs a:nth-child(-n+3) { border-bottom-color: rgba(0, 220, 140, .12); }
    .bc-member-profile-page .profile-tabs a.is-active { border-bottom-color: var(--community-gold); }
    .bc-member-profile-page .profile-stat-strip-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bc-member-profile-page .profile-stat-strip-wide article:nth-child(3) { border-right: 0; }
    .bc-member-profile-page .profile-stat-strip-wide article:nth-child(n+4) { border-top: 1px solid rgba(0, 220, 140, .16); }
    .bc-member-profile-page .profile-stat-strip-wide article:nth-child(4) { grid-column: span 1; }
    .bc-member-profile-page .profile-stat-strip-wide article:nth-child(5) { grid-column: span 2; }
    .blackclover-app.module-page.bc-member-directory-page > main.workspace {
        width: min(100% - 24px, 1180px);
        padding: 14px;
    }
    .bc-member-directory-page .member-directory-hero {
        min-height: 300px;
        padding: 36px 30px;
        background-position: 58% 44%;
    }
    .bc-member-directory-page .member-directory-results { padding: 18px; }
}

@media (max-width: 620px) {
    .blackclover-community-page .messages-hero,
    .blackclover-community-page .profile-edit-header,
    .blackclover-app:has(.member-report-panel) .profile-edit-header,
    .blackclover-app:has(.profile-report-page-panel) .profile-edit-header { min-height: 0; background-position: 62% center; }
    .blackclover-community-page .messages-hero::after,
    .blackclover-community-page .profile-edit-header::after,
    .blackclover-app:has(.member-report-panel) .profile-edit-header::after,
    .blackclover-app:has(.profile-report-page-panel) .profile-edit-header::after { display: none; }
    .bc-member-profile-page .profile-hero-cover { min-height: 205px; }
    .bc-member-profile-page .profile-hero-main { background: rgba(2, 20, 15, .98); }
    .bc-member-profile-page .profile-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bc-member-profile-page .profile-tabs a,
    .bc-member-profile-page .profile-tabs a:nth-child(3n) { border-right: 1px solid rgba(0, 220, 140, .12); }
    .bc-member-profile-page .profile-tabs a:nth-child(2n) { border-right: 0; }
    .bc-member-profile-page .profile-tabs a:nth-child(-n+4) { border-bottom-color: rgba(0, 220, 140, .12); }
    .bc-member-profile-page .profile-tabs a.is-active { border-bottom-color: var(--community-gold); }
    .bc-member-profile-page .profile-stat-strip-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bc-member-profile-page .profile-stat-strip-wide article:nth-child(3) { border-right: 1px solid rgba(0, 220, 140, .16); }
    .bc-member-profile-page .profile-stat-strip-wide article:nth-child(n+4) { border-top: 0; }
    .bc-member-profile-page .profile-stat-strip-wide article:nth-child(4),
    .bc-member-profile-page .profile-stat-strip-wide article:nth-child(5) { grid-column: auto; }
    .bc-member-profile-page .profile-stat-strip-wide article:last-child { grid-column: 1 / -1; }
    .blackclover-app.module-page.bc-member-directory-page > main.workspace {
        width: calc(100% - 16px);
        gap: 14px;
        border-radius: 14px;
        padding: 8px;
    }
    .bc-member-directory-page .member-directory-hero {
        min-height: 0;
        border-radius: 10px;
        padding: 30px 20px;
        background-position: 63% center;
    }
    .bc-member-directory-page .member-directory-hero::before { inset: 7px; border-radius: 7px; }
    .bc-member-directory-page .member-directory-search {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 22px;
    }
    .bc-member-directory-page .member-directory-search button,
    .bc-member-directory-page .member-directory-search > a { width: 100%; }
    .bc-member-directory-page .member-directory-overview { grid-template-columns: 1fr; gap: 8px; }
    .bc-member-directory-page .member-directory-results { border-radius: 10px; padding: 15px; }
    .bc-member-directory-page .member-directory-results > header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .bc-member-directory-page .member-mosaic { grid-template-columns: minmax(0, 1fr); }
}