div.overview-layout {
    width: min(1200px, calc(100% - 4rem));
    margin: 1.4em auto 2em auto;
    display: grid;
    grid-template-columns: minmax(18rem, 21rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

div.content-shell,
div.detail-shell {
    padding: 1.1em 1.1em 0.9em 1.1em;
    background:
        radial-gradient(circle at top left, rgba(61, 90, 126, 0.22), transparent 38%),
        linear-gradient(180deg, #1d1f23 0%, #191919 100%);
    border: 1px solid #3c3c3c;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}

div.list-shell {
    min-width: 0;
}

div.detail-shell {
    min-height: calc(100vh - 10rem);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 1rem;
}

div.shell-hero {
    margin-bottom: 1.05em;
    padding: 0.95em 1em 1em 1em;
    border: 1px solid #343b45;
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(36, 42, 49, 0.92), rgba(27, 29, 33, 0.92));
}

div.shell-copy {
    display: flex;
    flex-direction: column;
    gap: 0.18em;
}

div.shell-kicker {
    color: #8ebeff;
    font-size: 0.72em;
    font-weight: bold;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

div.shell-title {
    color: white;
    font-size: 1.32em;
    font-weight: bold;
}

div.member-list {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

a.member-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 0.95em 1em;
    border: 1px solid #343434;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(34, 34, 34, 0.98), rgba(29, 29, 29, 0.98));
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

a.member-card:hover {
    background: linear-gradient(180deg, rgba(38, 38, 38, 0.98), rgba(32, 32, 32, 0.98));
    border-color: #4a4a4a;
    transform: translateY(-1px);
}

a.member-card.selected {
    border-color: #5674a1;
    box-shadow: inset 0 0 0 1px rgba(120, 164, 232, 0.26);
}

div.member-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.55em;
}

span.member-accent {
    font-size: 0.7em;
    line-height: 1;
    opacity: 0.95;
}

span.member-name {
    font-size: 1.03em;
    font-weight: bold;
}

div.member-meta {
    min-width: 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1em;
}

span.member-count {
    color: white;
    min-width: 2.4rem;
    padding: 0.18em 0.45em 0.22em 0.45em;
    border: 1px solid #444c57;
    border-radius: 10px;
    background: rgba(22, 25, 30, 0.84);
    font-size: 1.14em;
    font-weight: bold;
    line-height: 1;
    text-align: center;
}

span.member-count-label {
    color: #9aa4b3;
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

span.member-status {
    display: inline-block;
    padding: 0.18em 0.5em 0.22em 0.5em;
    border: 1px solid #4b515a;
    border-radius: 999px;
    color: #aeb6c1;
    background: #252a31;
    font-size: 0.72em;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

div.overview-total {
    margin-top: 0.95em;
    padding: 0.9em 1em 0.95em 1em;
    border: 1px solid #363d47;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(31, 35, 41, 0.94), rgba(25, 27, 31, 0.94));
    display: flex;
    align-items: center;
    justify-content: space-between;
}

div.total-copy {
    display: flex;
    flex-direction: column;
    gap: 0.18em;
}

div.total-copy-right {
    align-items: flex-end;
}

span.total-label {
    color: #93a0b1;
    font-size: 0.76em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

span.total-count {
    color: #ffe06e;
    font-size: 1.4em;
    font-weight: bold;
}

div.detail-empty,
div.detail-pane {
    min-height: calc(100vh - 12rem);
}

div.detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    border: 1px dashed #47505c;
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(24, 28, 33, 0.82), rgba(19, 21, 25, 0.82));
    color: #bcc7d5;
    text-align: center;
}

div.detail-empty-title {
    color: white;
    font-size: 1.08em;
    font-weight: bold;
}

div.detail-empty-copy {
    color: #9ca8b6;
    font-size: 0.9em;
}

div.detail-pane {
    width: 100%;
}

div.detail-pane div.page-title {
    margin-bottom: 1em;
    font-size: 1.2em;
}

div.detail-pane span.player-name {
    font-weight: bold;
    font-size: 1.45em;
    line-height: 1.05;
    letter-spacing: 0.01em;
}

div.detail-pane div.options {
    width: auto;
    margin-left: 0;
    margin-bottom: 1em;
}

div.detail-pane table.loot-detail {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.35rem;
}

div.detail-pane table.loot-detail td {
    text-align: left;
    vertical-align: middle;
    padding: 0.38rem 0.7rem;
}

div.detail-pane table.loot-detail tbody tr {
    background: rgba(255, 255, 255, 0.02);
}

div.detail-pane table.loot-detail tbody td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

div.detail-pane table.loot-detail tbody td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    width: 100%;
    white-space: normal;
}

div.detail-pane td.week-cell {
    width: 3.8rem;
    font-size: 1.2em;
    font-weight: bold;
    color: #dbe7ff;
    text-align: center;
    vertical-align: middle;
}

div.detail-pane td.day-cell,
div.detail-pane td.date-cell,
div.detail-pane td.time-cell {
    text-align: center;
    white-space: nowrap;
}

div.detail-pane td.response-cell {
    white-space: nowrap;
}

div.detail-pane a.item-link {
    color: #ffe06e;
    text-decoration: none;
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

div.detail-pane a.item-link:hover {
    text-decoration: underline;
}

div.detail-pane span.response-badge {
    display: inline-block;
    padding: 0.2em 0.6em 0.24em 0.6em;
    border: 1px solid #545a66;
    border-radius: 999px;
    font-size: 0.82em;
    line-height: 1;
    color: #d8dde7;
    background: #252a33;
    white-space: nowrap;
}

div.detail-pane span.response-badge.need {
    border-color: #6a8061;
    background: #243223;
    color: #d7efcf;
}

div.detail-pane span.response-badge.upgrade {
    border-color: #6d6688;
    background: #2b2738;
    color: #ddd7ff;
}

div.detail-pane span.response-badge.offspec {
    border-color: #6b6252;
    background: #322a22;
    color: #ead8ba;
}

div.detail-pane span.response-badge.disenchant,
div.detail-pane span.response-badge.personal-loot,
div.detail-pane span.response-badge.other {
    border-color: #5d626d;
    background: #272a31;
    color: #c6cad3;
}

div.detail-pane span.item-category {
    display: inline-block;
    margin-left: 0.6em;
    padding: 0.18em 0.55em 0.22em 0.55em;
    border: 1px solid #4d5360;
    border-radius: 999px;
    font-size: 0.78em;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #d5d9e2;
    background: #232832;
    white-space: nowrap;
}

div.detail-pane span.item-category.weapon {
    border-color: #7b6850;
    background: #332c22;
    color: #f0d7ae;
}

div.detail-pane span.item-category.jewerly,
div.detail-pane span.item-category.trinket {
    border-color: #5d5d7f;
    background: #29293c;
    color: #d8d4ff;
}

div.detail-pane span.item-category.tier-token,
div.detail-pane span.item-category.tier-slot-armor {
    border-color: #516e5a;
    background: #223128;
    color: #c7e7d0;
}

div.detail-pane span.item-category.other-armor {
    border-color: #526777;
    background: #23303a;
    color: #c8dbea;
}

div.detail-pane span.item-category.decor,
div.detail-pane span.item-category.recipe,
div.detail-pane span.item-category.warbound {
    border-color: #5d626d;
    background: #272a31;
    color: #c6cad3;
}

div.detail-pane div.empty-state {
    width: fit-content;
    padding: 0.8em 1em;
    border: 1px solid #666;
    border-radius: 8px;
    color: white;
    background: #222;
}

a.member-card.hidden,
div.detail-empty.hidden,
div.detail-pane.hidden {
    display: none;
}

a.former-member,
a.former-member .member-count {
    color: #c9ced6;
}

a.former-member .member-count-label,
a.former-member .former-member-link {
    color: #98a0ab;
}

@media (max-width: 900px) {
    div.overview-layout {
        width: calc(100% - 2rem);
        grid-template-columns: 1fr;
    }

    div.shell-hero,
    div.overview-total {
        padding-left: 0.85em;
        padding-right: 0.85em;
    }

    div.detail-shell {
        display: none;
    }

    a.member-card {
        padding: 0.8em 0.85em;
    }

    span.member-name {
        font-size: 0.98em;
    }
}