:root {

    --bl-black:      var(--error);
    --bl-black-bg:   var(--error-bg);

    --bl-grey:       var(--warning);
    --bl-grey-bg:    var(--warning-bg);

    --bl-due:        var(--accent);
    --bl-due-bg:     var(--accent-dim);

    --bl-success:    var(--success);

    --bl-line:       var(--text-dark);
    --bl-panel:      rgba(255, 255, 255, 0.01);
}

.blacklist-banners {
    margin: var(--space-md) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.blacklist-banner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bl-panel);
    border: 1px solid var(--bl-line);
    border-left-width: 4px;
    color: var(--text);
}

.blacklist-banner--black { border-left-color: var(--bl-black); background: var(--bl-black-bg); }
.blacklist-banner--grey  { border-left-color: var(--bl-grey);  background: var(--bl-grey-bg); }

.blacklist-banner__icon {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--bl-black);
}
.blacklist-banner--grey .blacklist-banner__icon { color: var(--bl-grey); }

.blacklist-banner__body { flex: 1 1 auto; }

.blacklist-banner__title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--text);
    margin-bottom: var(--space-xs);
}

.blacklist-banner__text {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.blacklist-banner__link {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-dim);
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.blacklist-banner__link:hover {
    color: var(--accent-hover);
    border-color: var(--accent-hover);
}

.blacklist-banner__close {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 var(--space-xs);
    transition: color 0.2s var(--ease);
}
.blacklist-banner__close:hover { color: var(--accent); }

.blacklist-page,
.blacklist-mod {
    margin: var(--space-md) 0 var(--space-2xl);
    color: var(--text);
}

.blacklist-page__head {
    position: relative;
    padding: var(--space-2xl) 0;
    margin-bottom: var(--space-xl);
    border-bottom: 1px solid var(--bl-line);
    overflow: hidden;
}

.blacklist-page__head::before {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-size: clamp(7rem, 16vw, 13rem);
    line-height: 0.8;
    letter-spacing: -0.02em;
    color: transparent;
    -webkit-text-stroke: 1px var(--bl-line);
    opacity: 0.5;
    pointer-events: none;
    white-space: nowrap;
}

.blacklist-page--black .blacklist-page__head::before { content: "BLACKLIST"; }
.blacklist-page--grey  .blacklist-page__head::before { content: "GREYLIST"; }
.blacklist-mod   .blacklist-page__head::before        { content: "MONITOR"; }

.blacklist-page__title-wrap {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.blacklist-page__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-md);
}

.blacklist-page__title {
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 7vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 var(--space-md);
}

.blacklist-page__subtitle {
    margin: 0;
    max-width: 560px;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.blacklist-deadline-box {
    display: inline-block;
    margin-top: var(--space-lg);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--bl-due);
    background: var(--bl-due-bg);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.blacklist-list {
    border: 1px solid var(--bl-line);
    margin-top: var(--space-md);
}

.blacklist-row,
.blacklist-mod-row {
    display: grid;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--bl-line);
    position: relative;
    transition: background 0.2s var(--ease);
}
.blacklist-row:last-child,
.blacklist-mod-row:last-child { border-bottom: 0; }

.blacklist-row     { grid-template-columns: 2.2fr 1.4fr 1fr 1fr; }
.blacklist-mod-row { grid-template-columns: 2fr 1.4fr 0.8fr 0.8fr 1.1fr 1.3fr; }

.blacklist-row:not(.blacklist-row--head):hover,
.blacklist-mod-row:not(.blacklist-mod-row--head):hover {
    background: rgba(255, 68, 34, 0.03);
}
.blacklist-row:not(.blacklist-row--head)::before,
.blacklist-mod-row:not(.blacklist-mod-row--head)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.25s var(--ease);
}
.blacklist-row:not(.blacklist-row--head):hover::before,
.blacklist-mod-row:not(.blacklist-mod-row--head):hover::before {
    transform: scaleY(1);
}

.blacklist-row--head,
.blacklist-mod-row--head {
    background: var(--bg-alt);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.blacklist-row--head a,
.blacklist-mod-row--head a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s var(--ease);
}
.blacklist-row--head a:hover,
.blacklist-mod-row--head a:hover { color: var(--accent); }

.blacklist-char {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
}

.blacklist-avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-alt);
    border: 1px solid var(--bl-line);
    font-family: var(--font-display);
    font-size: 1.2rem;
    line-height: 1;
    color: var(--text-muted);
}

.blacklist-char__name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--text);
    word-break: break-word;
}
.blacklist-char__name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s var(--ease);
}
.blacklist-char__name a:hover { color: var(--accent); }

.blacklist-char__player {
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    color: var(--text-dim);
}

.blacklist-away {
    display: inline-block;
    margin-left: var(--space-sm);
    vertical-align: middle;
    padding: 1px 6px;
    border: 1px solid var(--bl-line);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.blacklist-meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    line-height: 1.5;
}
.blacklist-meta strong {
    font-weight: 700;
    color: var(--text);
}

.blacklist-badge {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}
.blacklist-badge--black {
    color: var(--bl-black);
    border-color: var(--bl-black);
    background: var(--bl-black-bg);
}
.blacklist-badge--grey {
    color: var(--bl-grey);
    border-color: var(--bl-grey);
    background: var(--bl-grey-bg);
}

.blacklist-badge--due {
    color: var(--bg);
    border-color: var(--bl-due);
    background: var(--bl-due);
    font-weight: 700;
}

.blacklist-cell-last {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}
.blacklist-cell-last.is-posted {
    color: var(--bl-success);
    font-weight: 700;
}

.blacklist-repeat {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
}
.blacklist-repeat strong { color: var(--bl-black); font-weight: 700; }

.blacklist-empty {
    padding: var(--space-2xl);
    text-align: center;
    border-bottom: 1px solid var(--bl-line);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.blacklist-list .blacklist-empty:last-child { border-bottom: 0; }

.blacklist-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--bl-line);
    border: 1px solid var(--bl-line);
    margin: var(--space-xl) 0;
}

.blacklist-stat {
    padding: var(--space-lg);
    text-align: center;
    background: var(--bg);
    border-top: 2px solid transparent;
}
.blacklist-stat--danger { border-top-color: var(--bl-black); }
.blacklist-stat--warn   { border-top-color: var(--bl-grey); }

.blacklist-stat__num {
    font-family: var(--font-display);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--text);
}
.blacklist-stat--danger .blacklist-stat__num { color: var(--bl-black); }
.blacklist-stat--warn   .blacklist-stat__num { color: var(--bl-grey); }

.blacklist-stat__label {
    margin-top: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.blacklist-page__pagination { margin-top: var(--space-lg); }

.blacklist-alert {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bl-black);
}

@media (max-width: 760px) {
    .blacklist-stats { grid-template-columns: repeat(2, 1fr); }

    .blacklist-row--head,
    .blacklist-mod-row--head { display: none; }

    .blacklist-row,
    .blacklist-mod-row {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .blacklist-row:not(.blacklist-row--head)::before,
    .blacklist-mod-row:not(.blacklist-mod-row--head)::before {
        transform: scaleY(1);
    }
}