@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {

    --bg:      #0c0e1c;
    --bg-2:    #14172a;
    --bg-3:    #1b1e35;


    --line:      #292e48;
    --line-soft: #1d2138;


    --ink:   #e7e9ee;
    --ink-2: #b6bac6;
    --ink-3: #7a8094;
    --ink-4: #4a5063;


    --accent:      #2b5fc4;
    --accent-glow: #4a82e0;
    --accent-2:    #5a8cc9;
    --accent-3:    #6b77e0;


    --ok:   #6bd49b;
    --warn: #ffb454;
    --bad:  #ff6b6b;


    --r-sm: 0.375rem;
    --r-md: 0.625rem;
    --r-lg: 0.875rem;


    --pad: 1.125rem;
    --gap: 0.875rem;


    --sh-card: 0 0.063rem 0 rgba(255,255,255,0.04) inset, 0 0.125rem 0.5rem rgba(0,0,0,0.35), 0 0.75rem 2rem rgba(0,0,0,0.45);
    --sh-pop:  0 0.063rem 0 rgba(255,255,255,0.05) inset, 0 0.5rem 1.5rem rgba(0,0,0,0.5),  0 1.75rem 4rem rgba(0,0,0,0.55);
    --sh-glow: 0 0 0 0.063rem rgba(43,95,196,0.15), 0 0 2rem rgba(43,95,196,0.12);

}

*:not(html):not(body)::-webkit-scrollbar {
    width: 0.375rem;
    height: 0.375rem;
}
*:not(html):not(body)::-webkit-scrollbar-track {
    background: var(--bg);
    border-radius: 0.25rem;
}
*:not(html):not(body)::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 0.25rem;
}
*:not(html):not(body)::-webkit-scrollbar-thumb:hover {
    background: var(--ink-4);
}
*:not(html):not(body) {
    scrollbar-width: thin;
    scrollbar-color: var(--line) var(--bg);
}

.skip-nav {
    position: absolute;
    top: -9999px;
    left: 0;
}
.skip-nav:focus {
    top: 0;
    z-index: 9999;
    padding: 0.5em 1em;
    background: var(--bg);
    color: var(--ink);
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
}

.profile-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.125rem;
    align-items: start;
}

.theme-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* .theme-btn — removed; replaced with .btn (P2) */
/* .theme-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    font-family: inherit;
    font-weight: 500;
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--ink-2);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all 0.15s;
} */

/* .theme-btn:hover { border-color: var(--ink-4); color: var(--ink); background: var(--bg-3); } */

/* .theme-btn-active — removed; replaced with .btn-active (P2) */
/* .theme-btn-active {
    border-color: var(--accent);
    color: var(--ink);
    background: rgba(43,95,196,0.12);
    box-shadow: 0 0 0 3px rgba(43,95,196,0.08), inset 0 1px 0 rgba(255,255,255,0.05);
} */

html, body {
    height: 100%;
}

body {
    background-color: var(--bg);
    color: var(--ink);
    font-family: Inter, system-ui, sans-serif;
    font-size: 1rem;
    /* line-height: 1.6; */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(0.063rem 0.063rem at 20% 30%, rgba(184,150,227,0.18), transparent 50%),
        radial-gradient(0.063rem 0.063rem at 70% 80%, rgba(125,155,214,0.15), transparent 50%),
        radial-gradient(0.063rem 0.063rem at 40% 70%, rgba(255,255,255,0.10), transparent 50%),
        radial-gradient(0.063rem 0.063rem at 85% 20%, rgba(255,255,255,0.12), transparent 50%),
        radial-gradient(0.063rem 0.063rem at 15% 85%, rgba(125,155,214,0.12), transparent 50%);
    pointer-events: none;
    z-index: 0;
}

a {
    color: var(--accent-2);
    text-decoration: none;
}

a:hover {
    color: var(--accent-glow);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset !important;
    -webkit-text-fill-color: var(--ink) !important;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: var(--ink);
}

header {
    background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
    border-bottom: 1px solid var(--line-soft);
    position: sticky;
    top: 0;
    z-index: 100;
}

nav {
    max-width: 73.75rem;
    margin: 0 auto;
    padding: 0 2rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.938rem;
    letter-spacing: 0.013rem;
    color: var(--ink);
    margin-right: auto;
    text-decoration: none;
    transition: color 0.15s;
}

.nav-brand:hover { color: var(--accent-glow); }

.nav-link-notif {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.nav-notif-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.25rem;
    font-size: 0.688rem;
    font-weight: 600;
    border-radius: 0.188rem;
    border: 1px solid #ff6b6b;
    background: rgba(220,50,50,0.18);
    color: #ffaaaa;
    line-height: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    pointer-events: none;
}

.nav-link {
    font-size: 0.813rem;
    color: var(--ink-3);
    text-decoration: none;
    transition: color 0.15s;
}

.nav-link:hover { color: var(--ink); }

.nav-menu {
    position: relative;
}

.nav-account {
    margin-left: auto;
}

.nav-menu-btn {
    background: none;
    border: none;
    color: var(--ink-3);
    cursor: pointer;
    font-size: 0.813rem;
    font-family: inherit;
    padding: 0;
    line-height: inherit;
    transition: color 0.15s;
}

.nav-menu-btn:hover { color: var(--ink); }

.nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.625rem);
    left: 0;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    min-width: 11.25rem;
    z-index: 100;
    box-shadow: var(--sh-card);
}

.nav-dropdown-right {
    left: auto;
    right: 0;
}

.nav-dropdown.open { display: block; }

.nav-dropdown-item {
    display: block;
    padding: 0.563rem 1rem;
    font-size: 0.813rem;
    color: var(--ink-3);
    text-decoration: none;
    transition: color 0.15s, background-color 0.15s;
    white-space: nowrap;
}

.nav-dropdown-item:hover {
    color: var(--ink);
    background-color: rgba(43,95,196,0.06);
}

.account-menu { position: relative; }
.guild-menu { position: relative; }
.admin-menu { position: relative; }
.raidleader-menu { position: relative; }
.account-dropdown, .guild-dropdown, .admin-dropdown, .raidleader-dropdown {
    display: none; position: absolute; top: calc(100% + 0.625rem); left: 0;
    background: var(--bg-3); border: 1px solid var(--line);
    border-radius: var(--r-sm); min-width: 160px; z-index: 100; box-shadow: var(--sh-card);
}
.account-dropdown { left: auto; right: 0; }
.account-dropdown.open, .guild-dropdown.open, .admin-dropdown.open, .raidleader-dropdown.open { display: block; }
.account-dropdown-item, .guild-dropdown-item, .admin-dropdown-item, .raidleader-dropdown-item {
    display: block; padding: 0.563rem 1rem; font-size: 0.813rem; color: var(--ink-3);
    text-decoration: none; transition: color 0.15s, background-color 0.15s; white-space: nowrap;
}
.account-dropdown-item:hover, .guild-dropdown-item:hover,
.admin-dropdown-item:hover, .raidleader-dropdown-item:hover {
    color: var(--ink); background-color: rgba(43,95,196,0.06);
}

main {
    flex: 1;
    position: relative;
    z-index: 1;
    max-width: 73.75rem;
    width: 100%;
    margin: 0 auto;
    padding: 1.75rem 2rem 3.75rem;
}

h1 {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.013rem;
    margin-bottom: 0.25rem;
    color: var(--ink);
}

.char-page-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

#loot-history-view .roster-sidebar,
#gm-signups-view .roster-sidebar {
    position: sticky;
    top: 1rem;
    left: auto;
    max-height: calc(100vh - 15.5rem);
    display: flex;
    flex-direction: column;
}
#loot-history-view .roster-sidebar-body,
#gm-signups-view .roster-sidebar-body {
    flex: 1;
    overflow-y: auto;
}

#loot-history-view .roster-list-item.btn-active {
    border-left-color: var(--accent);
    background: linear-gradient(to right, color-mix(in oklch, var(--accent) 10%, transparent), transparent);
    box-shadow: inset 0 1px 0 color-mix(in oklch, var(--accent) 22%, transparent),
                inset -0.063rem 0 0 color-mix(in oklch, var(--accent) 22%, transparent),
                inset 0 -0.063rem 0 color-mix(in oklch, var(--accent) 22%, transparent);
}

.char-page-layout .roster-sidebar,
.char-page-layout .raider-view-main {
    align-self: flex-start;
}
.char-page-layout .roster-sidebar-body {
    padding-bottom: 0.75rem;
}

#char-main-content .gp-tab {
    min-height: 2.25rem;
}
#char-main-content .gp-tabs {
    position: relative;
    z-index: 1;
}

.char-admin-panel {
    margin-bottom: 1rem;
    display: inline-block;
}
.char-admin-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.char-admin-row + .char-admin-row {
    margin-top: 0.375rem;
}
.char-admin-label {
    font-size: 0.719rem;
    color: var(--ink-3);
    min-width: 6rem;
}
.char-admin-value {
    font-size: 0.813rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--ink-2);
}

button.roster-list-item {
    width: 100%;
    min-height: 2.25rem;
    background: none;
    border-top: none;
    border-right: none;
    text-align: left;
    font-size: 0.781rem;
    font-family: inherit;
    color: var(--ink-2);
}

h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--ink);
}

p {
    color: var(--ink-3);
    margin-bottom: 1rem;
}

ol, ul {
    color: var(--ink-3);
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

ol li, ul li {
    margin-bottom: 0.4rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 0.813rem;
    margin-bottom: 1.5rem;
}
.gp-card-table .data-table { margin-bottom: 0; }
.data-table thead th {
    /* text-align: left; */
    text-align: center;
    padding: 0.75rem 1rem;
    font-size: 0.688rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.038rem;
    color: var(--ink-3);
    border-bottom: 1px solid var(--line-soft);
    background: rgba(255,255,255,0.015);
    white-space: nowrap;
}
/* .data-table thead th:last-child { text-align: right; } */
.th-group { border-bottom: 1px solid var(--line); }
.group-start { border-left: 1px solid var(--line); }
.group-end { border-right: 1px solid var(--line); }
/* .data-table td {
    padding: 0.75rem 1rem;
    color: var(--ink-2);
    vertical-align: middle;
} */
.data-table td {
    padding: 0.75rem 0.5rem;
    color: var(--ink-2);
    vertical-align: middle;
}
/* .data-table td:last-child { text-align: right; white-space: nowrap; padding-right: 1rem; } */
/* .data-table tr:not(.detail-row) td:last-child { text-align: right; white-space: nowrap; padding-right: 1rem; } */
.data-table td.col-controls, .data-table th.col-controls { text-align: right; white-space: nowrap; width: 1px; padding-right: 1rem; vertical-align: top; }
/* .data-table td.col-expand + td { padding-left: 1rem; } */
/* .data-table td:first-child:not(.col-expand) { padding-left: 1rem; } */
.data-table tr:not(.detail-row) td:first-child:not(.col-expand) { padding-left: 1rem; }
/* .data-table td.col-expand { padding-left: 0; padding-right: 0; } */
/* .data-table td.col-expand, .data-table th.col-expand { padding-left: 0; padding-right: 0; min-width: 18px; } */
.data-table td.col-expand, .data-table th.col-expand { position: relative; padding-left: 0; padding-right: 0; min-width: 1.125em; }
.data-table tbody tr {
    border-top: 1px solid var(--line);
    transition: background 0.12s;
    background: var(--bg-2);
}
.data-table tbody tr:first-child { border-top: none; }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover {
    background-image: linear-gradient(rgba(43,95,196,0.06), rgba(43,95,196,0.06));
}

/* Table column type rules — apply matching class to both th and td */
.col-date,
.col-duration,
.col-status,
.col-flag,
.col-expand { width: 1px; white-space: nowrap; }
/* .data-table td.col-date { text-align: right; } */
.data-table td.col-date,
.data-table td.col-duration { text-align: right; }
.col-num,
.col-pct,
.col-currency { width: 1px; white-space: nowrap; text-align: right; }
.col-icon,
.col-check { width: 1px; white-space: nowrap; text-align: center; }
.col-desc { max-width: 40ch; overflow-wrap: break-word; }
.col-code { white-space: nowrap; font-family: monospace; }
.col-name { max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sortable column */
.sortable-col { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-col:hover { color: var(--accent); }
.sort-indicator { font-size: 0.625rem; margin-left: 0.25rem; }
.data-table thead th.sortable-col:has(a) { padding: 0; }
/* .data-table thead th.sortable-col a { display: block; padding: 0.75rem 1rem; } */
/* .data-table thead th.sortable-col a { display: block; padding: 0.75rem 1rem; position: relative; } */
/* .data-table thead th.sortable-col a .sort-indicator { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); margin: 0; } */
.data-table thead th.sortable-col a { display: block; padding: 0.75rem 1rem; text-align: center; }

/* Compact density modifier */
.data-table--compact td { padding: 0.375rem 0.5rem; }

.status-ok      { color: var(--ok); }
.status-missing { color: var(--ink-3); }
.status-error   { color: var(--bad); }

.status-warning { color: var(--warn); }

/* Override .data-table td default ink colour when these utility classes are explicitly applied to a cell. */
.data-table td.status-ok      { color: var(--ok); }
.data-table td.status-missing { color: var(--ink-3); }
.data-table td.status-error   { color: var(--bad); }
.data-table td.status-warning { color: var(--warn); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375em 0.75em;
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.3;
    box-sizing: border-box;
    text-decoration: none;
    color: var(--ink);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.3);
}
.btn:hover {
    background: var(--bg-3);
    border-color: var(--ink-4);
    color: var(--ink);
}
.btn:active { transform: translateY(1px); }

.btn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background: var(--bg-3);
    color: var(--ink-3);

    border: 1px solid var(--line);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s, border-color 0.15s;
}
.btn-badge:hover { color: var(--ink-2); border-color: var(--ink-4); }
.btn-badge[data-mode="realm"] { color: var(--accent-glow); border-color: var(--accent); }

.btn-sm {
    font-size: 0.8rem;
    padding: 0.313em 0.625em;
}
.btn-sq { padding: 0.313em; }

.btn-xs {
    font-size: 0.75rem;
    padding: 0.25em 0.5em;
}

.btn-primary {
    background: linear-gradient(180deg, #1f4ea8 0%, #143580 100%);
    border-color: #6a98ea;
    color: white;
    box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 4px 12px rgba(43,95,196,0.4), 0 0 0 1px rgba(74,130,224,0.4);
}

.btn-primary:hover {
    background: linear-gradient(180deg,
        color-mix(in oklab, #fff 24%, transparent),
        color-mix(in oklab, #1f4ea8 32%, transparent));
    border-color: color-mix(in oklab, #6a98ea 45%, transparent);
    backdrop-filter: blur(8px) saturate(1.3);
    box-shadow:
        inset 0 1px 0 #ffffff77,
        inset 0 -10px 16px -8px color-mix(in oklab, #1f4ea8 70%, transparent),
        0 8px 26px -8px color-mix(in oklab, #1f4ea8 85%, transparent);
    color: white;
}

.btn-accent {
    --acc: var(--accent);
    --acc-bright: color-mix(in oklab, var(--accent) 65%, #fff);
    background: color-mix(in oklab, var(--acc) 6%, transparent);
    border-color: var(--acc-bright);
    color: var(--acc-bright);
    box-shadow:
        0 0 0 1px color-mix(in oklab, var(--acc) 10%, transparent),
        0 0 14px 1px color-mix(in oklab, var(--acc) 50%, transparent),
        inset 0 0 12px -6px color-mix(in oklab, var(--acc-bright) 70%, transparent);
    text-shadow: 0 0 10px color-mix(in oklab, var(--acc-bright) 70%, transparent);
}
.btn-accent:hover {
    background: color-mix(in oklab, var(--acc) 26%, transparent);
    border-color: var(--acc-bright);
    color: #fff;
    box-shadow:
        0 0 0 1px color-mix(in oklab, var(--acc) 20%, transparent),
        0 0 26px 3px color-mix(in oklab, var(--acc) 85%, transparent),
        inset 0 0 16px -4px color-mix(in oklab, var(--acc-bright) 80%, transparent);
}

.btn-ghost {
    background: transparent;
    border-color: var(--line-soft);
    color: var(--ink-2);
    box-shadow: none;
}
.btn-ghost:hover { border-color: var(--line); color: var(--ink); background: transparent; }

.btn-save {
    background: rgba(43,95,196,0.2);
    border-color: rgba(43,95,196,0.5);
    color: #cfe0ff;
    box-shadow: none;
}

.btn-save:hover { background: rgba(43,95,196,0.3); border-color: rgba(43,95,196,0.8); color: #cfe0ff; }

/* .btn-ok, .btn-warn, .btn-danger, .btn-col {
    background: color-mix(in oklab, var(--col) 8%, var(--bg));
    border-color: color-mix(in oklab, var(--col) 40%, transparent);
    color: color-mix(in oklab, var(--col) 72%, #fff);
    box-shadow: none;
} */
/* .btn-ok, .btn-warn, .btn-danger, .btn-col {
    background: color-mix(in oklab, var(--col) 12%, var(--bg));
    border-color: color-mix(in oklab, var(--col) 90%, transparent);
    color: color-mix(in oklab, var(--col) 78%, #fff);
    box-shadow: inset 0 0 10px -1px color-mix(in oklab, var(--col) 85%, transparent);
}
.btn-ok:hover, .btn-warn:hover, .btn-danger:hover, .btn-col:hover { background: color-mix(in oklab, var(--col) 8%, var(--bg)); border-color: color-mix(in oklab, var(--col) 40%, transparent); color: color-mix(in oklab, var(--col) 72%, #fff); filter: brightness(1.12); }
.btn-ok:hover, .btn-warn:hover, .btn-danger:hover, .btn-col:hover {
    background: color-mix(in oklab, var(--col) 18%, var(--bg));
    border-color: var(--col);
    color: color-mix(in oklab, var(--col) 90%, #fff);
    box-shadow: inset 0 0 10px -1px color-mix(in oklab, var(--col) 100%, transparent), 0 0 12px -4px color-mix(in oklab, var(--col) 55%, transparent);
} */
/* scol — semantic color buttons */
.btn-ok, .btn-warn, .btn-danger {
    background: color-mix(in oklab, var(--col) 12%, var(--bg));
    border-color: color-mix(in oklab, var(--col) 55%, transparent);
    color: color-mix(in oklab, var(--col) 78%, #fff);
    box-shadow: inset 0 0 10px -1px color-mix(in oklab, var(--col) 45%, transparent);
}
.btn-ok:hover, .btn-warn:hover, .btn-danger:hover {
    background: color-mix(in oklab, var(--col) 18%, var(--bg));
    border-color: color-mix(in oklab, var(--col) 75%, transparent);
    color: color-mix(in oklab, var(--col) 90%, #fff);
    box-shadow: inset 0 0 10px -1px color-mix(in oklab, var(--col) 75%, transparent), 0 0 12px -4px color-mix(in oklab, var(--col) 55%, transparent);
}
.btn-ok { --col: oklch(0.66 0.15 150); }
.btn-warn { --col: oklch(0.80 0.15 92); }
.btn-danger { --col: oklch(0.62 0.20 25); }
/* scol-off */
.btn-scol-off { opacity: 0.55; box-shadow: inset 0 0 6px -2px color-mix(in oklab, var(--col) 20%, transparent); border-color: color-mix(in oklab, var(--col) 20%, transparent); }
.btn-scol-off:hover { opacity: 0.78; filter: none; border-color: color-mix(in oklab, var(--col) 40%, transparent); box-shadow: inset 0 0 10px -1px color-mix(in oklab, var(--col) 25%, transparent), 0 0 12px -4px color-mix(in oklab, var(--col) 55%, transparent); }
/* col — dynamic color buttons */
.btn-col {
    background: color-mix(in oklab, var(--col) 12%, var(--bg));
    border-color: color-mix(in oklab, var(--col) 90%, transparent);
    color: color-mix(in oklab, var(--col) 78%, #fff);
    box-shadow: inset 0 0 10px -1px color-mix(in oklab, var(--col) 85%, transparent);
}
.btn-col:hover {
    background: color-mix(in oklab, var(--col) 18%, var(--bg));
    border-color: var(--col);
    color: color-mix(in oklab, var(--col) 90%, #fff);
    box-shadow: inset 0 0 10px -1px color-mix(in oklab, var(--col) 100%, transparent), 0 0 12px -4px color-mix(in oklab, var(--col) 55%, transparent);
}
/* col-off */
/* .btn-col-off { opacity: 0.4; }
.btn-col-off:hover { opacity: 0.7; filter: none; } */
.btn-col-off { opacity: 0.55; box-shadow: inset 0 0 6px -2px color-mix(in oklab, var(--col) 20%, transparent); border-color: color-mix(in oklab, var(--col) 20%, transparent); }
.btn-col-off:hover { opacity: 0.78; filter: none; border-color: color-mix(in oklab, var(--col) 40%, transparent); box-shadow: inset 0 0 10px -1px color-mix(in oklab, var(--col) 25%, transparent), 0 0 12px -4px color-mix(in oklab, var(--col) 55%, transparent); }

.btn-active {
    --acc: var(--accent);
    --acc-bright: color-mix(in oklab, var(--accent) 65%, #fff);
    background:
        radial-gradient(120% 140% at 50% -30%, color-mix(in oklab, var(--acc) 30%, transparent), transparent 60%),
        var(--bg);
    border-color: color-mix(in oklab, var(--acc-bright) 30%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in oklab, var(--acc-bright) 55%, transparent),
        inset 0 1px 0 color-mix(in oklab, #fff 35%, transparent),
        0 3px 14px -8px color-mix(in oklab, var(--acc) 55%, transparent);
    color: var(--ink);
}
.btn-active:hover {
    box-shadow:
        inset 0 0 0 1px color-mix(in oklab, var(--acc-bright) 85%, transparent),
        inset 0 0 14px -4px color-mix(in oklab, var(--acc-bright) 60%, transparent),
        inset 0 1px 0 color-mix(in oklab, #fff 50%, transparent),
        0 6px 22px -8px color-mix(in oklab, var(--acc) 80%, transparent);
}

.btn-icon {
    width: 1.375rem;
    height: 1.375rem;
    padding: 0;
    background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg) 100%);
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 0.063rem 0 rgba(255,255,255,0.04) inset, 0 0.125rem 0.25rem rgba(0,0,0,0.5);
}
.btn-icon:hover {
    --acc: var(--accent);
    --acc-bright: color-mix(in oklab, var(--accent) 65%, #fff);
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-3) 100%);
    border-color: color-mix(in oklab, var(--acc-bright) 30%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in oklab, var(--acc-bright) 85%, transparent),
        inset 0 0 8px -2px color-mix(in oklab, var(--acc-bright) 60%, transparent),
        inset 0 1px 0 color-mix(in oklab, #fff 50%, transparent),
        0 4px 14px -6px color-mix(in oklab, var(--acc) 80%, transparent);
}
.btn-icon-muted { color: var(--ink-3); }
.btn-icon-muted:hover { --acc: oklch(0.66 0.15 150); --acc-bright: color-mix(in oklab, oklch(0.66 0.15 150) 65%, #fff); color: oklch(0.66 0.15 150); }
.btn-icon-ok { color: oklch(0.66 0.15 150); }
.btn-icon-ok:hover { --acc: oklch(0.66 0.15 150); --acc-bright: color-mix(in oklab, oklch(0.66 0.15 150) 65%, #fff); color: oklch(0.66 0.15 150); }
.btn-icon-danger { color: var(--ink-3); }
.btn-icon-danger:hover { --acc: var(--bad); --acc-bright: color-mix(in oklab, var(--bad) 65%, #fff); color: var(--bad); }

.btn-group {
    display: inline-flex;
}
.btn-group .btn {
    border-radius: 0;
    position: relative;
}
.btn-group .btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.btn-group .btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.btn-group .btn + .btn { margin-left: -0.063rem; }
.btn-group .btn:hover,
.btn-group .btn.btn-active { z-index: 1; }
/* .btn-group .btn-icon { ... } — use .btn-group-icon instead; .btn-icon is not a valid .btn-group child */
/* .btn-group .btn-icon.btn-active { ... } — use .btn-group-icon .btn.btn-active instead */
.btn-group-icon .btn {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-group-icon.btn-group-sm .btn {
    width: 1.5rem;
    height: 1.5rem;
}
.btn-group-icon .btn.btn-active {
    --acc: var(--accent);
    --acc-bright: color-mix(in oklab, var(--accent) 65%, #fff);
    background:
        radial-gradient(120% 140% at 50% -30%, color-mix(in oklab, var(--acc) 30%, transparent), transparent 60%),
        var(--bg);
    border-color: color-mix(in oklab, var(--acc-bright) 30%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in oklab, var(--acc-bright) 85%, transparent),
        inset 0 0 12px -2px color-mix(in oklab, var(--acc-bright) 60%, transparent),
        inset 0 1px 0 color-mix(in oklab, #fff 50%, transparent);
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Pill toggle — JS segmented control (.toggle-pill) + CSS checkbox variant (.toggle-pill-check) */
.toggle-pill,
.toggle-pill-check {
    --pill-acc: var(--accent);
    --pill-acc-glow: color-mix(in oklab, var(--pill-acc) 65%, #fff);
    position: relative;
    display: inline-flex;
    align-self: flex-start;
    padding: 4px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 3px #00000060;
    user-select: none;
}
.toggle-pill-check { cursor: pointer; }
.toggle-pill-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}
.toggle-pill .seg,
.toggle-pill-check .seg {
    position: relative;
    z-index: 1;
    padding: 0.5em 1.125em;
    font: inherit;
    font-size: 0.813rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    color: var(--ink-3);
    cursor: pointer;
    border-radius: 999px;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}
.toggle-pill-check .seg { flex: 1; }
/* JS pill active state */
.toggle-pill .seg[data-active] {
    color: var(--ink);
    text-shadow: 0 1px 6px color-mix(in oklab, var(--pill-acc) 50%, transparent);
}
/* Checkbox active states — checked = 1st seg (On), unchecked = 2nd seg (Off) */
/* .toggle-pill-check input:checked ~ .seg:nth-child(2),
.toggle-pill-check input:not(:checked) ~ .seg:nth-child(3) {
    color: var(--ink);
    text-shadow: 0 1px 6px color-mix(in oklab, var(--pill-acc) 50%, transparent);
} */
/* Checkbox checked (On) — bright */
.toggle-pill-check input:checked ~ .seg:nth-child(2) {
    color: var(--ink);
    text-shadow: 0 1px 6px color-mix(in oklab, var(--pill-acc) 50%, transparent);
}
/* Checkbox unchecked (Off) — dimmed */
.toggle-pill-check input:not(:checked) ~ .seg:nth-child(3) {
    color: var(--ink-2);
}
/* Shared knob visual */
.toggle-pill .knob,
.toggle-pill-check .knob {
    position: absolute;
    z-index: 0;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    border-radius: 999px;
    pointer-events: none;
    background: linear-gradient(180deg,
        color-mix(in oklab, #fff 16%, transparent),
        color-mix(in oklab, var(--pill-acc) 22%, transparent));
    border: 1px solid color-mix(in oklab, var(--pill-acc-glow) 45%, transparent);
    backdrop-filter: blur(8px) saturate(1.3);
    box-shadow:
        inset 0 1px 0 #ffffff55,
        inset 0 -8px 14px -8px color-mix(in oklab, var(--pill-acc) 60%, transparent),
        0 4px 18px -8px color-mix(in oklab, var(--pill-acc) 60%, transparent);
}
/* JS pill knob — width set by gp-toggle.js */
.toggle-pill .knob {
    width: 0;
    transition:
        transform 0.34s cubic-bezier(0.34, 1.3, 0.5, 1),
        width 0.34s cubic-bezier(0.34, 1.3, 0.5, 1),
        box-shadow 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}
/* Checkbox knob — CSS-driven; grey when unchecked, accent when checked */
.toggle-pill-check .knob {
    width: calc(50% - 4px);
    transform: translateX(calc(100%));
    transition:
        transform 0.34s cubic-bezier(0.34, 1.3, 0.5, 1),
        box-shadow 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
    background: linear-gradient(180deg,
        color-mix(in oklab, #fff 10%, transparent),
        color-mix(in oklab, var(--ink-4) 28%, transparent));
    border-color: color-mix(in oklab, var(--line) 80%, transparent);
    box-shadow:
        inset 0 1px 0 #ffffff22,
        inset 0 -8px 14px -8px color-mix(in oklab, var(--ink-4) 25%, transparent),
        0 4px 18px -8px color-mix(in oklab, var(--ink-4) 15%, transparent);
}
.toggle-pill-check input:checked ~ .knob {
    transform: translateX(0);
    background: linear-gradient(180deg,
        color-mix(in oklab, #fff 16%, transparent),
        color-mix(in oklab, var(--pill-acc) 22%, transparent));
    border-color: color-mix(in oklab, var(--pill-acc-glow) 45%, transparent);
    box-shadow:
        inset 0 1px 0 #ffffff55,
        inset 0 -8px 14px -8px color-mix(in oklab, var(--pill-acc) 60%, transparent),
        0 4px 18px -8px color-mix(in oklab, var(--pill-acc) 60%, transparent);
}
@media (prefers-reduced-motion: reduce) {
    .toggle-pill .knob,
    .toggle-pill-check .knob { transition: width 0.01s linear, transform 0.01s linear; }
}
/* Color variants — override --pill-acc only; --pill-acc-glow derives automatically */
.toggle-pill-red,
.toggle-pill-check.toggle-pill-red { --pill-acc: var(--bad); }
.toggle-pill-green,
.toggle-pill-check.toggle-pill-green { --pill-acc: var(--ok); }
.toggle-pill-dull,
.toggle-pill-check.toggle-pill-dull { --pill-acc: var(--ink-3); }
/* Small size modifier */
.toggle-pill-sm .seg,
.toggle-pill-check.toggle-pill-sm .seg {
    font-size: 0.688rem;
    padding: 0.375em 0.875em;
}

.error-panel {
    background: rgba(255,107,107,0.05);
    border: 1px solid rgba(255,107,107,0.25);
    border-left: 0.188rem solid var(--bad);
    border-radius: var(--r-sm);
    padding: 0.625rem 0.875rem;
    margin-bottom: 1.125rem;
    box-shadow: inset 3px 0 8px rgba(255,107,107,0.08);
}

.error-panel-message {
    color: var(--bad);
    font-size: 0.813rem;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 0.375rem;
    word-break: break-word;
}

.error-panel-suggestion {
    color: var(--ink-3);
    font-size: 0.781rem;
    margin-bottom: 0;
}

.info-notice {
    background: rgba(90,140,201,0.05);
    border: 1px solid rgba(90,140,201,0.3);
    border-left: 0.188rem solid var(--accent-2);
    border-radius: var(--r-sm);
    padding: 0.625rem 0.875rem;
    font-size: 0.813rem;
    color: var(--ink-2);
    margin-bottom: 1.125rem;
    box-shadow: inset 3px 0 8px rgba(90,140,201,0.08);
}

.accounts-toolbar {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.search-options-row {
    margin-bottom: 1.125rem;
}

.search-option-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.781rem;
    color: var(--ink-2);
    cursor: pointer;
    user-select: none;
}

.search-input {
    min-width: 17.5rem;
}

.page-size-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.page-size-label {
    font-size: 0.75rem;
    color: var(--ink-3);
}

.sort-header {
    color: var(--ink-3);
    font-size: 0.688rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.038rem;
    text-decoration: none;
    transition: color 0.15s;
}
.sort-header:hover { color: var(--ink); }

.account-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.muted-subtitle {
    font-size: 0.688rem;
    color: var(--ink-3);
    margin-top: 0.188rem;
    font-family: 'JetBrains Mono', monospace;
}

.banned-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.688rem;
    font-weight: 600;
    padding: 0.188rem 0.563rem;
    border-radius: 0.188rem;
    border: 1px solid rgba(255,107,107,0.25);
    background: rgba(255,107,107,0.05);
    color: var(--bad);
}

.battletag-badge {
    display: inline-block;
    padding: 0.125rem 0.438rem;
    font-size: 0.688rem;
    border-radius: 0.188rem;
    background: var(--bg-3);
    color: var(--ink-3);
    border: 1px solid var(--line-soft);
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
}
.char-realm { display: block; font-size: 0.75rem; color: var(--ink-3); }
.gc-team-tag { display: inline; }
.gc-team-tag + .gc-team-tag::before { content: ", "; }
.gc-sort-col { cursor: pointer; user-select: none; white-space: nowrap; }
.gc-sort-col:hover { color: var(--accent); }
.gc-sort-indicator { font-size: 0.625rem; margin-left: 0.25rem; color: var(--accent); }
.gc-search-group { display: inline-flex; align-items: stretch; }
.gc-search-group input[type="text"] { border-radius: var(--r-sm) 0 0 var(--r-sm); border-right: none; }
.gc-search-group .guild-search-clear { border: 1px solid var(--line); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 0 0.5rem; background: var(--bg-2); display: flex; align-items: center; }
.gc-search-group .modteam-input ~ .guild-search-clear { border-color: var(--line); }
.gc-search-group .guild-search-clear:hover { background: var(--bg-3); color: var(--ink); }
.gc-search-group:focus-within input[type="text"] { border-color: var(--accent); }
.gc-search-group:focus-within .guild-search-clear { border-color: var(--accent); }

.copy-btn {
    background: none;
    border: none;
    color: var(--ink-3);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s;
}

.copy-btn:hover {
    color: var(--ink);
}

.role-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
}

.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.313rem;
    padding: 0.188rem 0.563rem;
    font-size: 0.688rem;
    font-weight: 500;
    border-radius: 0.188rem;
    background: var(--bg-3);
    border: 1px solid var(--line);
    color: var(--ink-2);
}

.role-remove-btn {
    background: none;
    border: none;
    color: var(--ink-3);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s;
}

.role-remove-btn:hover {
    color: var(--bad);
}

.assign-role-form {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* .role-select {
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
    font-family: inherit;
    background-color: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 0.188rem;
    color: var(--ink);
} */

.text-muted { color: var(--ink-3); }
/*.label-required::after { content: " *"; color: var(--warn); }*/
.gp-label-required::after { content: " *"; color: var(--bad); }
.gp-save-indicator { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; align-self: center; display: none; transition: background 0.2s; }
.gp-save-indicator.is-saved { display: block; background: var(--ok); }
.gp-save-indicator.is-dirty { display: block; background: var(--bad); }

.char-link {
    color: var(--accent-2);
    font-size: 0.813rem;
    cursor: default;
}

.action-cell {
    display: flex;
    gap: 0.375rem;
    /* flex-wrap: wrap; */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
}

.row-banned td {
    opacity: 0.7;
}

.row-banned {
    border-left: 0.188rem solid var(--bad) !important;
    background: rgba(255,107,107,0.04);
}

.pagination-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.pagination-info {
    font-size: 0.75rem;
    color: var(--ink-3);
}

.pagination-links {
    display: flex;
    gap: 0.375rem;
}

.chars-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1.125rem;
}

.char-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.875rem;
}

.char-card-wide {
    position: relative;
    overflow: hidden;
    padding: 1rem 1.125rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-card);
    transition: transform 0.15s, box-shadow 0.15s;
    font-family: Inter, system-ui, sans-serif;
    color: var(--ink);
}
.char-card-wide:hover {
    transform: translateY(-0.063rem);
    box-shadow:
        0 0.063rem 0 rgba(255,255,255,0.04) inset,
        0 0.25rem 1rem rgba(0,0,0,0.4),
        0 1rem 2.5rem rgba(0,0,0,0.5),
        0 0 0 0.063rem var(--accent),
        0 0 1.5rem color-mix(in oklch, var(--accent) 35%, transparent);
}

.char-top {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 0.188rem;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent);
}

.ccw-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.ccw-name-block { display: flex; flex-direction: column; gap: 0.188rem; min-width: 0; }
.ccw-name-line { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.ccw-name-line .role-icon { margin-right: -0.313rem; }

.ccw-class-icon {
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 0.188rem;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 0.063rem 0 rgba(255,255,255,0.04) inset, 0 0.125rem 0.25rem rgba(0,0,0,0.5);
    flex-shrink: 0;
    display: block;
}

.ccw-lvl-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.688rem;
    font-weight: 400;
    color: var(--ink-4);
    letter-spacing: 0.019rem;
    flex-shrink: 0;
}

.ccw-realm {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.ccw-lvl-inline {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ink-3);
    letter-spacing: 0.019rem;
    flex-shrink: 0;
}
a.ccw-name { text-decoration: none; }
.ccw-name {
    font-weight: 700;
    font-size: 1.063rem;
    letter-spacing: 0.006rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ccw-realm {
    font-size: 0.719rem;
    color: var(--ink-3);
    margin-top: 0.125rem;
    letter-spacing: 0.006rem;
}

.ccw-more-icon {
    background: none;
    border: none;
    color: var(--ink-3);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    letter-spacing: 0.063rem;
    border-radius: 0.188rem;
    align-self: flex-start;
    margin-top: 0.125rem;
    transition: color 0.12s, background 0.12s;
}
.ccw-more-icon:hover { color: var(--ink); background: rgba(255,255,255,0.04); }

.ccw-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem 1.125rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    min-height: 2.063rem;
    align-items: center;
}
.ccw-meta-row.ccw-meta-empty::before {
    content: '— No team —';
    font-size: 0.719rem;
    color: var(--ink-4);
    font-style: italic;
}
.ccw-meta-item { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--ink-2); }
.ccw-meta-text { letter-spacing: 0.006rem; }
.ccw-team-logo {
    width: 1.125rem; height: 1.125rem;
    border-radius: 0.188rem;
    background: linear-gradient(135deg, #2b3a5a, #1a2440);
    border: 1px solid var(--line-soft);
    color: var(--ink-2);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.031rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.ccw-controls-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}
.ccw-controls-row:last-child { margin-top: auto; }

.ccw-controls-row form {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

/*.ccw-controls-row .btn,
.ccw-controls-row a.btn,
.ccw-controls-row button,
.ccw-controls-row select {
    font-size: 0.688rem;
    font-family: inherit;
    padding: 0.313rem 0.563rem;
    border-radius: 0.25rem;
    height: auto;
    line-height: 1;
    flex-shrink: 0;
}

.ccw-controls-row select {
    padding-right: 1.375rem;
    background-size: 0.5rem;
    background-position: right 0.375rem center;
    flex: 1 1 auto;
    min-width: 0;
}*/
.ccw-controls-row select {
    font-size: 0.688rem;
    font-family: inherit;
    padding: 0.313rem 0.563rem;
    padding-right: 1.375rem;
    border-radius: 0.25rem;
    height: auto;
    line-height: 1;
    flex-shrink: 0;
    flex: 1 1 auto;
    background-size: 0.5rem;
    background-position: right 0.375rem center;
    min-width: 0;
}

.ccw-rank-static { flex: 1 1 8.75rem; min-width: 7.5rem; display: inline-flex; align-items: center; }
.ccw-rank-empty { font-size: 0.75rem; color: var(--ink-3); font-style: italic; }

.char-card {
    position: relative;
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 0.75rem;
    width: 10rem;
    cursor: default;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.char-card-level { font-size: 0.688rem; color: var(--ink-3); }
.char-card-name { font-size: 0.875rem; font-weight: 700; }
.char-card-divider { border: none; border-top: 1px solid currentColor; margin: 2px 0; opacity: 0.3; }
.char-card-realm { font-size: 0.719rem; color: var(--ink-3); }

.char-card-importable { opacity: 0.55; cursor: pointer; transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s; }
.char-card-importable:hover { opacity: 0.85; }
.char-card-importable.selected {
    opacity: 1;
    transform: translateY(-0.063rem);
    box-shadow:
        0 0.063rem 0 rgba(255,255,255,0.04) inset,
        0 0.25rem 1rem rgba(0,0,0,0.4),
        0 0 0 0.063rem var(--accent),
        0 0 1.125rem color-mix(in oklch, var(--accent) 30%, transparent);
}

.import-action-bar {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-top: 0.875rem;
    margin-bottom: 0.875rem;
}

.section-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

.section-title-row h2 { margin-bottom: 0; }

/* .icon-btn — removed; replaced with .btn.btn-icon (P3a) */
/* .icon-btn {
    padding: 0.25rem 0.375rem;
    display: inline-flex;
    align-items: center;
    color: var(--ink-3);
    background: none;
    border: 1px solid var(--line-soft);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
} */

/* .icon-btn:hover { color: var(--ink-2); border-color: var(--line); } */

.profile-label {
    color: var(--ink-3);
    font-size: 0.75rem;
    width: 8.75rem;
    min-width: 20%;
    vertical-align: middle;
}
.data-table td span + .btn {
    margin-left: 0.5rem;
}

.gp-create-panel {
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-card);
    padding: 1.125rem;
    margin-bottom: 1.125rem;
}

.gp-create-panel h2 {
    font-size: 0.813rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.875rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--line-soft);
}

.gp-create-form {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
}

.roles-create-name { width: 12.5rem; }
.roles-create-description { flex: 1; min-width: 17.5rem; }

.roles-create-error {
    font-size: 0.75rem;
    color: var(--bad);
    margin-top: 0.5rem;
}

.role-permissions-detail td,
.role-ranks-detail .role-detail-cell,
.rank-roles-detail .role-detail-cell,
.rank-time-limit-detail td {
    background: var(--bg);
    padding: 1.125rem 1.25rem 1.375rem;
    box-shadow: inset 0 1px 0 rgba(220,230,255,0.08),
                inset 0 0.5rem 1rem -0.625rem rgba(0,0,0,0.5),
                inset 0 -0.5rem 1rem -0.625rem rgba(0,0,0,0.5);
}

.permissions-modules-grid { display: grid; gap: 0.75rem; }
.permissions-modules-grid-6 { grid-template-columns: repeat(6, 1fr); }
.permissions-modules-grid-5 { grid-template-columns: repeat(5, 1fr); }

.permission-module {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 7.5rem;
}

.permission-module-name {
    font-size: 0.656rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.038rem;
    color: var(--ink-3);
    margin-bottom: 0.125rem;
}

.permission-action-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.781rem;
    color: var(--ink-2);
    cursor: pointer;
    user-select: none;
}

.role-cell-edit-input { width: 100%; }

.role-cell-actions { white-space: nowrap; }

.role-delete-warning {
    font-size: 0.75rem;
    color: var(--ink-3);
    margin-right: 0.5rem;
}

.permission-per-team-label {
    font-size: 0.813rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.625rem;
    margin-top: 0.25rem;
}

.profile-name-input { width: 12rem; }

#force-logout-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#force-logout-dialog {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 0.375rem;
    padding: 2rem 2.5rem;
    max-width: 23.75rem;
    width: 100%;
    text-align: center;
}

#force-logout-dialog h3 {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}

#force-logout-dialog p {
    color: var(--ink-3);
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
}

#force-logout-dialog .btn {
    margin-top: 1.25rem;
    display: inline-block;
}

.feedback-table td { text-align: left; }
.feedback-chevron-col { width: 1.5rem; }
.feedback-chevron-cell { text-align: center; color: var(--ink-4); font-size: 0.688rem; cursor: pointer; }
.feedback-date-cell { white-space: nowrap; width: 10rem; }
.feedback-submitter-cell { white-space: nowrap; width: 12rem; }
.feedback-action-cell { width: 6rem; }
.feedback-location-label { color: var(--ink-3); font-size: 0.75rem; margin: 0 0 0.5rem; word-break: break-all; }
.feedback-preview-cell { color: var(--ink-2); }
.feedback-main-row { cursor: pointer; }
.feedback-main-row:hover td { background: var(--bg-2); }
.feedback-unread .feedback-preview-cell { font-weight: 600; color: var(--ink); }

.feedback-sub-cell {
    font-size: 0.813rem;
    line-height: 1.6;
    color: var(--ink-2);
}
.feedback-new-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.063rem 0.375rem;
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--ok) 20%, transparent);
    color: var(--ok);
    letter-spacing: 0.031rem;
    margin-right: 0.375rem;
    vertical-align: middle;
}
.feedback-msg-segment { margin: 0; text-align: left; }
.feedback-separator { border: none; border-top: 1px solid var(--line); margin: 0.75rem 0; }

.btn-attention {
    background: linear-gradient(180deg, #a01818 0%, #7c0e0e 100%);
    border-color: #e05050;
    color: white;
    box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 4px 12px rgba(160,24,24,0.4), 0 0 0 1px rgba(200,60,60,0.4);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn-attention::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, #ffffff70 47%, #ffffffcc 50%, #ffffff70 53%, transparent 70%);
    transform: translateX(-130%) skewX(-18deg);
    animation: btn-attention-sweep 5s cubic-bezier(.6, 0, .2, 1) infinite;
    mix-blend-mode: screen;
    pointer-events: none;
}
.btn-attention:hover::after {
    animation-play-state: paused;
    opacity: 0;
}
@keyframes btn-attention-sweep {
    0%,  18% { transform: translateX(-130%) skewX(-18deg); }
    55%,100% { transform: translateX( 130%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-attention::after { animation: none; }
}

.btn-attention:hover {
    background: linear-gradient(180deg,
        color-mix(in oklab, #fff 24%, transparent),
        color-mix(in oklab, #a01818 32%, transparent));
    border-color: color-mix(in oklab, #e05050 45%, transparent);
    backdrop-filter: blur(8px) saturate(1.3);
    box-shadow:
        inset 0 1px 0 #ffffff77,
        inset 0 -10px 16px -8px color-mix(in oklab, #a01818 70%, transparent),
        0 8px 26px -8px color-mix(in oklab, #a01818 85%, transparent);
    color: white;
}

.feedback-widget {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.feedback-panel {
    width: 22rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-pop);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.feedback-panel-title {
    font-size: 0.813rem;
    font-weight: 600;
    color: var(--ink);
}

.feedback-textarea {
    width: 100%;
    resize: none;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.813rem;
    padding: 0.438rem;
    line-height: 1.4;
}
.feedback-textarea:focus { outline: none; border-color: var(--accent); }

.feedback-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.feedback-char-count {
    font-size: 0.75rem;
    color: var(--ink-3);
}
.feedback-char-count.feedback-char-warn { color: var(--warn); }
.feedback-char-count.feedback-char-low { color: var(--bad); }

.feedback-status {
    font-size: 0.75rem;
    min-height: 1rem;
}

.teams-toolbar {
    margin-bottom: 1.25rem;
    display: flex;
    gap: 0.75rem;
}

.teams-create-name { flex: 1; max-width: 20rem; }

.team-logo-thumb {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: cover;
    border-radius: 0.25rem;
    border: 1px solid var(--line);
}

.team-cell-chevron {
    width: 0.063rem;
    padding-right: 0;
}
.team-row-chevron {
    background: none;
    border: none;
    color: var(--ink-3);
    cursor: pointer;
    padding: 0.25rem 0.375rem;
    font-size: 0.688rem;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s;
}
/* .team-row-chevron.open { transform: rotate(90deg); color: var(--accent); } [removed — chevron now uses textContent toggle: ⮞/⮟] */
.team-cell-logo {
    width: 0.063rem;
    padding-right: 0;
}

.team-row-logo {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: cover;
    border-radius: 0.25rem;
    border: 1px solid var(--line);
    flex-shrink: 0;
}

.team-row-logo-placeholder {

    border: none;
    filter: brightness(0) invert(0.53);
}

.team-gow-badge {
    display: inline-block;
    padding: 0.188rem 0.5rem;
    font-size: 0.719rem;
    font-weight: 600;
    border-radius: 0.188rem;
    background: rgba(43,95,196,0.14);
    color: #9fb4ff;
    border: 1px solid rgba(159,180,255,0.25);
    font-family: 'JetBrains Mono', monospace;
}

.team-action-warning {
    font-size: 0.75rem;
    color: var(--warn);
    margin-right: 0.5rem;
}

.team-logo-upload-row td {
    background-color: var(--bg-3);
    padding: 0.75rem 1rem;
}

.team-logo-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.team-logo-input {
    font-size: 0.85rem;
    color: var(--ink);
}

.team-logo-hint {
    font-size: 0.78rem;
}

td.team-details-td { padding: 0; }
.team-details-panel {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2.5rem;
    padding: 1.125rem 1.25rem 1.375rem;
    background: var(--bg);
    box-shadow: inset 0 1px 0 rgba(220,230,255,0.08),
                inset 0 0.5rem 1rem -0.625rem rgba(0,0,0,0.5),
                inset 0 -0.5rem 1rem -0.625rem rgba(0,0,0,0.5);
}

.team-details-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.75rem;
}
.team-details-col:nth-child(1) { grid-column: span 8; }
.team-details-col:nth-child(2) { grid-column: span 4; }

.team-details-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
}

.team-details-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.team-details-section-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.team-details-section-content.stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    width: 100%;
}

.team-details-section-content.stack > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
}

.team-details-heading {
    font-size: 0.656rem;
    text-transform: uppercase;
    letter-spacing: 0.038rem;
    color: var(--ink-3);
    font-weight: 600;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 0.125rem;
    text-align: left;
    width: 100%;
}

.team-logo-hint { opacity: 0.65; }
.team-save-ack { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0.75rem; margin-bottom: 0; background: rgba(76,175,125,0.1); border-bottom: 1px solid rgba(76,175,125,0.2); font-size: 0.813rem; color: var(--ok); }
.team-save-ack-dismiss { background: none; border: none; cursor: pointer; color: var(--ink-3); padding: 0 0.25rem; font-size: 1rem; line-height: 1; }

.team-req-input {
    padding: 0.15rem 0.4rem;
    color: var(--ink);
    font-size: 0.88rem;
    font-family: inherit;
    text-align: right;
    width: 3.5rem;
    -moz-appearance: textfield;
}
.team-req-input::-webkit-outer-spin-button,
.team-req-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.team-logo-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 1px dashed rgba(74, 144, 217, 0.35);
    border-radius: 0.25rem;
    padding: 0.5rem 1.5rem;
    background-color: rgba(74, 144, 217, 0.06);
    cursor: default;
    transition: border-color 0.15s, background-color 0.15s;
}

.team-logo-dropzone.dragover {
    border-color: var(--accent-glow);
    background-color: rgba(74, 144, 217, 0.18);
}

.team-logo-dropzone-text {
    font-size: 0.85rem;
    color: var(--accent);
    pointer-events: none;
}
.team-tag-input { flex: 1; }

.team-edit-input {
    background-color: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 0.25rem;
    color: var(--ink);
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
    width: 12.5rem;
}

.team-ranks-group {
    margin-bottom: 1.75rem;
}

.team-ranks-group-title {
    font-size: 0.813rem;
    color: var(--ink-2);
    margin-bottom: 0.5rem;
}

.ranks-empty {
    color: var(--ink-3);
    font-size: 0.813rem;
}

.rank-val.rank-val-technical,
td:nth-child(2) .rank-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--ink-2);
}

.rank-input { width: 100%; }
.rank-input-sm { width: 5rem; }

.rank-actions { white-space: nowrap; }

.rank-create-form .rank-input { width: 11.25rem; }

.modteam-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1.125rem;
}

.modteam-logo {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
}

.modteam-title {
    margin: 0;
    flex: 1;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ink);
}

.modteam-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.125rem;
    align-items: center;
}

.modteam-sort-bar {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}
.modteam-sort-label {
    font-size: 0.688rem;
    color: var(--ink-3);
    margin-right: 0.125rem;
}
/* .modteam-sort-btn.btn-active — dead: selector targeted wrong class (js-modteam-sort-btn); .btn-active handles active state
.modteam-sort-btn.btn-active {
    background: var(--bg-3);
    border-color: var(--accent);
    color: var(--ink);
} */
.modteam-role-group-heading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.656rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.038rem;
    color: var(--ink-3);
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 0.125rem;
}

.modteam-char-cards {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
}

.modteam-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: var(--sh-card);
    transition: transform 0.15s, box-shadow 0.15s;
}
.modteam-card:hover {
    transform: translateY(-0.063rem);
    box-shadow:
        0 0.063rem 0 rgba(255,255,255,0.04) inset,
        0 0.25rem 1rem rgba(0,0,0,0.4),
        0 1rem 2.5rem rgba(0,0,0,0.5),
        0 0 0 0.063rem var(--accent),
        0 0 1.5rem color-mix(in oklch, var(--accent) 35%, transparent);
}

.modteam-card-level {
    font-size: 0.75rem;
    color: var(--ink-3);
}

.modteam-card-name {
    font-weight: 700;
    font-size: 1.063rem;
    letter-spacing: 0.006rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modteam-card-realm {
    font-size: 0.8rem;
    color: var(--ink-3);
}

.modteam-card-rank-badge {
    font-size: 0.75rem;
    background-color: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 0.188rem;
    padding: 0.1rem 0.35rem;
    display: inline-block;
    width: fit-content;
}

.modteam-team-badge {
    font-size: 0.7rem;
    background-color: rgba(255,255,255,0.08);
    border: 1px solid var(--line);
    border-radius: 0.188rem;
    padding: 0.1rem 0.3rem;
    display: inline-block;
}

.sync-other-teams {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.sync-other-teams-label {
    font-size: 0.656rem;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.038rem;
    font-weight: 600;
    flex-shrink: 0;
}

.gp-char-cards-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
}

.gp-char-card-compact {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: var(--sh-card);
    transition: transform 0.15s, box-shadow 0.15s;
}
.gp-char-card-compact:hover {
    transform: translateY(-0.063rem);
    box-shadow:
        0 0.063rem 0 rgba(255,255,255,0.04) inset,
        0 0.25rem 1rem rgba(0,0,0,0.4),
        0 1rem 2.5rem rgba(0,0,0,0.5),
        0 0 0 0.063rem var(--accent),
        0 0 1.5rem color-mix(in oklch, var(--accent) 35%, transparent);
}
.gp-char-card-compact .ccw-name-line {
    justify-content: space-between;
}
.gp-char-card-compact .ccw-name {
    font-size: 0.8rem;
}
.roster-group-label {
    font-size: 0.75rem;
    color: var(--ink-3);
    margin: 0.75rem 0 0.375rem;
}

/* .modteam-remove-btn — dead: class not assigned in HTML; Remove button uses btn btn-xs btn-danger directly
.modteam-remove-btn {
    margin-top: 0.25rem;
    width: 100%;
} */

.modteam-empty {
    color: var(--ink-3);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.sync-conflict-view {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sync-section {
    border: 1px solid var(--line);
    border-radius: 0.375rem;
    padding: 1rem;
}

.sync-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.sync-section-title {
    font-weight: 600;
    font-size: 0.9rem;
    flex: 1;
}

.sync-bulk-actions {
    display: flex;
    gap: 0.4rem;
}

.sync-global-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.sync-card-actions {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

.sync-card-removed {
    opacity: 0.7;
}

.sync-card-new {
    border-color: var(--accent);
}

.modteam-guild-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.guild-search-clear {
    background: none;
    border: none;
    color: var(--ink-3);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 0.2rem;
    line-height: 1;
}

.guild-search-clear:hover {
    color: var(--ink);
}

.modteam-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.modteam-filter-label {
    font-size: 0.75rem;
    color: var(--ink-3);
    white-space: nowrap;
}

.modteam-input {
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--ink);
    background-color: var(--bg);
    border: 1px solid var(--line);
    border-radius: 0.25rem;
}

select.modteam-input { padding-right: 1.75rem; }

.modteam-input-sm {
    width: 5rem;
}

.modteam-input:focus {
    outline: none;
    border-color: var(--accent);
}

.modteam-guild-table td {
    font-size: 0.875rem;
}

.sync-no-conflicts-notice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-2);
    border-left: 0.188rem solid var(--ok);
    padding: 0.6rem 1rem;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.sync-no-conflicts-dismiss {
    background: none;
    border: none;
    color: var(--ink-3);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 0.2rem;
    line-height: 1;
}

.sync-no-conflicts-dismiss:hover {
    color: var(--ink);
}

.modteam-bnet-panel {
    max-width: 31.25rem;
}

.modteam-bnet-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.modteam-bnet-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.modteam-bnet-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bad);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.char-card-teams {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.25rem;
}

.char-team-badge {
    font-size: 0.7rem;
    background-color: rgba(255,255,255,0.08);
    border: 1px solid var(--line);
    border-radius: 0.188rem;
    padding: 0.1rem 0.3rem;
}

.role-detail-cell { padding: 1.125rem 1.25rem 1.375rem; }

.role-detail-label {
    font-size: 0.688rem;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.031rem;
    display: block;
    margin-top: 0.625rem;
    margin-bottom: 0;
    text-align: left;
}

.role-ranks-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.role-linked-ranks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.role-rank-badge {
    font-size: 0.688rem;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 0.188rem;
    padding: 0.188rem 0.563rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--ink-2);
}

.role-rank-unlink-btn {
    background: none;
    border: none;
    color: var(--ink-3);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    line-height: 1;
}

.role-rank-unlink-btn:hover {
    color: var(--ink);
}

.role-link-rank-form {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.rank-link-role-form {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.role-rank-select {
    min-width: 12.5rem;
    max-width: 20rem;
}

.team-selection-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.125rem;
    margin-top: 1.5rem;
}

.team-selection-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-card);
    text-decoration: none;
    color: var(--ink);
    min-width: 11.25rem;
    transition: transform 0.15s, box-shadow 0.15s;
}

.team-selection-card:hover {
    transform: translateY(-0.125rem);
    box-shadow:
        0 0.063rem 0 rgba(255,255,255,0.04) inset,
        0 0.25rem 1rem rgba(0,0,0,0.4),
        0 1rem 2.5rem rgba(0,0,0,0.5),
        0 0 0 0.063rem var(--accent),
        0 0 1.5rem color-mix(in oklch, var(--accent) 35%, transparent);
}

.team-selection-logo {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-soft);
}

.team-selection-logo-placeholder {
    width: 4.5rem;
    height: 4.5rem;
    background: var(--bg-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
}

.team-selection-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
}

.team-selection-count {
    font-size: 0.75rem;
    color: var(--ink-3);
}

.bnet-result-card {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background-color: var(--bg-2);
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bnet-result-name {
    font-weight: 600;
    font-size: 1rem;
}

.bnet-result-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.875rem;
}

.bnet-result-sep {
    color: var(--ink-3);
}

.bnet-result-avg {
    color: var(--ink-3);
}

.bnet-already-on-team {
    font-size: 0.8rem;
    color: var(--ink-3);
    border: 1px solid var(--line);
    border-radius: 0.25rem;
    padding: 0.2rem 0.5rem;
}

.ranks-error-notice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,107,107,0.05);
    border: 1px solid rgba(255,107,107,0.25);
    border-left: 0.188rem solid var(--bad);
    border-radius: var(--r-sm);
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.875rem;
    font-size: 0.813rem;
    color: var(--bad);
    box-shadow: inset 3px 0 8px rgba(255,107,107,0.08);
}

.ranks-error-dismiss {
    background: none;
    border: none;
    color: var(--ink-3);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 0.2rem;
    line-height: 1;
}

.ranks-error-dismiss:hover {
    color: var(--ink);
}

.rank-roles-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.rank-roles-panel-header .role-detail-label {
    margin-top: 0;
}

.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.error-page-code {
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--accent);
    opacity: 0.6;
    margin-bottom: 1rem;
}

.error-page-title {
    font-size: 1.8rem;
    margin-bottom: 0.75rem;
}

.error-page-message {
    color: var(--ink-3);
    margin-bottom: 2rem;
}

.raids-toolbar {
    margin-bottom: 1.125rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.raid-import-btn.import-locked {
    opacity: 0.35;
    cursor: not-allowed;
    border-style: dashed;
}

.import-inline-progress {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--ink-3);
}

.import-progress-spinner {
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.browse-raids-panel {
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-card);
    padding: 1.125rem 1.25rem;
    margin-bottom: 1.125rem;
}

.browse-raids-heading {
    font-size: 0.781rem;
    color: var(--ink-3);
    margin-bottom: 0.875rem;
}

.browse-expansion {
    margin-bottom: 1.25rem;
}

.browse-expansion-name {
    font-size: 0.844rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.browse-raids-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.browse-raid-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.25rem;
    border-top: 1px solid var(--line);
}

.browse-raid-name {
    flex: 1;
    font-size: 0.813rem;
    color: var(--ink-2);
}

.browse-imported-badge {
    font-size: 0.75rem;
    color: var(--ink-3);
    font-style: italic;
}

.browse-no-raids {
    font-size: 0.85rem;
    padding: 0.25rem 0;
}

.raid-action-warning {
    color: var(--warn);
    font-size: 0.75rem;
    margin-right: 0.5rem;
}

.edit-raid-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.edit-raid-title {
    flex: 1;
}

.edit-raid-header h1 {
    margin: 0;
}

.edit-raid-shortname {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.encounter-section {
    margin-bottom: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 0.25rem;
    overflow: hidden;
}

.encounter-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-2);
    cursor: pointer;
    user-select: none;
}

.encounter-header:hover {
    background: rgba(255,255,255,0.04);
}

.team-schedule-add-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; }

.team-schedule-time-input {
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 0.22rem 0.5rem;
    color: var(--ink);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.813rem;
    line-height: 1.3;
    letter-spacing: 0.075rem;
    text-align: center;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.team-schedule-time-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(43, 95, 196, 0.15);
}
.team-schedule-time-input::-webkit-calendar-picker-indicator {
    filter: invert(0.6);
    cursor: pointer;
}

.team-schedule-table td, .team-schedule-table th { padding: 0.375rem 0.5rem; }
.team-schedule-table th:nth-child(1),
.team-schedule-table td:nth-child(1) {
    text-align: left;
}

.team-schedule-table th:nth-child(2),
.team-schedule-table th:nth-child(3),
.team-schedule-table td:nth-child(2),
.team-schedule-table td:nth-child(3) {
    text-align: right;
}

.shortname-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
    background: var(--bg-2);
    border-top: 1px solid var(--line);
}

.shortname-row-label {
    font-size: 0.8rem;
}

.shortname-input {
    flex: 1;
    max-width: 24rem;
}

.shortname-error {
    font-size: 0.8rem;
    color: var(--ink-3);
}

.encounter-toggle-icon {
    font-size: 0.75rem;
    color: var(--ink-3);
    width: 0.75rem;
}

.encounter-name {
    font-weight: 600;
    flex: 1;
}

.encounter-item-count {
    font-size: 0.8rem;
    color: var(--ink-3);
}

.encounter-items {
    padding: 0.5rem 0;
}

.encounter-no-items {
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
}

.raid-item-row {
    border-bottom: 1px solid var(--line);
    padding: 0.4rem 0.75rem;
}

.raid-item-row:last-child {
    border-bottom: none;
}

.item-view-summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.item-right-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    flex-shrink: 0;
}

.item-wowhead-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    cursor: default;
}

.item-wowhead-link:hover {
    text-decoration: none;
}

.item-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.188rem;
    border: 2px solid transparent;
    flex-shrink: 0;
    box-sizing: border-box;
}

.item-name {
    flex: 1;
    font-size: 0.9rem;
}

.item-slot {
    font-size: 0.8rem;
    min-width: 5.625rem;
    text-align: right;
}

.item-slot-overridden {
    color: #c8923a;
}

.item-role-badge {
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--line);
    padding: 0.1rem 0;
    border-radius: 0.188rem;
    font-size: 0.72rem;
    width: 2.875rem;
    text-align: center;
    flex-shrink: 0;
}

.item-bislist-badge {
    background: rgba(80,200,120,0.12);
    color: #50c878;
    border: 1px solid rgba(80,200,120,0.35);
    padding: 0.1rem 0;
    border-radius: 0.188rem;
    font-size: 0.72rem;
    width: 2.875rem;
    text-align: center;
    flex-shrink: 0;
}

.item-class-badge {
    padding: 0.1rem 0;
    border-radius: 0.188rem;
    font-size: 0.72rem;
    width: 2.875rem;
    text-align: center;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.item-class-badge-all {
    background: rgba(80, 200, 120, 0.12);
    color: #50c878;
    border-color: rgba(80, 200, 120, 0.35);
}

.item-class-badge-none {
    background: rgba(224, 92, 92, 0.12);
    color: #e05c5c;
    border-color: rgba(224, 92, 92, 0.35);
}

.item-class-badge-some {
    background: rgba(212, 168, 75, 0.12);
    color: #d4a84b;
    border-color: rgba(212, 168, 75, 0.35);
}

.item-badge-inactive {
    background: rgba(255,255,255,0.03);
    color: var(--ink-3);
    border-color: rgba(255,255,255,0.08);
    opacity: 0.45;
}

.item-edit-area {
    padding: 0.5rem 0;
}

.item-edit-fields {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.item-edit-field {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.item-edit-label {
    font-size: 0.85rem;
    color: var(--ink-3);
    white-space: nowrap;
}

.item-edit-original-slot {
    font-size: 0.85rem;
}

/* .item-edit-select {
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 0.2rem 0.4rem;
    border-radius: 0.188rem;
    font-size: 0.85rem;
}

.item-edit-select option {
    background: var(--bg-2);
    color: var(--ink);
} */

.item-edit-checkboxes {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.item-edit-check-label {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}

.item-edit-classes {
    margin-bottom: 0.75rem;
}

.item-edit-classes-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.item-class-select-btns {
    display: flex;
    gap: 0.3rem;
}

.item-class-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-top: 0.4rem;
}

.item-class-label {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}

.item-edit-actions {
    display: flex;
    gap: 0.5rem;
}

.seasons-create-name { width: 17.5rem; }

.season-active-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.688rem;
    font-weight: 600;
    padding: 0.188rem 0.563rem;
    border-radius: 0.188rem;
    color: #a4e6c2;
    border: 1px solid rgba(107,212,155,0.70);
    background: rgba(58,142,96,0.1);
}

.season-cell-raids {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.season-raid-badge {
    font-size: 0.688rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--ink-3);
    border-radius: 0.188rem;
    padding: 0.188rem 0.563rem;
    display: inline-block;
    white-space: nowrap;
}

.season-edit-input { width: 15rem; }

.season-action-warning {
    font-size: 0.75rem;
    color: var(--warn);
    margin-right: 0.5rem;
}

footer {
    background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
    border-top: 1px solid var(--line-soft);
    text-align: center;
    padding: 1rem 2rem;
    font-size: 0.75rem;
    color: var(--ink-3);
    position: relative;
    z-index: 1;
}

.bislist-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1.125rem;
}

.bislist-class-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
}

.bislist-title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.013rem;
}

.bislist-realm { font-size: 0.75rem; color: var(--ink-3); }

.bislist-draft-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 1.125rem;
}

/* .bislist-draft-tab { padding: 0.375rem 0.875rem; font-size: 0.781rem; color: var(--ink-2); } */
.bislist-draft-tab {
    color: var(--ink-2);
}
.bislist-draft-tab:hover:not(:disabled) { color: var(--ink); }

.bislist-draft-tab-disabled { opacity: 0.4; cursor: default; }

.bislist-team-group { display: flex; flex-direction: column; gap: 0.188rem; }
.bislist-team-group-label { font-size: 0.688rem; color: var(--ink-3); padding: 0 0.125rem; transition: color 0.15s; }

.bislist-team-group:has(.btn-active) .bislist-team-group-label { color: var(--ink-2); }
/* .bislist-team-split { display: flex; } — .btn-group */

/* .bislist-team-draft-btn { position: relative; font-size: 0.75rem; color: var(--ink-2); border-radius: var(--r-sm) 0 0 var(--r-sm); } */
/* .bislist-team-draft-btn { font-size: 0.75rem; color: var(--ink-2); } */
.bislist-team-draft-btn { color: var(--ink-2); }
/* .bislist-team-draft-btn:hover:not(:disabled) { color: var(--ink); z-index: 1; } */
.bislist-team-draft-btn:hover:not(:disabled) { color: var(--ink); }
/* .bislist-team-draft-btn.btn-active { z-index: 1; } — .btn-group */
.bislist-team-draft-btn:disabled { opacity: 0.4; cursor: default; }

/* .bislist-team-compare-btn { position: relative; margin-left: -0.063rem; font-size: 0.75rem; color: var(--ink-2); border-radius: 0; } */
/* .bislist-team-compare-btn { font-size: 0.75rem; color: var(--ink-2); } */
.bislist-team-compare-btn { color: var(--ink-2); }
/* .bislist-team-compare-btn:hover:not(:disabled) { color: var(--ink); z-index: 1; } */
.bislist-team-compare-btn:hover:not(:disabled) { color: var(--ink); }
/* .bislist-team-compare-btn.btn-active { z-index: 1; } — .btn-group */
.bislist-team-compare-btn:disabled { opacity: 0.4; cursor: default; }

/* .bislist-team-bis-btn { position: relative; margin-left: -0.063rem; font-size: 0.75rem; color: var(--ink-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; } */
/* .bislist-team-bis-btn { font-size: 0.75rem; color: var(--ink-2); } */
.bislist-team-bis-btn { color: var(--ink-2); }
/* .bislist-team-bis-btn:hover:not(:disabled) { color: var(--ink); z-index: 1; } */
.bislist-team-bis-btn:hover:not(:disabled) { color: var(--ink); }
/* .bislist-team-bis-btn.btn-active { z-index: 1; } — .btn-group */
.bislist-team-bis-btn:disabled { opacity: 0.4; cursor: default; }

.bislist-notice-box { margin-bottom: 0.875rem; }

.bislist-notice {
    padding: 0.625rem 0.875rem;
    border-radius: var(--r-sm);
    font-size: 0.813rem;
    border: 1px solid;
    border-left-width: 0.188rem;
    margin-bottom: 0.375rem;
}

.bislist-notice-info {
    color: var(--accent-2);
    border-color: rgba(90,140,201,0.3);
    border-left-color: var(--accent-2);
    background: rgba(90,140,201,0.05);
    box-shadow: inset 3px 0 8px rgba(90,140,201,0.08);
}

.bislist-notice-warning {
    color: var(--warn);
    border-color: rgba(255,180,84,0.3);
    border-left-color: var(--warn);
    background: rgba(255,180,84,0.05);
    box-shadow: inset 3px 0 8px rgba(255,180,84,0.08);
}
.bislist-slot-warning { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; border-left: 2px solid var(--warn); background: rgba(255,180,84,0.06); border-radius: 0 0.25rem 0.25rem 0; font-size: 0.813rem; }
.bislist-slot-warning-label { color: var(--warn); font-weight: 500; margin-right: 0.25rem; }
.bislist-slot-warning-item { color: var(--ink-3); }

.bislist-draft-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}
/* .bislist-copy-toggle-chevron transition: transform removed — chevron now uses textContent toggle: ⮞/⮟ */
.bislist-copy-toggle-chevron { display: inline-block; font-size: 0.75rem; }
.bislist-copy-panel { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; padding: 0.625rem 0.875rem; margin-bottom: 0.875rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 0.25rem; font-size: 0.813rem; }
.bislist-copy-option { display: flex; align-items: center; gap: 0.375rem; cursor: pointer; color: var(--ink-3); }

.bislist-delete-submission-btn {
    margin-left: auto;
    /* color: var(--bad); — .btn-danger */
    /* border-color: rgba(255,107,107,0.25); — .btn-danger */
}
/* .bislist-delete-submission-btn:hover { border-color: var(--bad); background: var(--bg-2); } — .btn-danger:hover */

.bislist-locked-badge {
    font-size: 0.688rem;
    font-weight: 500;
    background: rgba(212,160,60,0.10);
    border: 1px solid rgba(255,180,84,0.70);
    color: #ffd27a;
    border-radius: 0.25rem;
    padding: 0.313rem 0.688rem;
}

.gp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0;
    margin-left: 0.938rem;
    padding-bottom: 0;
}

.gp-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.813rem;
    font-family: inherit;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
    cursor: pointer;
    margin-bottom: -0.063rem;
    color: var(--ink-3);
    transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.gp-tab { opacity: 0.45; }
.gp-tab:hover { color: var(--ink-2); opacity: 0.75; }
.gp-tab-active { color: var(--ink); border-color: var(--line); box-shadow: inset 0 -2px 0 var(--accent); opacity: 1; }

.bislist-spec-icon {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.125rem;
}

.bislist-spec-star {
    width: 0.875rem;
    height: 0.875rem;
    pointer-events: none;
    user-select: none;
}

.bislist-spec-star-hidden {
    display: none;
}
.approve-spec-tab-warning { width: 0.75rem; height: 0.75rem; flex-shrink: 0; filter: invert(1) sepia(1) saturate(8) hue-rotate(5deg); opacity: 0.9; }

.bislist-main-spec-control {
    margin-bottom: 1rem;
    padding: 0.6rem 0.8rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
    border-radius: 0.25rem;
}

.bislist-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.bislist-toggle-switch-wrap {
    position: relative;
    flex-shrink: 0;
}

.bislist-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bislist-toggle-track {
    display: block;
    width: 2.25rem;
    height: 1.25rem;
    background: rgba(255,255,255,0.12);
    border-radius: 0.625rem;
    border: 1px solid var(--line);
    position: relative;
    transition: background 0.2s, border-color 0.2s;
    cursor: pointer;
}

.bislist-toggle-input:checked + .bislist-toggle-track {
    background: var(--accent);
    border-color: var(--accent);
}

.bislist-toggle-thumb {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 0.875rem;
    height: 0.875rem;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.bislist-toggle-input:checked + .bislist-toggle-track .bislist-toggle-thumb {
    transform: translateX(1rem);
}

.bislist-toggle-label-text {
    font-size: 0.82rem;
    color: var(--ink-3);
    user-select: none;
}

.bislist-item-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.bislist-item-list .bislist-item-card { flex: 0 0 calc(33.33% - 0.34rem); min-width: 0; }
.bislist-item-list .bislist-group-header { flex: 0 0 100%; }

.bislist-item-card {
    border: 1px solid var(--line);
    border-radius: 0.25rem;
    overflow: visible;
    position: relative;
    box-shadow: var(--sh-card);
}

.bislist-card-top {
    padding: 0.6rem 0.8rem 0.5rem;
    background: linear-gradient(to bottom, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.01) 100%);
    border-radius: 0.25rem 0.25rem 0 0;
}

.bislist-card-divider {
    height: 0.063rem;
    background: var(--line);
}

.bislist-card-body {
    padding: 0.55rem 0.8rem 0.6rem;
    background: linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(255,255,255,0.02) 100%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}

.bislist-item-header {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    position: relative;
}

.bislist-item-icon-link {
    flex-shrink: 0;
}

.bislist-item-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.188rem;
    border: 2px solid var(--line);
    display: block;
}

.bislist-item-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.bislist-item-name-row { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.bislist-item-name {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    flex: 1;
    min-width: 0;
}

.bislist-item-subtitle {
    font-size: 0.72rem;
    color: rgba(136,136,136,0.6);
}
.bislist-item-subtitle-raid { display: block; }

.bislist-item-note-btn {
    flex-shrink: 0;

    padding: 0.125rem 0.25rem;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.bislist-item-note-btn:hover { background: transparent; border-color: transparent; }

.bislist-roll-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* .bislist-roll-select {
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 0.188rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.82rem;
    font-family: inherit;
} */

.bislist-obtained-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* .bislist-obtained-btn { font-size: 0.688rem; font-weight: 500; padding: 0.15rem 0.55rem; background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 0.25rem; cursor: pointer; color: var(--ink-3); font-family: inherit; transition: background 0.1s, color 0.1s; width: 100%; } */
.bislist-obtained-btn {
    font-size: 0.688rem;
    padding: 0.15rem 0.55rem;
    background: rgba(255,255,255,0.04);
    color: var(--ink-3);
    box-shadow: none;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
    width: 100%;
}

/* .bislist-obtained-btn:hover { color: var(--ink); } */
.bislist-obtained-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--ink-3);
    color: var(--ink-2);
}

/* .bislist-obtained-active.bislist-obtained-normal { background: rgba(30,255,0,0.1); border-color: rgba(30,255,0,0.4); color: #1eff00; } */
/* .bislist-obtained-active.bislist-obtained-heroic { background: rgba(0,112,221,0.15); border-color: rgba(0,112,221,0.5); color: #0070dd; } */
/* .bislist-obtained-active.bislist-obtained-mythic { background: rgba(163,53,238,0.15); border-color: rgba(163,53,238,0.5); color: #a335ee; } */
.bislist-obtained-active {
    background: color-mix(in oklab, var(--col) 8%, var(--bg));
    border-color: color-mix(in oklab, var(--col) 40%, transparent);
    color: color-mix(in oklab, var(--col) 72%, #fff);
}
.bislist-obtained-active:hover {
    background: color-mix(in oklab, var(--col) 8%, var(--bg));
    border-color: color-mix(in oklab, var(--col) 40%, transparent);
    color: color-mix(in oklab, var(--col) 72%, #fff);
    filter: brightness(1.12);
}

.bislist-item-note-area {
    display: none;
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    width: 13.75rem;
    z-index: 10;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 0.25rem;
    padding: 0.375rem;
    box-shadow: var(--sh-pop);
}

.bislist-note-visible {
    display: block;
}

.bislist-item-note-text {
    font-size: 0.82rem;
    color: var(--ink);
    margin: 0;
}

.bislist-item-note-input {
    width: 100%;
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 0.188rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.82rem;
    font-family: inherit;
    resize: vertical;
    min-height: 3rem;
    box-sizing: border-box;
}

.char-card-actions {
    margin-top: 0.6rem;
    display: flex;
    justify-content: center;
}

.bislist-sort-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.bislist-sort-label {
    font-size: 0.78rem;
}

/* .bislist-sort-active { border-color: var(--accent); color: var(--accent); } — replaced by .btn-active */

.bislist-group-header {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.063rem;
    padding: 0.5rem 0 0.25rem;
    margin-top: 0.5rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.4rem;
}

.bislist-group-header:first-child {
    margin-top: 0;
}

.bislist-filter-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

/* .bislist-roll-btn { font-size: 0.688rem; font-weight: 500; padding: 0.15rem 0.55rem; background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 0.25rem; cursor: pointer; color: var(--ink-3); font-family: inherit; transition: background 0.12s, border-color 0.12s, color 0.12s; width: 100%; } */
.bislist-roll-btn {
    font-size: 0.688rem;
    padding: 0.15rem 0.55rem;
    background: rgba(255,255,255,0.04);
    color: var(--ink-3);
    box-shadow: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    width: 100%;
}

/* .bislist-roll-btn:hover { border-color: var(--ink-3); color: var(--ink); } */
.bislist-roll-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--ink-3);
    color: var(--ink-2);
}

/* .bislist-roll-active-all      { background: rgba(43,95,196,0.12);   border-color: rgba(74,130,224,0.50);  color: var(--accent-glow); } — dead: Roll enum has no All type */
/* .bislist-roll-active-bis      { background: rgba(196,68,68,0.1);    border-color: rgba(255,107,107,0.70); color: #ffb1b1; } */
/* .bislist-roll-active-major    { background: rgba(212,160,60,0.12);  border-color: rgba(255,180,84,0.70);  color: #ffd27a; } */
/* .bislist-roll-active-minor    { background: rgba(58,142,96,0.1);    border-color: rgba(107,212,155,0.70); color: #a4e6c2; } */
/* .bislist-roll-active-offspec  { background: transparent;            border-color: rgba(122,128,148,0.65); color: #b6bac6; } — dead: Roll enum has no Offspec type */
/* .bislist-roll-active-transmog { background: rgba(186,85,211,0.10);  border-color: rgba(220,120,255,0.70); color: #e8a0df; } — dead: Roll enum has no Transmog type */
.bislist-roll-active-bis, .bislist-roll-active-major, .bislist-roll-active-minor {
    background: color-mix(in oklab, var(--col) 8%, var(--bg));
    border-color: color-mix(in oklab, var(--col) 40%, transparent);
    color: color-mix(in oklab, var(--col) 72%, #fff);
}
.bislist-roll-active-bis:hover, .bislist-roll-active-major:hover, .bislist-roll-active-minor:hover {
    background: color-mix(in oklab, var(--col) 8%, var(--bg));
    border-color: color-mix(in oklab, var(--col) 40%, transparent);
    color: color-mix(in oklab, var(--col) 72%, #fff);
    filter: brightness(1.12);
}
.bislist-roll-active-bis   { --col: oklch(0.62 0.20 25); }
.bislist-roll-active-major { --col: oklch(0.80 0.15 92); }
.bislist-roll-active-minor { --col: oklch(0.66 0.15 150); }

.bislist-roll-locked {
    font-size: 0.688rem;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    border-width: 1px;
    border-style: solid;
    letter-spacing: 0.025rem;
    flex-shrink: 0;
    align-self: flex-start;
}

.bislist-btn-group {
    margin-bottom: 0;
}

.bislist-btn-group-label {
    display: block;
    font-size: 0.7rem;
    margin-bottom: 0.2rem;
}

.bislist-note-icon {
    display: inline-block;
    width: 0.813rem;
    height: 0.813rem;
    -webkit-mask: url('/img/note.svg') no-repeat center / contain;
    mask: url('/img/note.svg') no-repeat center / contain;
    background-color: rgba(255,255,255,0.2);
    vertical-align: middle;
    pointer-events: none;
    flex-shrink: 0;
}

.bislist-item-note-btn:hover .bislist-note-icon { background-color: rgba(255,255,255,0.4); }

.bislist-note-btn-has-note .bislist-note-icon { background-color: white; }

.bislist-note-btn-has-note:hover .bislist-note-icon { background-color: rgba(255,255,255,0.75); }

.approve-note-changed .bislist-note-icon { background-color: #ffb454; }
.approve-note-changed:hover .bislist-note-icon { background-color: rgba(255,180,84,0.75); }

.approve-back-link {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--ink-3);
    font-size: 0.85rem;
    text-decoration: none;
}

.approve-back-link:hover {
    color: var(--ink);
}

/* Shared two-column split layout — fixed left panel + flexible right panel */
.gp-split-layout {
    display: flex;
    gap: 1.125rem;
    align-items: flex-start;
}

.gp-split-left {
    width: 13rem;
    flex-shrink: 0;
    position: sticky;
    top: 1rem;
    /* max-height: calc(100vh - 7.75rem); — old: only accounted for nav + sticky-top + footer, missed main padding and page-head */
    max-height: calc(100vh - 12rem); /* CSS fallback for pages without JS; gp-split.js overrides this at runtime with a precise measured value */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gp-split-left-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.875rem 0.375rem;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.gp-split-left-title {
    font-size: 0.656rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.044rem;
    color: var(--ink-3);
}

.gp-split-left-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.gp-split-right {
    flex: 1;
    min-width: 0;
}

/* Left panel row — selection highlight */
.gp-split-left-row {
    cursor: pointer;
    transition: background 0.15s;
}

.gp-split-left-row:hover {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.04), transparent);
}

/* is-active: colour-coded by class colour when --char-color is set on the row;
   falls back to white glow for non-character lists */
.gp-split-left-row.is-active {
    background: linear-gradient(to right, color-mix(in oklch, var(--char-color, white) 10%, transparent), transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, var(--char-color, white) 22%, transparent),
        inset 0 -1px 0 color-mix(in oklch, var(--char-color, white) 22%, transparent),
        inset 2px 0 0 var(--char-color, rgba(255, 255, 255, 0.5));
}

/* WCL page — spacing between stacked team sections */
.gp-wcl-section + .gp-wcl-section {
    margin-top: 1.5rem;
}

.gp-row-subtitle {
    font-size: 0.75rem;
    color: var(--ink-3);
    margin-top: 0.125rem;
}

.approve-bislist-layout {
    display: flex;
    gap: 1.125rem;
    align-items: flex-start;
}

.approve-bislist-left {
    width: 13.75rem;
    flex-shrink: 0;
    overflow-y: auto;
    max-height: calc(100vh - 10rem);

}
.approve-bislist-left.gp-card-table {
    padding-top: 0.938rem;
    padding-bottom: 0.938rem;
}

.approve-bislist-right {
    flex: 1;
    min-width: 0;
}

.approve-character-row {
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    border-left: 0.188rem solid transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    transition: background 0.12s;
    user-select: none;
    position: relative;
    font-size: 0.813rem;
}

.approve-character-row:first-child { border-top: 1px solid var(--line); }
.approve-character-row:last-child { border-bottom: 1px solid var(--line); }

.approve-character-row:hover { background: rgba(255,255,255,0.02); }

.approve-character-row-active {
    background: linear-gradient(to right, rgba(255,255,255,0.06), rgba(255,255,255,0));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06),
                inset -0.063rem 0 0 rgba(255,255,255,0.06),
                inset 0 -0.063rem 0 rgba(255,255,255,0.06);
}

.approve-character-row-active::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--char-color, #888), transparent);
    opacity: 0.08;
    pointer-events: none;
}

.approve-character-name {
    font-size: 0.813rem;
    font-weight: 600;
    color: var(--ink-2);
}

.approve-character-row-active .approve-character-name { color: var(--ink); }

.approve-bis-warning-icon { width: 0.875rem; height: 0.875rem; opacity: 0.8; filter: invert(1) sepia(1) saturate(5) hue-rotate(5deg); flex-shrink: 0; }

.approve-empty-notice {
    padding: 1rem;
    font-size: 0.85rem;
}

.approve-action-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.125rem;
    flex-wrap: wrap;
}

.approve-decline-note { flex: 1; min-width: 11.25rem; max-width: 21.25rem; }

.approve-previous-decline {
    background: rgba(255,180,84,0.05);
    border: 1px solid rgba(255,180,84,0.3);
    border-left: 0.188rem solid var(--warn);
    border-radius: var(--r-sm);
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.875rem;
    font-size: 0.813rem;
    box-shadow: inset 3px 0 8px rgba(255,180,84,0.08);
}
.approve-previous-decline-label { color: var(--ink-3); margin-right: 0.375rem; }

.approve-character-heading {
    margin: 0 0 0.875rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.013rem;
}

.approve-item-row {
    display: flex;
    gap: 0.875rem;
    margin-bottom: 0.375rem;
    padding-left: 0.875rem;
}

.approve-item-col { flex: 1; min-width: 0; }

.approve-item-status-removed .approve-item-col-draft { opacity: 0.3; }
.approve-item-status-new .approve-item-col-submission { opacity: 0.3; }

.approve-item-card-actions { position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); z-index: 1; display: flex; align-items: center; gap: 0.25rem; }
.approve-roll-badge { position: static; }

.approve-item-card {
    background: var(--bg-2);
    border: 1px solid var(--line-soft);
    border-left: 0.188rem solid var(--line-soft);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    padding: 0.5rem 0.625rem;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    box-shadow: var(--sh-card);
    gap: 0.375rem;
}

.approve-item-status-new .approve-item-col-draft .approve-item-card {
    border-left-color: #4ade80;
}
.approve-item-status-new .approve-item-col-draft .approve-item-card::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: -0.875rem; width: 0.875rem;
    background: linear-gradient(to left, rgba(74,222,128,0.28), transparent);
    pointer-events: none;
}

.approve-item-status-removed .approve-item-col-submission .approve-item-card {
    border-left-color: #ff6b6b;
    opacity: 0.78;
}
.approve-item-status-removed .approve-item-col-submission .approve-item-card::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: -0.875rem; width: 0.875rem;
    background: linear-gradient(to left, rgba(255,107,107,0.28), transparent);
    pointer-events: none;
}

.approve-item-status-modified .approve-item-card {
    border-left-color: #ffb454;
}
.approve-item-status-modified .approve-item-card::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: -0.875rem; width: 0.875rem;
    background: linear-gradient(to left, rgba(255,180,84,0.28), transparent);
    pointer-events: none;
}

.approve-item-status-unchanged .approve-item-card {
    border-left-color: #5a8cc9;
}
.approve-item-status-unchanged .approve-item-card::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: -0.875rem; width: 0.875rem;
    background: linear-gradient(to left, rgba(90,140,201,0.28), transparent);
    pointer-events: none;
}

.approve-spec-panel { margin-top: 0.375rem; }

.approve-spec-content-card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
}

.compare-column-headers {
    display: flex;
    gap: 0.875rem;
    margin: 0.5rem 0 0.375rem 0.875rem;
}

.compare-column-header-left,
.compare-column-header-right {
    flex: 1;
    font-size: 0.688rem;
    text-transform: uppercase;
    letter-spacing: 0.038rem;
    color: var(--ink-3);
}

.compare-spec-panel {
    margin-top: 0.25rem;
}

.loot-back-link {
    display: inline-block;
    margin-bottom: 0.875rem;
    color: var(--ink-3);
    text-decoration: none;
    font-size: 0.781rem;
    transition: color 0.15s;
}
.loot-back-link:hover { color: var(--ink); }

.loot-layout {
    display: grid;
    grid-template-columns: 15rem 20rem 1fr;
    gap: 1.125rem;
    align-items: start;
}

.loot-col-left,
.loot-col-mid,
.loot-col-right {

    overflow-y: visible;
    max-height: none;
    padding: 0;
}

.loot-raid-group { margin-bottom: 0; }

.loot-raid-header {
    padding: 0.625rem 0.875rem 0.375rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
}
.loot-raid-header:hover { background: rgba(255,255,255,0.02); }

.loot-raid-header::after {
    content: '▶';
    font-size: 0.563rem;
    color: var(--ink-4);
    display: inline-block;
    transition: transform 0.15s;
    flex-shrink: 0;
}
.loot-raid-header.loot-raid-expanded::after { transform: rotate(90deg); color: var(--ink-3); }

.loot-raid-name {
    font-size: 0.656rem;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.044rem;
}

.loot-difficulty-bar {
    display: flex;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--line);
    align-items: center;
}

.loot-difficulty-separator { display: none; }

.loot-history-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--line-soft);
}

.loot-history-filter-bar [data-filter-reason="all"]   { --col: var(--accent); }
.loot-history-filter-bar [data-filter-reason="bis"]   { --col: oklch(0.62 0.20 25); }
.loot-history-filter-bar [data-filter-reason="major"] { --col: oklch(0.80 0.15 92); }
.loot-history-filter-bar [data-filter-reason="minor"] { --col: oklch(0.66 0.15 150); }

.loot-diff-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.656rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.025rem;
    padding: 0.188rem 0.375rem;
    border-radius: 0.25rem;
    border: 1px solid transparent;
    white-space: nowrap;
}
.loot-diff-badge-normal { color: #1EFF00; background: rgba(30,255,0,0.10);   border-color: rgba(30,255,0,0.45);   box-shadow: 0 0 10px rgba(30,255,0,0.20); }
.loot-diff-badge-heroic { color: #0070DD; background: rgba(0,112,221,0.12);  border-color: rgba(0,112,221,0.45);  box-shadow: 0 0 10px rgba(0,112,221,0.25); }
.loot-diff-badge-mythic { color: #d6a8ff; background: rgba(163,53,238,0.18); border-color: rgba(163,53,238,0.50); box-shadow: 0 0 10px rgba(163,53,238,0.25); }

/* loot-diff-btn — replaced by .btn .btn-col + --col from diff.Color inline; loot-diff-btn retained as JS selector hook only
.loot-diff-btn {
    font-family: inherit;
    font-size: 0.719rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--line-soft);
    border-radius: 0.25rem;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.loot-diff-btn:hover { color: var(--ink); }

.loot-diff-btn[data-diffid="1"].loot-diff-active { color: #1EFF00; background: rgba(30,255,0,0.10);    border-color: rgba(30,255,0,0.45);    box-shadow: 0 0 10px rgba(30,255,0,0.20); }
.loot-diff-btn[data-diffid="2"].loot-diff-active { color: #0070DD; background: rgba(0,112,221,0.12);   border-color: rgba(0,112,221,0.45);   box-shadow: 0 0 10px rgba(0,112,221,0.25); }
.loot-diff-btn[data-diffid="3"].loot-diff-active { color: #d6a8ff; background: rgba(163,53,238,0.18);  border-color: rgba(163,53,238,0.50);  box-shadow: 0 0 10px rgba(163,53,238,0.25); }

.loot-diff-btn:disabled { cursor: default; opacity: 0.5; }
*/

.loot-boss-row {
    padding: 0.438rem 0.875rem 0.438rem 1.625rem;
    font-size: 0.781rem;
    color: var(--ink-2);
    cursor: pointer;
    border-left: 2px solid transparent;
    border-bottom: 1px solid var(--line-soft);
    transition: background 0.12s;
}
.loot-boss-row:last-child { border-bottom: none; }
.loot-boss-row:hover { background: rgba(255,255,255,0.02); color: var(--ink); }
.loot-boss-row.loot-boss-active {
    color: var(--ink);
    border-left-color: #dce6ff;
    background: linear-gradient(to right, rgba(220,230,255,0.1), rgba(220,230,255,0));
    box-shadow: inset 0 1px 0 rgba(170,200,255,0.22),
                inset -0.063rem 0 0 rgba(170,200,255,0.22),
                inset 0 -0.063rem 0 rgba(170,200,255,0.22);
}

.loot-item-col-header {
    font-weight: 600;
    font-size: 0.813rem;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 0;
    color: var(--ink-2);
}

.loot-sort-bar {
    display: flex;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--line-soft);
}

/* loot-sort-btn — replaced by .btn .btn-xs + btn-group + .btn-active; loot-sort-btn retained as JS selector hook only
.loot-sort-btn {
    font-size: 0.656rem;
    font-weight: 500;
    letter-spacing: 0.038rem;
    text-transform: uppercase;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--line-soft);
    border-radius: 0.188rem;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    transition: all 0.15s;
}

.loot-sort-btn.loot-sort-btn-active {
    color: var(--accent-2);
    border-color: rgba(43,95,196,0.5);
    background: rgba(43,95,196,0.1);
}
*/

.loot-slot-group { margin-bottom: 0.75rem; }

.loot-slot-label {
    font-size: 0.688rem;
    text-transform: uppercase;
    letter-spacing: 0.038rem;
    color: var(--ink-3);
    padding: 0.375rem 0.75rem 0.25rem;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 0.125rem;
}

.loot-item-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    border-left: 2px solid transparent;
    border-bottom: 1px dashed var(--line-soft);
    font-size: 0.781rem;
}
.loot-item-row:last-child { border-bottom: none; }
.loot-item-row:hover { background: rgba(255,255,255,0.02); }
.loot-item-row.loot-item-active {
    border-left-color: #dce6ff;
    background: linear-gradient(to right, rgba(220,230,255,0.1), rgba(220,230,255,0));
    box-shadow: inset 0 1px 0 rgba(170,200,255,0.22),
                inset -0.063rem 0 0 rgba(170,200,255,0.22),
                inset 0 -0.063rem 0 rgba(170,200,255,0.22);
}

.loot-item-icon { width: 1.5rem; height: 1.5rem; border: 2px solid #888; border-radius: 0.188rem; display: block; flex-shrink: 0; }
.loot-item-icon-placeholder { width: 1.5rem; height: 1.5rem; border: 2px solid #888; border-radius: 0.188rem; display: block; background: var(--bg-3); flex-shrink: 0; }

.loot-player-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 0;
}
.loot-player-item-name { font-weight: 700; font-size: 0.813rem; color: var(--ink); }
.loot-player-difficulty { font-size: 0.75rem; color: var(--ink-3); }

.loot-award-log {
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 0.5rem;
    padding: 0.375rem 0.5rem 0.5rem;
}

.loot-log-entry {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.75rem;
    opacity: 0.55;
}
.loot-log-award-retracted { text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.35); }
.loot-log-retraction { opacity: 0.38; }
.loot-log-extra { display: none; }
.loot-log-extra.loot-log-visible { display: flex; }

.loot-log-toggle-btn {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.25rem 0;
    background: transparent;
    border: none;
    border-top: 1px solid var(--line-soft);
    color: var(--ink-3);
    font-size: 0.719rem;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
}
.loot-log-toggle-btn:hover { color: var(--ink); }

.loot-log-name { font-weight: 600; }
.loot-log-detail { color: var(--ink-2); }
.loot-log-date { color: var(--ink-3); font-size: 0.688rem; margin-left: auto; font-family: 'JetBrains Mono', monospace; }
.loot-log-retracted-label { font-size: 0.688rem; color: var(--ink-3); font-style: italic; min-width: 7.5rem; text-align: right; }

.loot-retract-btn { flex-shrink: 0; }

.loot-obtained-section { margin-top: 0.75rem; }
.loot-obtained-label {
    font-size: 0.656rem;
    text-transform: uppercase;
    letter-spacing: 0.038rem;
    color: var(--ink-3);
    padding: 0.25rem 0.875rem;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 0.125rem;
}

.loot-player-row {
    display: grid;
    grid-template-columns: auto 9rem 5.5rem 5.5rem 4rem;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.875rem;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.813rem;
    transition: background 0.12s;
}
.loot-player-row:last-child { border-bottom: none; }
.loot-player-row:hover { background: rgba(255,255,255,0.015); }

.loot-key-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    visibility: hidden;
    opacity: 0.5;
    color: #FFFFFF;
    transition: opacity 0.12s;
}
.loot-key-btn.loot-key-btn-visible { visibility: visible; }

.loot-key-btn:hover { opacity: 1; }

.loot-key-level-good { color: #FFFFFF; }
.loot-key-level-low  { color: var(--bad); }

.loot-key-list {
    display: none;
    grid-column: 1 / -1;
    padding: 0.25rem 0.5rem 0.125rem;
    border-top: 1px solid var(--line-soft);
    margin-top: 0.125rem;
}
.loot-key-list.loot-key-list-visible { display: block; }

.loot-key-entry { display: flex; gap: 0.5rem; font-size: 0.688rem; padding: 0.125rem 0; }
.loot-key-level { font-weight: 600; color: var(--accent-2); min-width: 2rem; }
.loot-key-name  { color: var(--ink-3); flex: 1; }
.loot-key-date  { color: var(--ink-4); font-size: 0.656rem; font-family: 'JetBrains Mono', monospace; }
.loot-key-empty { color: var(--ink-3); font-style: italic; }

.loot-bislist-note-area {
    display: none;
    grid-column: 1 / -1;
    padding: 0.25rem 0.5rem;
    border-top: 1px solid var(--line-soft);
    margin-top: 0.125rem;
}
.loot-bislist-note-area.loot-bislist-note-visible { display: block; }
.loot-bislist-note-entry { display: flex; align-items: center; gap: 0.375rem; padding: 0.063rem 0; }
.loot-note-spec-icon { width: 1rem; height: 1rem; border-radius: 0.125rem; }
.loot-bislist-note-text { font-size: 0.75rem; color: var(--ink-3); }

.loot-history-icon {
    display: inline-block;
    width: 0.813rem;
    height: 0.813rem;
    -webkit-mask: url('/img/lootbox.svg') no-repeat center / contain;
    mask: url('/img/lootbox.svg') no-repeat center / contain;
    background-color: rgba(255,255,255,0.2);
    vertical-align: middle;
    pointer-events: none;
    flex-shrink: 0;
}

/* .row-icgroup { display: inline-flex; gap: 0.125rem; padding: 0.125rem; background: rgba(255,255,255,0.025); border: 1px solid var(--line-soft); border-radius: 0.313rem; align-self: center; } */
.row-icgroup { align-self: center; }

/* .row-icbtn { display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; background: transparent; border: 0; border-radius: 0.188rem; color: var(--ink-3); cursor: pointer; padding: 0; transition: background 0.12s, color 0.12s; } — .btn.btn-icon */
.row-icbtn { color: var(--ink-3); }
/* .row-icbtn:hover { background: rgba(255,255,255,0.06); color: var(--ink); } — .btn-icon:hover */

.row-icbtn.key[data-state="pending"] { color: var(--ink-4); }
.row-icbtn.key[data-state="ok"]      { color: var(--ink-2); }
.row-icbtn.key[data-state="low"]     { color: #f87171; }

.row-icbtn.note[data-state="has"] .bislist-note-icon   { background-color: white; }
.row-icbtn.note[data-state="empty"] .bislist-note-icon { background-color: rgba(255,255,255,0.2); }
.row-icbtn.note:hover .bislist-note-icon               { background-color: rgba(255,255,255,0.4); }
.row-icbtn.note[data-state="has"]:hover .bislist-note-icon { background-color: rgba(255,255,255,0.75); }
.row-icbtn.note[data-state="empty"] { pointer-events: none; }

.row-icbtn.chest[data-state="won"] .loot-history-icon  { background-color: white; }
.row-icbtn.chest[data-state="idle"] .loot-history-icon { background-color: rgba(255,255,255,0.2); }
.row-icbtn.chest:hover .loot-history-icon              { background-color: rgba(255,255,255,0.4); }
.row-icbtn.chest[data-state="won"]:hover .loot-history-icon { background-color: rgba(255,255,255,0.75); }

.loot-history-area {
    display: none;
    grid-column: 1 / -1;
    padding: 0.375rem 0 0.25rem;
    margin-top: 0.125rem;
}
.loot-history-area.loot-history-visible { display: block; }

.loot-history-entry {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.688rem;
    padding: 0.125rem 0;
}
.loot-history-entry-retracted { opacity: 0.45; }
.loot-history-item-name { font-weight: 600; color: var(--ink-2); flex-shrink: 0; }
.loot-history-detail { color: var(--ink-3); flex: 1; }
.loot-history-date { color: var(--ink-4); font-family: 'JetBrains Mono', monospace; font-size: 0.656rem; flex-shrink: 0; }
.loot-history-retracted-label { color: var(--bad); font-size: 0.625rem; flex-shrink: 0; }
.loot-history-empty { font-size: 0.688rem; color: var(--ink-4); font-style: italic; }

.loot-player-obtained { opacity: 0.55; }
.loot-player-name { font-weight: 700; font-size: 0.813rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loot-player-specs { display: flex; gap: 0.125rem; align-items: center; justify-content: flex-end; }

.loot-reason-select { font-size: 0.75rem; }

.loot-reason-label { font-size: 0.75rem; color: var(--ink-3); }

.loot-col-phantom { visibility: hidden; pointer-events: none; user-select: none; }

.loot-distribute-section { margin-top: 0.75rem; padding: 0.75rem 0.5rem 0.5rem; border-top: 1px solid var(--line); }
.loot-distribute-controls { display: flex; gap: 0.375rem; align-items: center; margin-top: 0.375rem; flex-wrap: wrap; }

.loot-spec-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid transparent;
    border-radius: 0.188rem;
    padding: 0.063rem;
}
.loot-spec-icon { width: 1.25rem; height: 1.25rem; display: block; border-radius: 0.125rem; }

.loot-spec-icon-wrap.loot-roll-bis   { border-color: #ff2020; }
.loot-spec-icon-wrap.loot-roll-major { border-color: #ffb454; }
.loot-spec-icon-wrap.loot-roll-minor { border-color: #00e676; }

.loot-spec-main::after {
    content: "★";
    position: absolute;
    top: -0.625rem; right: -0.25rem;
    font-size: 0.75rem;
    color: #ffd700;
    pointer-events: none;
    text-shadow: 0 0.063rem 0.188rem rgba(0,0,0,0.8), 0 0 0.375rem rgba(0,0,0,0.6);
}

.loot-empty-notice { padding: 0.75rem 0.875rem; font-size: 0.813rem; }

.page-head {
    margin-bottom: 1.375rem;
}

.page-sub {
    font-size: 0.813rem;
    color: var(--ink-3);
    margin-top: 0.25rem;
}

.dashboard-clock { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.375rem; }

.clock-label { display: inline-flex; align-items: center; justify-content: flex-end; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05rem; padding: 0.125rem 0.375rem; border-radius: 0.25rem; background: var(--bg-3); color: var(--ink-3); border: 1px solid var(--line-soft); white-space: nowrap; }
.clock-datetime { display: flex; align-items: baseline; gap: 0.25rem; }
.clock-time { font-size: 0.75rem; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.clock-date { font-size: 0.75rem; color: var(--ink-3); }
.clock-date::before { content: "·"; margin-right: 0.188rem; color: var(--ink-3); }

.welcome-hero {
    position: relative;
    padding: 4.5rem 0 3.75rem;
    min-height: 30rem;
    overflow: hidden;
}

.welcome-glow {
    position: absolute;
    width: 30rem;
    height: 30rem;
    left: 8%;
    top: -7.5rem;
    background: radial-gradient(closest-side, rgba(43,95,196,0.3), transparent 70%);
    filter: blur(2.5rem);
    pointer-events: none;
    z-index: 0;
}

.welcome-glow-2 {
    left: 55%;
    top: 30%;
    background: radial-gradient(closest-side, rgba(90,140,201,0.18), transparent 70%);
}

.welcome-content {
    position: relative;
    z-index: 1;
    max-width: 37.5rem;
}

.welcome-kicker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.719rem;
    color: var(--accent-2);
    letter-spacing: 0.031rem;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.welcome-title {
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: -0.063rem;
    margin: 0 0 0.875rem;
    background: linear-gradient(180deg, #fff 0%, #b6bac6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.1;
}

.welcome-lede {
    font-size: 0.938rem;
    color: var(--ink-2);
    margin: 0 0 1.75rem;
    line-height: 1.6;
    max-width: 30rem;
}

.welcome-cta {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.welcome-survey-card {
    max-width: 37.5rem;
    margin-top: 1.75rem;
}

.survey-card-kicker {
    font-size: 0.719rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.031rem;
    color: var(--accent-2);
    margin-bottom: 0.375rem;
}

.survey-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.5rem;
}

.survey-card-desc {
    font-size: 0.875rem;
    color: var(--ink-2);
    line-height: 1.5;
    margin: 0 0 0.75rem;
}

.survey-card-deadline {
    font-size: 0.813rem;
    color: var(--ink-3);
}

.survey-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.survey-carousel-controls { margin-top: 0.5rem; }

/* .survey-fill-selector {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-width: 25rem;
    margin-bottom: 1.5rem;
} */

.survey-selection-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.125rem;
    margin-top: 1.5rem;
}

.survey-selection-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-card);
    text-decoration: none;
    color: var(--ink);
    min-width: 14rem;
    max-width: 22rem;
    transition: transform 0.15s, box-shadow 0.15s;
}

.survey-selection-card:hover {
    transform: translateY(-0.125rem);
    box-shadow:
        0 0.063rem 0 rgba(255,255,255,0.04) inset,
        0 0.25rem 1rem rgba(0,0,0,0.4),
        0 1rem 2.5rem rgba(0,0,0,0.5),
        0 0 0 0.063rem var(--accent),
        0 0 1.5rem color-mix(in oklch, var(--accent) 35%, transparent);
}

.survey-selection-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
}

.survey-selection-desc {
    font-size: 0.875rem;
    color: var(--ink-2);
}

.survey-selection-deadline {
    font-size: 0.75rem;
    color: var(--ink-3);
    margin-top: 0.25rem;
}

.survey-detail-flex {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.survey-detail-edit {
    flex: 1 1 20rem;
}

.survey-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.188rem;
}

.survey-field-group .role-detail-label {
    margin-top: 0;
}

.survey-form-actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 0.625rem;
}

.gp-create-form textarea {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.25rem;
    resize: vertical;
}

.js-survey-edit-form input,
.js-survey-edit-form select,
.js-survey-edit-form textarea {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.25rem;
}

.js-survey-edit-form textarea {
    resize: vertical;
}

.js-survey-edit-error {
    margin-top: 0.5rem;
}

.js-survey-edit-form .role-detail-label:first-child {
    margin-top: 0;
}

.survey-detail-teams {
    flex: 1 1 16rem;
}

.survey-team-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 0.25em 0.5em;
    font-size: 0.813rem;
    margin: 0.25rem 0.25rem 0 0;
}

.survey-team-tag-remove {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--ink-3);
    font-size: 1rem;
    line-height: 1;
}

.survey-team-tag-remove:hover {
    color: var(--bad);
}

.survey-team-add-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    align-items: center;
}

.gp-muted-note {
    font-size: 0.813rem;
    color: var(--ink-3);
    margin: 0;
}

/* Survey fill page */

/*.survey-status-banner {
    padding: 0.625rem 1rem;
    border-radius: var(--r-sm);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.survey-status-submitted {
    /* background: var(--ok-bg, rgba(34,197,94,0.12)); */
    /* color: var(--ok, #22c55e); */
    /* border: 1px solid var(--ok, #22c55e); */
    background: color-mix(in oklch, var(--ok) 12%, transparent);
    color: var(--ok);
    border: 1px solid var(--ok);
}

.survey-status-open {
    /* background: var(--accent-2-bg, rgba(99,102,241,0.1)); */
    /* color: var(--accent-2, var(--accent)); */
    /* border: 1px solid var(--accent-2, var(--accent)); */
    background: color-mix(in oklch, var(--accent) 10%, transparent);
    color: var(--accent);
    border: 1px solid var(--accent);
}*/

.survey-status-open {
    background: color-mix(in oklch, var(--ok) 5%, transparent);
    border-color: color-mix(in oklch, var(--ok) 30%, transparent);
    border-left-color: var(--ok);
}

.survey-status-submitted {
    background: color-mix(in oklch, var(--warn) 5%, transparent);
    border-color: color-mix(in oklch, var(--warn) 30%, transparent);
    border-left-color: var(--warn);
}
.survey-criteria-notice {
    background: color-mix(in oklch, var(--bad) 5%, transparent);
    border: 1px solid color-mix(in oklch, var(--bad) 30%, transparent);
    border-left: 0.188rem solid var(--bad);
    border-radius: var(--r-sm);
    padding: 0.625rem 0.875rem;
    font-size: 0.813rem;
    color: var(--ink-2);
    margin-bottom: 1.125rem;
}
.survey-criteria-list {
    margin: 0;
    padding-left: 1.25rem;
}

.survey-player-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.survey-teams-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.survey-teams-grid .gp-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--bg-2);
}
.survey-team-card-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    margin-bottom: 0.25rem;
}
.survey-team-card-schedule {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-bottom: 0.25rem;
}
.survey-team-schedule-slot {
    display: flex;
    justify-content: space-between;
    font-size: 0.719rem;
    color: var(--ink-3);
}
.survey-team-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.313em 0.688em;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 0.813rem;
    color: var(--ink-3);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    user-select: none;
}
.survey-team-toggle input[type="checkbox"] { display: none; }
.survey-team-toggle:has(input:checked) {
    --acc: var(--accent);
    --acc-bright: color-mix(in oklab, var(--accent) 65%, #fff);
    background: color-mix(in oklab, var(--acc) 6%, transparent);
    border-color: var(--acc-bright);
    color: var(--acc-bright);
    box-shadow:
        0 0 0 1px color-mix(in oklab, var(--acc) 10%, transparent),
        0 0 14px 1px color-mix(in oklab, var(--acc) 50%, transparent),
        inset 0 0 12px -6px color-mix(in oklab, var(--acc-bright) 70%, transparent);
    text-shadow: 0 0 10px color-mix(in oklab, var(--acc-bright) 70%, transparent);
}

.survey-section-card {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.survey-section-heading {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    color: var(--ink-1);
}

.survey-field-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.875rem;
}
.survey-field-label-row {
    display: flex;
    align-items: center;
}
.survey-field-label-row .gp-save-indicator { margin-left: auto; }

.survey-text-input {
    max-width: 28rem;
}

.survey-save-status {
    font-size: 0.75rem;
}

.survey-save-status--ok {
    color: var(--ok);
}

.survey-save-status--error {
    color: var(--bad);
}

.survey-team-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.survey-team-row:last-child {
    border-bottom: none;
}

.survey-team-row-name {
    min-width: 10rem;
    font-weight: 500;
}

.survey-team-row-checks {
    display: flex;
    gap: 0.875rem;
}

.survey-team-check-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.survey-team-row-priority {
    flex: 1;
}

.survey-character-card {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    align-items: start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.survey-character-info {
    grid-column: span 8;
}
.survey-add-character-card {
    grid-column: span 8;
}
#survey-import-panel {
    grid-column: span 16;
}
.survey-character-card .survey-spec-slot {
    grid-column: span 4;
}

.survey-character-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.survey-character-name {
    font-weight: 600;
    font-size: 1rem;
}

.survey-character-realm {
    font-size: 0.813rem;
    color: var(--ink-3);
}

.survey-character-remove {
    margin-left: auto;
    /* background: none; — .btn-icon */
    /* border: none; — .btn-icon */
    /* cursor: pointer; — .btn */
    /* color: var(--ink-3); — .btn-icon-danger */
    /* font-size: 1.125rem; — .btn-icon fixed size */
    /* line-height: 1; — .btn-icon */
    /* padding: 0; — .btn-icon */
}

/* .survey-character-remove:hover { color: var(--bad); } — .btn-icon-danger:hover */

/*.survey-character-favor-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}*/
.survey-character-favor-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.survey-character-favor-row .role-detail-label,
.survey-spec-selectors .role-detail-label { margin: 0; }

#survey-form-content .role-detail-label { color: #7aaeff; }

/*.survey-spec-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}*/

.survey-spec-slot {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.survey-spec-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.survey-spec-identity {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/*.survey-spec-btn { ... } — removed; replaced by toggle-pill-check */
/*.survey-spec-btn--ghost { ... } — removed */
/*.survey-spec-btn--ghost:hover { ... } — removed */
/*.survey-spec-btn--added { ... } — removed */

.survey-spec-icon {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: cover;
    border-radius: var(--r-sm);
}
.survey-spec-name {
    font-size: 0.625rem;
    color: var(--ink-3);
    text-align: center;
    line-height: 1.2;
}

.survey-spec-detail {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.survey-spec-selectors {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.survey-add-character-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.5rem;
    border: 2px dashed var(--line);
    border-radius: var(--r-sm);
    background: none;
    color: var(--ink-3);
    cursor: pointer;
    font-size: 0.875rem;
}

.survey-add-character-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.survey-import-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.survey-import-item {
    display: block;
    cursor: pointer;
    user-select: none;
}
.survey-import-item input[type="checkbox"] { display: none; }
.survey-import-item:has(input:checked) .gp-char-card-compact {
    border-color: color-mix(in oklab, var(--accent) 65%, #fff);
    box-shadow:
        0 0.063rem 0 rgba(255,255,255,0.04) inset,
        0 0.25rem 1rem rgba(0,0,0,0.4),
        0 1rem 2.5rem rgba(0,0,0,0.5),
        0 0 0 0.063rem var(--accent),
        0 0 1.5rem color-mix(in oklch, var(--accent) 35%, transparent);
}
.survey-import-realm {
    font-size: 0.719rem;
    color: var(--ink-3);
}

.survey-import-actions {
    display: flex;
    gap: 0.5rem;
}

.survey-message-row {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 0.875rem;
}

.survey-message-textarea {
    width: 100%;
    max-width: 40rem;
    box-sizing: border-box;
    resize: vertical;
}

/*.survey-submit-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}*/

.survey-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Survey fill — locked state when submitted */
#survey-form-content[data-submitted] input:not([type="hidden"]),
#survey-form-content[data-submitted] select,
#survey-form-content[data-submitted] textarea,
#survey-form-content[data-submitted] button,
#survey-form-content[data-submitted] .toggle-pill-check,
#survey-form-content[data-submitted] .survey-team-toggle {
    opacity: 0.45;
    pointer-events: none;
}

/* Survey Results */
.sr-layout {
    display: grid;
    grid-template-columns: 8fr 8fr 8fr;
    gap: 1.125rem;
    align-items: start;
    align-items: start;
}

.sr-col-left,
.sr-col-mid,
.sr-col-right {
    padding: 0;
}

.sr-col-left.gp-split-left { width: auto; }
.sr-col-left tr[data-expandable] .col-expand { cursor: pointer; }
.sr-col-left tr[data-expandable] td:not(.col-expand),
.sr-col-left .sr-spec-table tr[data-specid] td { cursor: pointer; }

.sr-col-mid tr[data-entryid] { cursor: pointer; }
.sr-col-mid tr[data-entryid].sr-row-selected {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.07), transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(255, 255, 255, 0.18),
        inset 2px 0 0 rgba(255, 255, 255, 0.5);
}

.sr-entry-body { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.sr-entry-body .worker-kv-table { margin-left: -0.75rem; margin-right: -0.75rem; width: calc(100% + 1.5rem); }
.sr-entry-message { font-size: 0.813rem; margin: 0; }
.sr-entry-spec-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.813rem; padding: 0.125rem 0; }
.sr-entry-char-links { display: flex; gap: 0.75rem; padding-top: 0.375rem; margin-top: 0.25rem; border-top: 1px solid var(--border); }
.sr-entry-char-links a { font-size: 0.75rem; color: var(--accent); text-decoration: none; }
.sr-entry-char-links a:hover { text-decoration: underline; }
.sr-entry-teams-label { font-size: 0.656rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.044rem; color: #7aaeff; margin-bottom: 0.125rem; }
.sr-entry-teams-list { display: flex; flex-wrap: wrap; }

/* td.sr-favor-1 { color: var(--bad); }
td.sr-favor-2 { color: #ffb454; }
td.sr-favor-3 { color: oklch(0.66 0.15 150); }
td.sr-favor-4 { color: var(--accent-glow); } */
td.sr-favor-1, span.sr-favor-1 { color: var(--bad); }
td.sr-favor-2, span.sr-favor-2 { color: #ffb454; }
td.sr-favor-3, span.sr-favor-3 { color: oklch(0.66 0.15 150); }
td.sr-favor-4, span.sr-favor-4 { color: var(--accent-glow); }

.sr-col-name {
    /* font-size: 0.75rem; */
    font-weight: 600;
}

.sr-col-favor {
    width: 1px;
    white-space: nowrap;
    text-align: right;
    /* font-size: 0.688rem; */
    font-weight: 600;
}

.sr-col-total {
    width: 1px;
    white-space: nowrap;
    text-align: right;
    /* font-size: 0.688rem; */
    font-weight: 600;
    color: var(--ink-3);
    /* padding-right: 0.875rem; */
    padding-right: 1rem;
}

.sr-spec-icon {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
}

.sr-spec-icon-cell {
    width: 1px;
    white-space: nowrap;
}
.data-table.sr-spec-table td.sr-spec-icon-cell { padding-right: 0; }

.sr-col-left .detail-panel.expand-spine-detail { padding: 0; }
/* .data-table.sr-spec-table td { padding: 0.375rem 0.5rem; } */
.data-table.sr-spec-table td { padding: 0.75rem 0.5rem; }
.data-table.sr-spec-table td.col-controls { padding-right: 1rem; }

/* .sr-col-left tr[data-expandable].sr-row-selected {
    background-image: linear-gradient(
        color-mix(in srgb, var(--cls-color) 12%, transparent),
        color-mix(in srgb, var(--cls-color) 12%, transparent)
    );
}

.sr-col-left .sr-spec-table tr.sr-row-selected {
    background-image: linear-gradient(
        color-mix(in srgb, var(--cls-color) 12%, transparent),
        color-mix(in srgb, var(--cls-color) 12%, transparent)
    );
} */
.sr-col-left tr[data-expandable].sr-row-selected {
    background: linear-gradient(to right, color-mix(in oklch, var(--cls-color) 10%, transparent), transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, var(--cls-color) 22%, transparent),
        inset 0 -1px 0 color-mix(in oklch, var(--cls-color) 22%, transparent),
        inset 2px 0 0 var(--cls-color);
}

.sr-col-left .sr-spec-table tr.sr-row-selected {
    background: linear-gradient(to right, color-mix(in oklch, var(--cls-color) 10%, transparent), transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, var(--cls-color) 22%, transparent),
        inset 0 -1px 0 color-mix(in oklch, var(--cls-color) 22%, transparent),
        inset 2px 0 0 var(--cls-color);
}

.sr-col-left .expand-spine {
    background: color-mix(in oklab, var(--cls-color) 35%, var(--bg));
}
.sr-col-left tr[data-expandable]:hover .expand-spine {
    background: linear-gradient(180deg, var(--cls-color), color-mix(in oklab, var(--cls-color) 35%, var(--bg)));
    box-shadow: 0 0 14px -2px color-mix(in srgb, var(--cls-color) 40%, transparent);
}
.sr-col-left tr[data-expandable][data-expanded] .expand-spine {
    background: var(--cls-color);
    box-shadow: 0 0 14px -2px color-mix(in srgb, var(--cls-color) 40%, transparent);
}
.sr-col-left tr[data-expandable]:hover .expand-notch,
.sr-col-left tr[data-expandable][data-expanded] .expand-notch {
    border-color: color-mix(in srgb, var(--cls-color) 45%, transparent);
    color: var(--cls-color);
    box-shadow: 2px 0 12px -4px color-mix(in srgb, var(--cls-color) 40%, transparent);
}
.sr-col-left .expand-spine-detail::before {
    background: linear-gradient(180deg, var(--cls-color), color-mix(in oklab, var(--cls-color) 35%, var(--bg)));
    box-shadow: 0 0 14px -2px color-mix(in srgb, var(--cls-color) 40%, transparent);
}

.switch-account-wrap {
    max-width: 30rem;
    margin: 3.75rem auto 0;
    position: relative;
}

.switch-account-wrap::before {
    content: '';
    position: absolute;
    width: 23.75rem;
    height: 23.75rem;
    left: 10%;
    top: -5rem;
    background: radial-gradient(closest-side, rgba(90,140,201,0.22), transparent 70%);
    filter: blur(2.5rem);
    pointer-events: none;
    z-index: 0;
}

.switch-account-card {
    box-shadow: var(--sh-pop);
    padding: 1.75rem !important;
    position: relative;
    z-index: 1;
}

.switch-account-lede {
    font-size: 0.844rem;
    color: var(--ink-2);
    margin-bottom: 1.125rem;
    line-height: 1.5;
}

.switch-account-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 1.375rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.switch-account-steps li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.844rem;
    color: var(--ink-2);
}

.switch-step-n {
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: rgba(43,95,196,0.12);
    border: 1px solid rgba(43,95,196,0.3);
    color: var(--accent-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.688rem;
    font-weight: 600;
    flex-shrink: 0;
}

.switch-account-cta {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 0.313rem 0.75rem;
    font-size: 0.813rem;
    font-family: inherit;
    line-height: 1.3;
    color: var(--ink);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
textarea {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 0.438rem 0.75rem;
    font-size: 0.813rem;
    font-family: inherit;
    color: var(--ink);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(43,95,196,0.15);
}

input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
    color: var(--ink-3);
}

input[type="text"]:disabled,
input[type="number"]:disabled,
input[type="password"]:disabled,
input[type="date"]:disabled,
input[type="time"]:disabled,
input[type="datetime-local"]:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.45;
    cursor: pointer;
    border-radius: 0.125rem;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 0.85; }
input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.45; cursor: pointer; border-radius: 0.125rem; }
input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 0.85; }
input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.45; cursor: pointer; border-radius: 0.125rem; }
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 0.85; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    background: var(--bg-3);
    border-left: 1px solid var(--line);
    color: var(--ink-3);
    opacity: 1;
    cursor: pointer;
}

.num-stepper {
    display: inline-flex;
    align-items: stretch;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.num-stepper:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(43, 95, 196, 0.15);
}
.num-stepper-btn {
    background: none;
    border: none;
    color: var(--ink-3);
    cursor: pointer;
    min-width: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    transition: color 0.12s, background 0.12s;
}
.num-stepper-btn:hover { color: var(--ink); background: var(--bg-3); }
.num-stepper-dec { border-right: 1px solid var(--line); }
.num-stepper-inc { border-left: 1px solid var(--line); }
.num-stepper .num-stepper-input {
    background: none;
    border: none;
    border-radius: 0;
    color: var(--ink);
    text-align: center;
    padding: 0.313rem 0;
    width: 2.75rem;
    font-size: 0.813rem;
    font-family: inherit;
    line-height: 1.3;
    outline: none;
    box-shadow: none;
    min-width: 0;
    -moz-appearance: textfield;
}
.num-stepper .num-stepper-input:focus { border-color: transparent; box-shadow: none; }
.num-stepper .num-stepper-input::-webkit-inner-spin-button,
.num-stepper .num-stepper-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.num-stepper:has(.num-stepper-input:disabled) { opacity: 0.45; cursor: not-allowed; }
.num-stepper:has(.num-stepper-input:disabled) .num-stepper-btn { cursor: not-allowed; pointer-events: none; }

select {
    appearance: none;
    background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a8094'/%3E%3C/svg%3E") no-repeat right 0.625rem center;
    background-size: 0.625rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 0.313rem 1.75rem 0.313rem 0.75rem;
    font-size: 0.813rem;
    font-family: inherit;
    line-height: 1.3;
    color: var(--ink);
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

select:focus { border-color: var(--accent); }
select:disabled { opacity: 0.45; cursor: not-allowed; }

.gp-select {
    padding: 0.313rem 1.375rem 0.313rem 0.5rem;
    border-radius: 0.25rem;
}

.gp-select-compact {
    padding: 0.2rem 1.375rem 0.2rem 0.4rem;
    border-radius: 0.188rem;
}

input[type="checkbox"] {
    appearance: none;
    width: 0.813rem;
    height: 0.813rem;
    border: 1px solid var(--line);
    background: var(--bg-2);
    border-radius: 0.125rem;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s;
}

input[type="checkbox"]:checked {
    background: #2b5fc4;
    border-color: #2b5fc4;
}

input[type="checkbox"]:disabled { opacity: 0.45; cursor: not-allowed; }

input.bislist-toggle-input,
input.bislist-main-spec-checkbox {
    appearance: none;
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    border: none;
    background: none;
    box-shadow: none;
    pointer-events: none;
}

.gp-card {
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-card);
}

.gp-card-padded { padding: 1.125rem; }
.gp-card-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }

.gp-card-table { padding: 0; overflow: hidden; }

.gp-card-mb-wide { margin-bottom: 1.5rem; }
.gp-card-mb-med { margin-bottom: 1.25rem; }
.gp-card-mb-narrow { margin-bottom: 1rem; }

.gp-card-divider { height: 1px; background: var(--line); margin: 0.75rem 0; }
.gp-card-padded .gp-card-divider { margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); }

.gp-card-header {
    font-size: 0.813rem;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.625rem;
    margin-bottom: 0.875rem;
    border-bottom: 1px solid var(--line-soft);
}

.gp-section-card {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.gp-section-card-header {
    background: var(--bg-3);
    border-bottom: 1px solid var(--line-soft);
    padding: 0.313rem 0.625rem;
    font-size: 0.656rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.038rem;
    color: var(--ink-3);
    text-align: left;
}
.gp-section-card-body {
    padding: 0.625rem;
}
.gp-section-card-body:has(> table) { padding: 0; overflow: hidden; }

.gp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: default;
}

.role-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 0.188rem;
    background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg) 100%);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 0.063rem 0 rgba(255,255,255,0.04) inset, 0 0.125rem 0.25rem rgba(0,0,0,0.5);
    flex-shrink: 0;
}
.role-icon[data-role="tank"] { --role-color: #2e68b0; }
.role-icon[data-role="healer"] { --role-color: #1f9c3a; }
.role-icon[data-role="damage"],
.role-icon[data-role="ranged"],
.role-icon[data-role="melee"] { --role-color: #9e2630; }
.role-icon-svg {
    display: block;
    width: 0.875rem;
    height: 0.875rem;
    background-color: var(--role-color, var(--ink-3));
    mask-image: var(--role-icon-url);
    mask-size: 100% 100%;
    -webkit-mask-image: var(--role-icon-url);
    -webkit-mask-size: 100% 100%;
}

.expanded-panel {
    background: var(--bg);
    padding: 1.125rem 1.25rem 1.375rem;
    box-shadow: inset 0 1px 0 rgba(220,230,255,0.08),
                inset 0 0.5rem 1rem -0.625rem rgba(0,0,0,0.5),
                inset 0 -0.5rem 1rem -0.625rem rgba(0,0,0,0.5);
}
.detail-row td { padding: 0; }
.detail-panel {
    background: var(--bg);
    padding: 1.125rem 1.25rem 1.375rem;
    color: var(--ink-2);
    font-size: 0.813rem;
    box-shadow: inset 0 1px 0 rgba(220,230,255,0.08),
                inset 0 0.5rem 1rem -0.625rem rgba(0,0,0,0.5),
                inset 0 -0.5rem 1rem -0.625rem rgba(0,0,0,0.5);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
}

/* D2 continuous spine indicator */
tr[data-expandable] .col-expand { position: relative; }
tr[data-expandable] { background: var(--bg-2); cursor: pointer; }

.expand-spine {
    position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: color-mix(in oklab, var(--accent) 35%, var(--bg));
    z-index: 2;
    transition: width 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
/* .expand-notch {
    position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 23px; border-radius: 0 8px 8px 0;
    background: var(--bg-3); border: 1px solid var(--line); border-left: 0;
    color: var(--ink-3); z-index: 3;
    transition: left 0.18s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.18s ease;
} */
.expand-notch {
    position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
    width: 1.125em; height: 1.4375em; border-radius: 0 8px 8px 0;
    background: var(--bg-3); border: 1px solid var(--line); border-left: 0;
    color: var(--ink-3); z-index: 3;
    transition: left 0.18s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.18s ease;
}
/* .expand-notch-glyph {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px; font-weight: 600; line-height: 1;
} */
/* .expand-notch-glyph {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.9375em; font-weight: 600; line-height: 1;
} */
.expand-notch-glyph {
    position: absolute; top: 50%; left: 50%;
    transform: translate(calc(-50% - 1px), -50%);
    font-size: 0.9375em; font-weight: 600; line-height: 1;
}

tr[data-expandable]:hover .expand-spine {
    width: 3px;
    background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 35%, var(--bg)));
    box-shadow: 0 0 14px -2px rgba(43,95,196,0.40);
}
tr[data-expandable]:hover .expand-notch {
    left: 3px;
    border-color: rgba(43,95,196,0.45);
    color: var(--accent-glow);
    box-shadow: 2px 0 12px -4px rgba(43,95,196,0.40);
}
tr[data-expandable][data-expanded] .expand-spine {
    width: 3px; background: var(--accent);
    box-shadow: 0 0 14px -2px rgba(43,95,196,0.40);
}
tr[data-expandable][data-expanded] .expand-notch {
    left: 3px;
    border-color: rgba(43,95,196,0.45); color: var(--accent-glow);
}

.expand-spine-detail { position: relative; }
.expand-spine-detail::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 35%, var(--bg)));
    box-shadow: 0 0 14px -2px rgba(43,95,196,0.40); z-index: 2;
}
.detail-panel.expand-spine-detail { padding-left: 1.375rem; }

.gp-trail {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.781rem;
    margin-bottom: 0.5rem;
}

.gp-trail-link {
    color: var(--ink-3);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
}

.gp-trail-link:hover { color: var(--ink); }

.gp-trail-sep {
    color: var(--ink-3);
    font-size: 0.625rem;
    user-select: none;
}

.gp-trail-current { color: var(--ink); }

.gp-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--r-sm);
    border: 1px solid;
    border-left-width: 0.188rem;
    font-size: 0.813rem;
    margin-bottom: 0.875rem;
}

.gp-notice-bad {
    color: var(--bad);
    border-color: rgba(255,107,107,0.25);
    border-left-color: var(--bad);
    background: rgba(255,107,107,0.05);
    box-shadow: inset 3px 0 8px rgba(255,107,107,0.08);
}

.gp-notice-ok {
    color: var(--ok);
    border-color: rgba(107,212,155,0.3);
    border-left-color: var(--ok);
    background: rgba(107,212,155,0.05);
    box-shadow: inset 3px 0 8px rgba(107,212,155,0.08);
}

.gp-notice-warn {
    color: var(--warn);
    border-color: rgba(255,180,84,0.3);
    border-left-color: var(--warn);
    background: rgba(255,180,84,0.05);
    box-shadow: inset 3px 0 8px rgba(255,180,84,0.08);
}

.gp-notice-info {
    color: var(--accent-2);
    border-color: rgba(90,140,201,0.3);
    border-left-color: var(--accent-2);
    background: rgba(90,140,201,0.05);
    box-shadow: inset 3px 0 8px rgba(90,140,201,0.08);
}

.gp-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    padding: 0.188rem 0.563rem;
    border-radius: 0.25rem;
    border: 1px solid;
    font-weight: 500;
}

.gp-tag-neutral  { color: var(--ink-3);  border-color: var(--line);              background: var(--bg-2); }
.gp-tag-ok       { color: #a4e6c2;       border-color: rgba(107,212,155,0.70);   background: rgba(58,142,96,0.1); }
.gp-tag-warn     { color: #ffd27a;       border-color: rgba(255,180,84,0.70);    background: rgba(212,160,60,0.10); }
.gp-tag-bad      { color: var(--bad);    border-color: rgba(255,107,107,0.25);   background: rgba(255,107,107,0.05); }
.gp-tag-info     { color: #9fb4ff;       border-color: rgba(159,180,255,0.50);   background: rgba(43,95,196,0.14); }

.gp-list-active {
    border-left: 2px solid #dce6ff;
    background: linear-gradient(to right, rgba(220,230,255,0.1), rgba(220,230,255,0));
    box-shadow: inset 0 1px 0 rgba(170,200,255,0.22),
                inset -0.063rem 0 0 rgba(170,200,255,0.22),
                inset 0 -0.063rem 0 rgba(170,200,255,0.22);
}

.bis-item-tier {
    display: inline-flex;
    align-items: center;
    font-size: 0.656rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 0.188rem;
    border-width: 1px;
    border-style: solid;
    letter-spacing: 0.025rem;
    flex-shrink: 0;
}

.bis-item-tier-bis      { color: #ffb1b1; border-color: rgba(255,107,107,0.70);  background: rgba(196,68,68,0.1); }
.bis-item-tier-major    { color: #ffd27a; border-color: rgba(255,180,84,0.70);   background: rgba(212,160,60,0.12); }
.bis-item-tier-minor    { color: #a4e6c2; border-color: rgba(107,212,155,0.70);  background: rgba(58,142,96,0.1); }
.bis-item-tier-offspec  { color: #b6bac6; border-color: rgba(122,128,148,0.65);  background: transparent; }
.bis-item-tier-transmog { color: #e8a0df; border-color: rgba(220,120,255,0.70);  background: rgba(186,85,211,0.10); }

.diff-pill {
    font-family: inherit;
    font-size: 0.719rem;
    background: transparent;
    color: var(--ink-3);
    border: 1px solid var(--line-soft);
    border-radius: 0.25rem;
    padding: 0.25rem 0.625rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.15s;
}
.diff-pill:hover { color: var(--ink); }

.diff-pill-normal.on  { color: #1EFF00; background: rgba(30,255,0,0.10);    border-color: rgba(30,255,0,0.45);    box-shadow: 0 0 10px rgba(30,255,0,0.20); }
.diff-pill-heroic.on  { color: #0070DD; background: rgba(0,112,221,0.12);   border-color: rgba(0,112,221,0.45);   box-shadow: 0 0 10px rgba(0,112,221,0.25); }
.diff-pill-mythic.on  { color: #d6a8ff; background: rgba(163,53,238,0.18);  border-color: rgba(163,53,238,0.50);  box-shadow: 0 0 10px rgba(163,53,238,0.25); }
.diff-pill-unknown.on { color: #9D9D9D; background: rgba(157,157,157,0.10); border-color: rgba(157,157,157,0.40); }

.bis-item {
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    border-left: 0.188rem solid var(--line-soft);
    position: relative;
    overflow: visible;
}

.bis-item-added     { border-left-color: #4ade80; }
.bis-item-changed   { border-left-color: #ffb454; }
.bis-item-removed   { border-left-color: #ff6b6b; opacity: 0.78; }
.bis-item-unchanged { border-left-color: #5a8cc9; }

.bis-item-added::before,
.bis-item-changed::before,
.bis-item-removed::before,
.bis-item-unchanged::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -0.875rem;
    width: 0.875rem;
    pointer-events: none;
}
.bis-item-added::before     { background: linear-gradient(to left, rgba(74,222,128,0.28),  transparent); }
.bis-item-changed::before   { background: linear-gradient(to left, rgba(255,180,84,0.28),  transparent); }
.bis-item-removed::before   { background: linear-gradient(to left, rgba(255,107,107,0.28), transparent); }
.bis-item-unchanged::before { background: linear-gradient(to left, rgba(90,140,201,0.28),  transparent); }

.key-colour-ok  { color: #FFFFFF; }
.key-colour-bad { color: #ff6b6b; }

.dashboard-changelog-card { font-size: 0.813rem; display: flex; flex-direction: column; }
.changelog-card-footer { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 0.75rem; }
.changelog-summary-list { list-style: none; padding: 0; margin: 0; }
.changelog-summary-date-heading { font-size: 0.688rem; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05rem; padding: 0.5rem 0 0.125rem; border-top: 1px solid var(--line-soft); margin-top: 0.25rem; }
.changelog-summary-date-heading:first-child { border-top: none; margin-top: 0; padding-top: 0; }

.changelog-summary-item { display: flex; align-items: baseline; gap: 0.375rem; padding: 0.188rem 0; }

.changelog-entry-date { color: var(--ink-3); opacity: 0.65; }
.changelog-list { display: flex; flex-direction: column; gap: 0.75rem; }

.changelog-category-badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.038rem;
    padding: 0.063rem 0.375rem;
    border-radius: 0.188rem;
    border: 1px solid;
    flex-shrink: 0;
    vertical-align: middle;
}
.changelog-category-0 { color: #6ecc8e; border-color: rgba(110,204,142,0.4); background: rgba(110,204,142,0.08); }
.changelog-category-1 { color: #7ab4e8; border-color: rgba(122,180,232,0.4); background: rgba(122,180,232,0.08); }
.changelog-category-2 { color: #e8a07a; border-color: rgba(232,160,122,0.4); background: rgba(232,160,122,0.08); }
.changelog-category-3 { color: var(--ink-3); border-color: var(--line); background: transparent; }
.changelog-category-4 { color: #e8d07a; border-color: rgba(232,208,122,0.4); background: rgba(232,208,122,0.08); }
.changelog-day-header { margin-bottom: 0.4rem; }
.changelog-category-heading { font-size: 0.75rem; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.031rem; margin: 0.375rem 0 0.125rem; }
.changelog-pagination {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.changelog-pagination-label { font-size: 0.813rem; color: var(--ink-3); }
.changelog-pagination-disabled { opacity: 0.35; pointer-events: none; cursor: default; }

.changelog-entry + .changelog-entry { margin-top: 0.2rem; }
.changelog-entry summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.35rem; user-select: none; }
.changelog-entry summary::-webkit-details-marker { display: none; }

.changelog-entry-title { font-weight: 400; font-size: 0.875rem; margin: 0; color: var(--ink-3); }
.changelog-entry-chevron { color: var(--ink-3); opacity: 0.5; flex-shrink: 0; transition: transform 0.15s; font-size: 0.75rem; }
details[open].changelog-entry .changelog-entry-chevron { transform: rotate(90deg); }

.changelog-entry-body { margin-top: 0.2rem; padding-left: 1rem; font-size: 0.8rem; color: var(--ink-3); opacity: 0.75; }

.dash-notif-empty { margin: 0; }

.dash-notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.dash-notif-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.813rem;
    background: var(--bg-2);
}

.dash-notif-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.dash-notif-badge-player {
    background: var(--bg-3);
    color: var(--ink-3);
}

.dash-notif-badge-rl {
    background: color-mix(in srgb, var(--accent-2) 15%, transparent);
    color: var(--accent-2);
}

.dash-notif-message { flex: 1; font-size: 0.813rem; }
.dash-notif-declined .dash-notif-message { color: var(--bad); }
.dash-notif-link { margin-left: auto; }

.dash-pending-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.dash-pending-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.813rem;
}

.dash-pending-count {
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent);
    min-width: 1.5rem;
    text-align: right;
}

.dash-pending-team { flex: 1; }

.raider-view-layout { display: flex; align-items: flex-start; gap: 1rem; }

.raider-view-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.raider-view-announcement { font-size: 0.875rem; color: var(--ink-2); }
.raider-static-table { width: max-content; border-collapse: separate; border-spacing: 0; font-size: 0.813rem; }
.raider-static-table thead th { background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%); text-align: left; padding: 0.5rem 0.875rem; font-size: 0.688rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.025rem; color: var(--ink-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.raider-static-table td { padding: 0.375rem 0.875rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; white-space: nowrap; }
.raider-static-table tbody tr:last-child td { border-bottom: none; }
.raider-static-table tbody tr:hover td { background: var(--bg-2); }
.raider-player-th { min-width: 8rem; position: sticky; left: 0; z-index: 10; background: var(--bg-2); box-shadow: 2px 0 6px rgba(0,0,0,0.18); }
.raider-player-cell { font-weight: 500; position: sticky; left: 0; z-index: 9; background: var(--bg-2); box-shadow: 2px 0 6px rgba(0,0,0,0.18); }
.raider-static-table tbody tr:hover .raider-player-cell { background-image: linear-gradient(rgba(43,95,196,0.06), rgba(43,95,196,0.06)); }
.raider-status-cell { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.raider-status-cell .role-icon { width: 1rem; height: 1rem; flex-shrink: 0; font-size: 0; line-height: 0; }
.raider-status-cell .role-icon-svg { width: 1rem; height: 1rem; }
/*.raider-status-1 { color: var(--ok); font-weight: 600; }*/
.raider-status-1 { font-weight: 600; }
/*.raider-status-2 { color: #f87171; }*/
/*.raider-status-3 { color: #f59e0b; font-weight: 500; }*/
.raider-status-3 { font-weight: 500; }
/*.raider-status-0 { color: var(--ink-3); }*/

.raider-table-nav { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line-soft); }
.raider-table-scroll { overflow-x: hidden; }
body.layout-full-width .raider-table-scroll { overflow-x: auto; }
.raider-col-th { width: 7.5rem; min-width: 7.5rem; max-width: 7.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.raider-static-table td:not(:first-child) { width: 7.5rem; min-width: 7.5rem; max-width: 7.5rem; }

.roster-last-updated {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--ink-3);
}

/* .gp-card-table-head { padding: 0.75rem 1rem 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } */
/* .gp-card-table-head > div > h2 { margin-bottom: 0.125rem; } */
/* .gp-card-table-head > div > .roster-last-updated { margin-bottom: 0; } */
.gp-card-header-compact { padding: 0.75rem 1rem 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.gp-card-header-controls { display: flex; align-items: center; gap: 0.5rem; }
.gp-card-header-compact > div > h2 { margin-bottom: 0.125rem; }
.gp-card-header-compact > div > .roster-last-updated { margin-bottom: 0; }
.dash-roster-empty { color: var(--ink-3); font-size: 0.813rem; padding: 0.75rem 1rem; margin: 0; }
.dash-roster-footer { padding: 0.375rem 1rem 0.75rem; display: flex; justify-content: flex-end; }
.dash-roster-table { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
table.data-table.dash-roster-table { margin-bottom: 0.75rem; }
.data-table tr.dash-roster-date-row { border-bottom: 1px solid var(--line); }
.data-table tr.dash-roster-date-row { cursor: pointer; }
.data-table tr.dash-roster-date-row td { padding: 0; font-size: 0.75rem; line-height: 1.3; }
.data-table tr.dash-roster-col-row td { padding: 0.188rem 1rem; font-size: 0.75rem; line-height: 1.3; color: var(--ink-3); }
.dash-roster-date-cell { display: flex; align-items: center; padding: 0.188rem 0.25rem 0.188rem 1rem; width: 100%; }
.dash-roster-date-ann { width: 1px; white-space: nowrap; vertical-align: middle; }
.data-table tr.dash-roster-date-row td.dash-roster-date-ann { padding: 0.188rem 0.25rem; text-align: center; }
.dash-roster-ann-wrap { display: inline-flex; }
.dash-roster-ann-icon { display: block; width: 0.75rem; height: 0.75rem; background-color: var(--bad); -webkit-mask-image: url('/img/announcement.svg'); mask-image: url('/img/announcement.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.dash-roster-date-cell a { color: var(--ink); text-decoration: none; }
.dash-roster-date-cell a:hover { color: var(--accent-glow); }
.dash-roster-date-cell .dash-roster-time { color: var(--ink-3); margin-left: auto; }
.data-table tr.dash-roster-col-row { background: var(--bg); border-top: none; }

.data-table tr.dash-roster-col-row .dash-roster-col-label { padding-left: 1.5rem; }
.data-table tr.dash-roster-col-row .dash-roster-col-char { font-weight: 600; white-space: nowrap; }
.data-table tr.dash-roster-col-row .dash-roster-col-role { width: 1px; white-space: nowrap; font-size: 0; line-height: 0; }
.data-table tr.dash-roster-col-row td.dash-roster-col-role { padding: 0.188rem 0.25rem; text-align: center; }
.data-table tr.dash-roster-col-row .role-icon { width: 1.2rem; height: 1.2rem; }
.data-table tr.dash-roster-col-row .role-icon-svg { width: 0.9rem; height: 0.9rem; }
/*.data-table tr.dash-roster-col-row td.raider-status-1 { color: var(--ok); text-align: right; padding-right: 0.25rem; }*/
.data-table tr.dash-roster-col-row td.raider-status-1 { text-align: right; padding-right: 0.25rem; }
/*.data-table tr.dash-roster-col-row td.raider-status-2 { color: #f87171; text-align: right; padding-right: 0.25rem; }*/
.data-table tr.dash-roster-col-row td.raider-status-2 { text-align: right; padding-right: 0.25rem; }
/*.data-table tr.dash-roster-col-row td.raider-status-3 { color: #f59e0b; text-align: right; padding-right: 0.25rem; }*/
.data-table tr.dash-roster-col-row td.raider-status-3 { text-align: right; padding-right: 0.25rem; }
/*.data-table tr.dash-roster-col-row td.raider-status-0 { color: var(--ink-3); text-align: right; padding-right: 0.25rem; }*/
.data-table tr.dash-roster-col-row td.raider-status-0 { text-align: right; padding-right: 0.25rem; }

.dash-team-carousel { display: flex; flex-direction: column; gap: 0.5rem; }
.dash-team-subtitle { font-size: 0.75rem; color: var(--ink-3); margin: 0 0 0.375rem; }
.carousel-track { position: relative; }
.carousel-slide { display: none; flex-direction: column; gap: 0.5rem; }
.carousel-slide.active { display: flex; }
.carousel-slide-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.carousel-btn {
    /* background: none; — .btn */
    /* border: 1px solid var(--line); — .btn */
    /* border-radius: 0.25rem; — .btn */
    /* cursor: pointer; — .btn */
    /* line-height: 1; — .btn */
    color: var(--ink-3);
    font-size: 1rem;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
}
.carousel-btn:hover { color: var(--accent); border-color: var(--accent); }
.carousel-dots { display: flex; gap: 0.375rem; align-items: center; }
.carousel-dot {
    width: 0.438rem;
    height: 0.438rem;
    border-radius: 50%;
    background: var(--line);
    cursor: pointer;
    transition: background 0.15s;
}
.carousel-dot.active { background: var(--accent); }

.trials-carousel-controls { margin-bottom: 0.375rem; }
.trials-slide { display: none; }
.trials-slide.active { display: flex; flex-direction: column; }
.trials-team-name { font-size: 0.8rem; margin: 0 0 0.375rem; }
.trials-table thead th { padding: 0.188rem 0.5rem; font-size: 0.688rem; line-height: 1.3; }
.trials-table td { padding: 0.125rem 0.5rem; font-size: 0.75rem; line-height: 1.3; }
.gp-card-trials { overflow: hidden; }
.gp-card-trials > h2 { margin-bottom: 0.125rem; }
.gp-card-trials .trials-table { margin-left: -1.125rem; margin-right: -1.125rem; width: calc(100% + 2.25rem); margin-bottom: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gp-card-trials .trials-table thead th:first-child,
.gp-card-trials .trials-table td:first-child { padding-left: 1.125rem; }
.gp-card-trials .trials-table thead th:last-child,
.gp-card-trials .trials-table td:last-child { padding-right: 1.125rem; }
.trials-card-subhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.trials-card-subhead .roster-last-updated { margin: 0; }
/* .trials-card-subhead .btn { font-size: 0.688rem; padding: 0.313rem 0.563rem; color: var(--ink-3); border-color: var(--line-soft); box-shadow: none; } */
/* .trials-card-subhead .btn:hover { color: var(--ink-2); border-color: var(--line); } */
.dash-trials-update-status { font-size: 0.75rem; }
.dash-no-access-notice { margin-bottom: 0; }

.gp-card-signups h2 { margin-bottom: 0.125rem; }
.signups-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.125rem; }
.signups-card-head h2 { margin-bottom: 0; }
.signups-card-subhead { display: flex; align-items: center; justify-content: space-between; padding: 0 1.125rem 0.5rem; margin: 0 -1.125rem 0.5rem; border-bottom: 1px solid var(--line); }
.signups-card-subhead .roster-last-updated { margin: 0; }
.signups-subhead-controls { display: flex; align-items: center; gap: 0.375rem; }

.signups-btn { font-size: 0.688rem; padding: 0.313rem 0.563rem; color: var(--ink-3); border-color: var(--line-soft); box-shadow: none; }
.signups-btn:hover { color: var(--ink-2); border-color: var(--line); }
.signups-card-footer { display: flex; justify-content: flex-end; gap: 0.375rem; margin-top: 0.5rem; }
.raider-signup-status-area { margin-top: 0.5rem; }
.raider-signups-footer { display: flex; align-items: center; margin: 0.5rem -1.125rem 0; padding: 0.5rem 1.125rem 0; border-top: 1px solid var(--line); }
/* .raider-signups-settings-btn { display: inline-flex; ...; background: none; border: none; padding: 0; } — .btn.btn-icon */
.raider-signups-settings-icon { display: inline-block; width: 0.875rem; height: 0.875rem; background-color: var(--ink-3); -webkit-mask: url('/img/settings.svg') no-repeat center / contain; mask: url('/img/settings.svg') no-repeat center / contain; }
.raider-signups-settings-btn:hover .raider-signups-settings-icon { background-color: var(--ink-2); }
.raider-signups-settings-btn.active .raider-signups-settings-icon { background-color: var(--accent); }
.raider-signups-settings-btn.active:hover .raider-signups-settings-icon { background-color: var(--accent-glow); }
/*.raider-signups-refresh-icon { display: inline-block; width: 0.75rem; height: 0.75rem; background-color: var(--accent); } + .btn:hover .raider-signups-refresh-icon { background-color: var(--accent-glow); } — superseded; icon now uses currentColor, btn-accent owns colour states*/
.raider-signups-refresh-icon { display: inline-block; width: 0.75rem; height: 0.75rem; background-color: currentColor; -webkit-mask: url('/img/refresh.svg') no-repeat center / contain; mask: url('/img/refresh.svg') no-repeat center / contain; }
/* .raider-signups-refresh-countdown { font-size: 0.625rem; line-height: 1; font-variant-numeric: tabular-nums; margin-left: 0.25rem; } */
/* .icon-btn:disabled { opacity: 0.4; cursor: not-allowed; } */
.raider-signups-footer-spacer { flex: 1; }
/* .raider-signups-source-toggle { display: none; border: 1px solid var(--line); border-radius: 0.25rem; overflow: hidden; } */
.raider-signups-source-toggle { display: none; }
.raider-signups-footer.settings-open .raider-signups-source-toggle { display: inline-flex; }
/* .raider-signups-toggle-btn { background: none; border: none; padding: 0.2rem 0.5rem; font-size: 0.75rem; color: var(--ink-3); cursor: pointer; } */
.raider-signups-toggle-btn { padding: 0.2rem 0.5rem; font-size: 0.75rem; color: var(--ink-3); }
/* .raider-signups-toggle-btn.active { background-color: var(--accent); color: var(--ink); } */
/* .raider-signups-toggle-btn.btn-active { background-color: var(--accent); color: var(--ink); } [old — flat blue; replaced by standard .btn-active gradient/glow] */
/* .raider-signups-toggle-btn:not(.active):hover { background-color: var(--bg-3); } */
.raider-signups-toggle-btn:not(.btn-active):hover { background-color: var(--bg-3); }
.raider-signups-auto-wrap { display: none; align-items: center; gap: 0.375rem; margin-left: 0.5rem; }
.raider-signups-footer.settings-open .raider-signups-auto-wrap { display: inline-flex; }
.raider-signups-auto-label { font-size: 0.75rem; color: var(--ink-3); }
.raider-signups-auto-btn { position: relative; width: 2rem; height: 1rem; padding: 0; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--bg-3); cursor: pointer; box-sizing: border-box; }
.raider-signups-auto-btn::after { content: ''; position: absolute; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--ink-3); top: 50%; left: 0.125rem; transform: translateY(-50%); transition: left 0.15s, background 0.15s; }
.raider-signups-auto-btn.active { background: var(--accent); border-color: var(--accent); }
.raider-signups-auto-btn.active::after { left: calc(2rem - 0.625rem - 0.125rem - 2px); background: var(--ink); }
.raider-signups-auto-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.raider-signups-edit-controls { display: flex; align-items: center; }
.raider-signups-footer.settings-open .raider-signups-edit-controls { display: none; }
.raider-signups-footer.edit-mode .raider-signups-edit-controls { display: none; }
.raider-signups-save-controls { display: none; align-items: center; gap: 0.375rem; }
.raider-signups-footer.edit-mode .raider-signups-save-controls { display: flex; }
.raider-signups-footer.edit-mode .raider-signups-settings-btn { opacity: 0.4; pointer-events: none; }
.raider-signup-edit-row { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.25rem 0; }
.raider-signup-edit-main { display: flex; align-items: center; gap: 0.5rem; }
.raider-signup-edit-main .raider-signup-player { flex: 1; }
.raider-signup-edit-status { font-size: 0.75rem; padding: 0.2rem 0.375rem; padding-right: 1.375rem; }
.raider-signup-edit-note { font-size: 0.75rem; padding: 0.2rem 0.375rem; width: 100%; box-sizing: border-box; resize: vertical; min-height: 2.5rem; }
.raider-signup-note-counter { display: block; font-size: 0.625rem; color: var(--ink-4); text-align: right; }
.raider-signup-row { display: flex; align-items: center; justify-content: space-between; }
.raider-signup-player { display: flex; align-items: center; gap: 0.375rem; }
.raider-signup-status-text { font-size: 0.75rem; color: var(--ink-3); }
.raider-signup-note { font-size: 0.75rem; color: var(--ink-3); margin: 0.125rem 0 0; }

.dash-signups-update-status { font-size: 0.75rem; color: var(--ink-3); line-height: 1; }

.signups-empty { font-size: 0.813rem; margin: 0; }
.signups-columns { display: flex; gap: 0.5rem; }
.signups-col { flex: 1; min-width: 0; }
.signups-col-title { font-size: 0.688rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.038rem; margin-bottom: 0.25rem; }
.signups-col-declined { color: #ff6b6b; }
.signups-col-tentative { color: #ffd27a; }
.signups-col-pending { color: #7aaeff; }
.signups-col-empty { font-size: 0.75rem; }

.signups-player { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; line-height: 1.5; white-space: nowrap; }
.signups-player-dim { color: #ff6b6b; cursor: default; }
.signups-gow-badge { height: 0.875rem; width: auto; flex-shrink: 0; }
.signups-player[draggable="true"] { cursor: grab; }
.signups-player.is-dragging { opacity: 0.4; cursor: grabbing; }
.signups-column.is-drag-over { background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: var(--r-sm); }
.signups-more { font-size: 0.75rem; color: var(--ink-3); margin-top: 0.125rem; }

.signups-note-wrap { display: inline-flex; align-items: flex-end; position: relative; margin-left: 0.25rem; vertical-align: text-bottom; padding-bottom: 0.125rem; }

.signups-note-icon { display: inline-block; width: 0.75rem; height: 0.75rem; background-color: var(--ink-3); -webkit-mask: url('/img/note.svg') no-repeat center / contain; mask: url('/img/note.svg') no-repeat center / contain; cursor: default; }
.signups-note-wrap:hover .signups-note-icon { background-color: var(--ink-2); }
.signups-note-tooltip { display: none; position: absolute; bottom: calc(100% + 0.25rem); right: 0; min-width: 8rem; max-width: 14rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.375rem 0.5rem; font-size: 0.75rem; color: var(--ink-2); white-space: normal; word-break: break-word; z-index: 200; box-shadow: var(--sh-pop); pointer-events: none; }
.signups-note-wrap:hover .signups-note-tooltip { display: block; }
.signups-column { flex: 1; min-width: 0; }

.signups-column-head { font-size: 0.688rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.038rem; color: var(--ink-2); margin-bottom: 0.375rem; }

.signups-column-head--accepted { color: var(--ok); }
.signups-column-head--tentative { color: #ffd27a; }
.signups-column-head--declined { color: #ff6b6b; }
.signups-column-head--pending { color: #7aaeff; }

.dash-grid {
    display: grid;

    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    align-items: start;
    font-size: 0.875rem;
}
.dash-grid .span-2 { grid-column: span 2; }
.dash-grid .span-3 { grid-column: span 3; }
.dash-grid .span-4 { grid-column: span 4; }
.dash-grid .span-6 { grid-column: span 6; }
.dash-section-label {
    grid-column: 1 / -1;
    font-size: 0.688rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.075rem;
    color: var(--ink-3);
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}
.dash-section-label:first-child {
    border-top: none;
    padding-top: 0;
}

.nav-logo-img {
    height: 1.5rem;
    width: auto;
    flex-shrink: 0;
}

.gp-table-wide-label {
    table-layout: fixed;
}
.gp-table-wide-label .profile-label {
    width: 20rem;
    vertical-align: top;
    padding-top: 1rem;
}
.gp-table-wide-label td:last-child {
    text-align: left;
    white-space: normal;
    vertical-align: middle;
}

.gp-field-desc {
    font-size: 0.719rem;
    margin-top: 0.25rem;
    max-width: 22rem;
}

.meta-field-value { margin-right: 0.5rem; }

.meta-field-error {
    font-size: 0.75rem;
    color: var(--bad);
    margin-left: 0.5rem;
}

.meta-field-status {
    font-size: 0.75rem;
    color: var(--ink-3);
    margin-left: 0.75rem;
}

.meta-desc-textarea {
    width: 100%;
    min-height: 4rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 0.25rem;
    color: var(--ink);
    font-size: 0.813rem;
    padding: 0.375rem 0.5rem;
    resize: vertical;
}

.meta-desc-counter {
    font-size: 0.688rem;
    color: var(--ink-3);
    display: block;
    text-align: right;
    margin-top: 0.125rem;
}

.gp-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    margin: 1.5rem 0 0.75rem;
}

.site-logo-upload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

.site-logo-card {
    padding: 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.site-logo-card-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ink);
}

.site-logo-card-desc {
    font-size: 0.75rem;
    margin: 0;
}

.site-logo-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--line);
    border-radius: 0.25rem;
    padding: 1.25rem 1.5rem;
    background: var(--bg-2);
    cursor: default;
    transition: border-color 0.15s, background 0.15s;
}

.site-logo-dropzone.dragover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.site-logo-dropzone-text {
    font-size: 0.813rem;
    color: var(--accent);
    pointer-events: none;
}

.site-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--line);
    border-radius: 0.5rem;
    width: 7.5rem;
    height: 5rem;
    background: var(--bg);
    flex-shrink: 0;
}

.site-logo-placeholder-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.813rem;
    color: var(--ink-3);
    pointer-events: none;
    letter-spacing: 0.05rem;
}

.site-logo-preview-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-logo-preview {
    max-height: 3.5rem;
    max-width: 8rem;
    width: auto;
    border-radius: 0.25rem;
    border: 1px solid var(--line);
}

.site-logo-error {
    font-size: 0.75rem;
    color: var(--bad);
    min-height: 1rem;
    margin: 0;
}

.site-logo-browser-toggle {
    align-self: flex-start;
}

.site-logo-browser-panel {
    display: none;
    border-top: 1px solid var(--line-soft);
    padding-top: 0.625rem;
}

.site-logo-browser-panel.site-logo-browser-visible {
    display: block;
}

.site-logo-browser-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.site-logo-browser-empty {
    font-size: 0.75rem;
    color: var(--ink-3);
}

.site-logo-thumb {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem;
    border: 1px solid var(--line-soft);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: border-color 0.12s;
    width: 5rem;
}

.site-logo-thumb:hover { border-color: var(--accent); }

.site-logo-thumb.incompatible {
    opacity: 0.4;
    cursor: default;
}
.site-logo-thumb.incompatible:hover { border-color: var(--line-soft); }

.site-logo-thumb img {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
}

.site-logo-thumb-name {
    font-size: 0.563rem;
    color: var(--ink-3);
    word-break: break-all;
    text-align: center;
    max-width: 4.25rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.site-logo-thumb-delete {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    width: 1rem;
    height: 1rem;
    padding: 0;
    font-size: 0.625rem;
    line-height: 1;
    background: var(--bg-3);
    border: 1px solid var(--line-soft);
    border-radius: 0.125rem;
    cursor: pointer;
    color: var(--ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.12s;
}

.site-logo-thumb:hover .site-logo-thumb-delete { opacity: 1; }

.trials-team-group { margin-bottom: 2rem; }
.trials-team-heading { font-size: 1.125rem; margin-bottom: 0.5rem; }
.trials-empty { padding: 0.5rem 0; }
.trials-actions { white-space: nowrap; }
/*.trials-row-expired { background: rgba(255,107,107,0.06); }*/
/*.trials-row-expired { background: rgba(255,107,107,0.09); box-shadow: inset 0 0 0 1px rgba(255,107,107,0.28); }*/
/*.trials-row-expired td { background: rgba(255,107,107,0.08); box-shadow: inset 0 0 10px rgba(255,107,107,0.22); }*/
/*.data-row-attention { background: rgba(255,107,107,0.06); }*/
.data-row-attention td { background: rgba(255,107,107,0.06); }
.data-cell-attention { background: rgba(255,107,107,0.06); }
.trials-expires-expired { color: #ff6b6b; font-weight: 600; }
.rank-time-limit-label { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; cursor: pointer; }

.att-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: start; }
.att-body .worker-kv-table { border-top: none; border-bottom: none; }
.att-rate-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.att-big-pct { font-size: 2.5rem; font-weight: 700; line-height: 1; }
.att-big-pct.att-above { color: var(--ok); }
.att-big-pct.att-ok { color: var(--warn); }
.att-big-pct.att-below { color: var(--bad); }
.att-big-pct.att-none { color: var(--ink-3); }
.att-formula-count { font-size: 0.75rem; color: var(--ink-3); }

body.layout-full-width main { max-width: none; overflow-x: auto; }
body.layout-full-width header { display: none; }
body.layout-full-width footer { display: none; }
body.layout-full-width .roster-layout { min-width: max-content; }
body.layout-full-width .roster-table-area { min-width: max-content; }
body.layout-full-width .roster-nav-col-left,
body.layout-full-width .roster-nav-col-right,
body.layout-full-width .roster-filler-cell { display: none; }
.roster-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; }
.roster-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.roster-toolbar-right-col { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-end; }
.roster-toolbar-subhead { display: flex; align-items: center; gap: 0.5rem; }
.roster-toolbar-right { display: flex; align-items: center; gap: 0.5rem; }
.roster-fill-status { font-size: 0.75rem; color: var(--ink-3); }
.roster-fill-status-ok { color: var(--ok); }
.roster-fill-status-error { color: var(--bad); }
/* .roster-toggle-btn { display: inline-flex; ...; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; color: var(--ink-3); transition: ...; } — .btn */
/* .roster-toggle-btn:hover:not(:disabled) { ... } — .btn:hover */
/* .roster-toggle-btn.btn-active { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--accent); } — .btn-active */
/* .roster-toggle-btn:disabled { opacity: 0.35; cursor: not-allowed; } — .btn:disabled */

.roster-gow-group { display: inline-flex; align-items: stretch; transition: box-shadow 0.2s; border-radius: var(--r-sm); }

/* .roster-col-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; flex-shrink: 0; } */
.roster-col-toggle { flex-shrink: 0; }
.roster-datepicker { }
.roster-schedule-select { min-width: 9rem; }
#rosterFillBtn:disabled { box-shadow: none; }
/* .roster-col-btn { background: none; border: none; border-right: 1px solid var(--line); padding: 0.25rem 0.375rem; cursor: pointer; color: var(--ink-3); display: flex; align-items: center; border-radius: 0; } */
/* .roster-col-btn { padding: 0.25rem 0.375rem; } — .btn-group-icon .btn */
.roster-col-btn { color: var(--ink-3); }
/* .roster-col-btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); } — .btn-group */
/* .roster-col-btn:last-child { border-right: none; border-radius: 0 var(--r-sm) var(--r-sm) 0; } — .btn-group */
/* .roster-col-btn:hover { background: var(--bg-3); color: var(--ink); } — .btn:hover */
/* .roster-col-btn.btn-active { ... } — .btn-group-icon .btn.btn-active */
/* .roster-col-icon { ... width: 1.5rem; height: 1.5rem; ... } — reduced below */
.roster-col-icon { display: block; width: 1.125rem; height: 1.125rem; background-color: currentColor; mask-image: var(--col-layout-icon); mask-size: 100% 100%; -webkit-mask-image: var(--col-layout-icon); -webkit-mask-size: 100% 100%; }
.roster-width-toggle { display: inline-flex; align-items: center; gap: 0.375rem; }
.roster-width-icon {
    display: block;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    mask-image: var(--col-icon, url('/img/expand.svg'));
    mask-size: 100% 100%;
    -webkit-mask-image: var(--col-icon, url('/img/expand.svg'));
    -webkit-mask-size: 100% 100%;
}
.roster-settings-panel { margin-bottom: 0.75rem; padding: 0 0 0.625rem; }
.roster-break-col-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
/* .roster-break-col-item { display: inline-flex; align-items: center; } — stretch so mixed icon/text buttons match height */
.roster-break-col-item { display: inline-flex; align-items: stretch; }
/* .roster-break-col-view { display: inline-flex; align-items: center; } — stretch */
.roster-break-col-view { display: inline-flex; align-items: stretch; }
/* .roster-break-col-edit { display: inline-flex; align-items: center; } — stretch */
.roster-break-col-edit { display: inline-flex; align-items: stretch; }

.roster-break-col-view .roster-break-delete-btn { border-radius: var(--r-sm) 0 0 var(--r-sm); border-right: none; }

.roster-break-col-view .roster-boss-toggle { border-radius: 0; border-right: none; cursor: default; pointer-events: none; }

.roster-break-col-view .roster-break-rename-btn { border-radius: 0; border-right: none; }

.roster-break-col-view .roster-break-visibility-btn { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* .roster-break-delete-btn, .roster-boss-delete-btn, .roster-break-rename-btn, .roster-break-tick-btn, .roster-break-cancel-btn { display: inline-flex; align-items: center; background: var(--bg-3); border: 1px solid var(--line); border-radius: 0; padding: 0.313rem 0.375rem; cursor: pointer; transition: color 0.15s, background 0.1s; } — .btn.btn-sm */
.roster-break-delete-btn,
.roster-boss-delete-btn,
.roster-break-rename-btn,
.roster-break-tick-btn,
.roster-break-cancel-btn { color: var(--ink-4); }
/* .roster-break-visibility-btn { ... } — .btn.btn-sm */
.roster-break-tick-btn { border-radius: 0; border-right: none; }

.roster-break-col-edit .roster-break-cancel-btn { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.roster-break-delete-btn:hover,
.roster-boss-delete-btn:hover { color: var(--bad); }
.roster-break-rename-btn:hover { color: var(--ink-2); }
.roster-break-tick-btn:hover { color: var(--ok); }
.roster-break-cancel-btn:hover { color: var(--bad); }

/* .roster-break-visibility-btn, .roster-boss-visibility-btn { padding: 0.188rem 0.25rem; } — .btn-sm */
.roster-break-visibility-btn,
.roster-boss-visibility-btn { color: var(--ink-2); }
.roster-break-visibility-btn.is-col-hidden,
.roster-boss-visibility-btn.is-col-hidden {
    --acc: var(--accent);
    --acc-bright: color-mix(in oklab, var(--accent) 65%, #fff);
    background:
        radial-gradient(120% 140% at 50% -30%, color-mix(in oklab, var(--acc) 30%, transparent), transparent 60%),
        var(--bg);
    border-color: color-mix(in oklab, var(--acc-bright) 30%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in oklab, var(--acc-bright) 55%, transparent),
        inset 0 1px 0 color-mix(in oklab, #fff 35%, transparent),
        0 3px 14px -8px color-mix(in oklab, var(--acc) 55%, transparent);
}
/* .roster-break-visibility-btn:hover, .roster-boss-visibility-btn:hover { background: var(--bg-2); } — .btn:hover */

.roster-break-visibility-icon {
    display: block;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    mask-image: url('/img/visible.svg');
    mask-size: 100% 100%;
    -webkit-mask-image: url('/img/visible.svg');
    -webkit-mask-size: 100% 100%;
}
.roster-break-visibility-btn.is-col-hidden .roster-break-visibility-icon {
    mask-image: url('/img/invisible.svg');
    -webkit-mask-image: url('/img/invisible.svg');
}

input.roster-break-name-input {
    font-size: 0.75rem;
    padding: 0.188rem 0.625rem;
    width: 5rem;
    border-radius: var(--r-sm) 0 0 var(--r-sm);
    border: 1px solid var(--line);
    border-right: none;
    background: var(--bg-2);
    color: var(--ink);
    line-height: 1.3;
}

input.roster-break-name-input:focus {
    outline: none;
    border-color: var(--accent);
    border-right: 1px solid var(--accent);
    margin-right: -1px;
    position: relative;
    z-index: 1;
}

.roster-break-delete-icon,
.roster-break-rename-icon,
.roster-break-tick-icon,
.roster-break-cancel-icon {
    display: block;
    /* width: 0.75rem; height: 0.75rem; — raised to match btn-sm line-height content height */
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}
.roster-break-delete-icon { mask-image: url('/img/trash.svg'); -webkit-mask-image: url('/img/trash.svg'); }
.roster-break-rename-icon { mask-image: url('/img/rename.svg'); -webkit-mask-image: url('/img/rename.svg'); }
.roster-break-tick-icon { mask-image: url('/img/tick.svg'); -webkit-mask-image: url('/img/tick.svg'); }
.roster-break-cancel-icon { mask-image: url('/img/cancel.svg'); -webkit-mask-image: url('/img/cancel.svg'); }
#rosterBreakSettings, #rosterBossSettings { margin-top: 0.5rem; margin-left: 0.75rem; }
.roster-settings-row { display: flex; align-items: center; gap: 0.75rem; }
.roster-settings-label { font-size: 0.813rem; color: var(--ink-2); }
.roster-boss-group-title { font-size: 0.656rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.038rem; color: var(--ink-3); margin-bottom: 0.375rem; }
.roster-boss-group-title + .roster-boss-group-title,
.roster-boss-buttons + .roster-boss-group-title { margin-top: 0.625rem; }
.roster-boss-buttons { display: flex; flex-wrap: wrap; gap: 0.375rem; }

/* .roster-boss-toggle { padding: 0.25em 0.625em; font-size: 0.75rem; background: var(--bg-3); color: var(--ink-3); box-shadow: none; transition: ...; } — .btn.btn-sm */
/* .roster-boss-col-item { display: inline-flex; align-items: center; } — stretch so icon buttons match text button height */
.roster-boss-col-item { display: inline-flex; align-items: stretch; }
.roster-boss-col-item .roster-boss-visibility-btn { display: none; }
.roster-boss-col-item.has-visibility .roster-boss-toggle { border-radius: var(--r-sm) 0 0 var(--r-sm); border-right: none; }
.roster-boss-col-item.has-visibility .roster-boss-visibility-btn { display: inline-flex; border-left: none; border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* .is-roster-loaded .roster-boss-delete-btn { border-radius: var(--r-sm) 0 0 var(--r-sm); border-right: none; } — border restored in neon group below */
.is-roster-loaded .roster-boss-delete-btn { border-radius: var(--r-sm) 0 0 var(--r-sm); }

/* .is-roster-loaded.has-visibility .roster-boss-toggle { border-radius: 0; background: var(--accent); border-color: var(--accent); color: #fff; } — btn-accent neon below */
.is-roster-loaded.has-visibility .roster-boss-toggle { border-radius: 0; }
.is-roster-loaded.has-visibility .roster-boss-delete-btn,
.is-roster-loaded.has-visibility .roster-boss-toggle,
.is-roster-loaded.has-visibility .roster-boss-visibility-btn { border-style: solid; border-width: 1px; }
.is-roster-loaded.has-visibility .roster-boss-delete-btn,
.is-roster-loaded.has-visibility .roster-boss-toggle,
.is-roster-loaded.has-visibility .roster-boss-visibility-btn {
    --acc: var(--accent);
    --acc-bright: color-mix(in oklab, var(--accent) 65%, #fff);
    background: color-mix(in oklab, var(--acc) 6%, transparent);
    border-color: var(--acc-bright);
    color: var(--acc-bright);
    box-shadow:
        0 0 0 1px color-mix(in oklab, var(--acc) 10%, transparent),
        0 0 14px 1px color-mix(in oklab, var(--acc) 50%, transparent),
        inset 0 0 12px -6px color-mix(in oklab, var(--acc-bright) 70%, transparent);
    text-shadow: 0 0 10px color-mix(in oklab, var(--acc-bright) 70%, transparent);
}
/* .is-roster-loaded .roster-boss-visibility-btn.is-col-hidden .roster-break-visibility-icon { background-color: #fff; } — dimmed */
.is-roster-loaded .roster-boss-visibility-btn.is-col-hidden .roster-break-visibility-icon { background-color: rgba(255, 255, 255, 0.55); }
.is-roster-loaded .roster-boss-toggle { cursor: default; pointer-events: none; }

.roster-boss-toggle.btn-active {
    --acc: var(--accent);
    --acc-bright: color-mix(in oklab, var(--accent) 65%, #fff);
    background: color-mix(in oklab, var(--acc) 6%, transparent);
    border-color: var(--acc-bright);
    color: var(--acc-bright);
    box-shadow:
        0 0 0 1px color-mix(in oklab, var(--acc) 10%, transparent),
        0 0 14px 1px color-mix(in oklab, var(--acc) 50%, transparent),
        inset 0 0 12px -6px color-mix(in oklab, var(--acc-bright) 70%, transparent);
    text-shadow: 0 0 10px color-mix(in oklab, var(--acc-bright) 70%, transparent);
}
/* .roster-boss-toggle:hover:not(.btn-active) { color: var(--ink); border-color: var(--line); } — .btn:hover */
.roster-layout { display: flex; align-items: flex-start; gap: 0.75rem; }
.roster-sidebar {
    position: sticky;
    left: 0;
    flex-shrink: 0;
    width: 13rem;
    z-index: 10;
    overflow: hidden;
    transition: width 0.2s ease;
    align-self: stretch;
}
.roster-sidebar.is-collapsed { width: 2.25rem; }
.roster-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.375rem;
    padding: 0.625rem 0.875rem 0.375rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.roster-sidebar-title {
    font-size: 0.656rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.044rem;
    color: var(--ink-3);
    overflow: hidden;
    transition: opacity 0.15s;
}
.roster-sidebar.is-collapsed .roster-sidebar-title { opacity: 0; max-width: 0; overflow: hidden; }
.roster-sidebar.is-collapsed .roster-sidebar-header { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
/* .roster-sidebar-toggle { background: none; border: none; cursor: pointer; padding: 0 0.188rem; line-height: 1; } — .btn.btn-icon */
/* .roster-sidebar-toggle { font-size: 1.25rem; flex-shrink: 0; } */
.roster-sidebar-toggle { font-size: 0.75rem; padding: 0.25rem 0.375rem; flex-shrink: 0; color: var(--ink-4); }
.roster-sidebar-toggle:hover { color: var(--ink); }
.roster-sidebar-body { overflow: hidden; }
.roster-sidebar.is-collapsed .roster-sidebar-body { display: none; }
.roster-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.438rem 0.875rem 0.438rem 1.625rem;
    border-bottom: 1px solid var(--line-soft);
    border-left: 2px solid transparent;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: background 0.12s;
}
.roster-list-item:last-child { border-bottom: none; }
.roster-list-item:hover { background: rgba(255,255,255,0.02); color: var(--ink); }
.roster-list-item.btn-active {
    color: var(--ink);
    border-left-color: #dce6ff;
    background: linear-gradient(to right, rgba(220,230,255,0.1), rgba(220,230,255,0));
    box-shadow: inset 0 1px 0 rgba(170,200,255,0.22),
                inset -0.063rem 0 0 rgba(170,200,255,0.22),
                inset 0 -0.063rem 0 rgba(170,200,255,0.22);
}
.roster-list-info { display: flex; flex-direction: column; gap: 0.063rem; min-width: 0; flex: 1; }
.roster-list-item-sub { font-size: 0.75rem; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster-list-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.roster-publish-icon { display: inline-block; width: 0.875rem; height: 0.875rem; background-color: currentColor; mask-image: url('/img/publish.svg'); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url('/img/publish.svg'); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; }
.roster-publish-btn[data-published="1"] .roster-publish-icon { background-color: var(--ok); }
.roster-trash-icon { display: inline-block; width: 0.875rem; height: 0.875rem; background-color: currentColor; mask-image: url('/img/trash.svg'); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url('/img/trash.svg'); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; }

/* .roster-publish-btn, .roster-delete-btn { padding: ...; border: none; background: none; box-shadow: none; } — .btn.btn-icon */
.roster-delete-btn { color: var(--ink-4); }
.roster-delete-btn:hover { color: var(--bad); }
.roster-list-date { font-size: 0.781rem; color: var(--ink-2); white-space: nowrap; }
.roster-list-time { font-size: 0.656rem; color: var(--ink-3); white-space: nowrap; }
.roster-published-badge { font-size: 0.656rem; color: var(--ok); font-weight: 600; white-space: nowrap; }
.roster-table-area { flex: 1; min-width: 0; padding-top: 0.5rem; }
body:not(.layout-full-width) .roster-table-area { overflow-x: hidden; }
body:not(.layout-full-width) .roster-table-wrap { overflow-x: hidden; }
.roster-table-wrap { }
.roster-table { width: max-content; border-collapse: separate; border-spacing: 0; margin-bottom: 0; }
.roster-table thead th { background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%); }
.roster-table tbody td { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.roster-table thead th:last-child { text-align: center; }
.roster-table td:last-child { text-align: center; white-space: normal; }
.roster-player-th {
    position: sticky;
    left: 0;
    z-index: 10;
    min-width: 11rem;
    padding: 0.375rem 0.75rem;
    text-align: left;
    white-space: nowrap;
    background: var(--bg-2);
    box-shadow: 2px 0 6px rgba(0,0,0,0.18);
}
/* .roster-nav-btn { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; line-height: 1; padding: ...; flex-shrink: 0; box-shadow: ...; } — .btn.btn-ghost */
/* .roster-nav-btn { font-size: 1.125rem; color: var(--ink-3); flex-shrink: 0; } — fixed size to match btn-sm height in toolbar */
.roster-nav-btn { font-size: 1.125rem; color: var(--ink-3); flex-shrink: 0; width: 1.75rem; height: 1.75rem; padding: 0; }
/* .roster-nav-btn:hover:not(:disabled) { color: var(--ink); background: var(--bg-3); } — .btn:hover */
.roster-nav-btn:disabled { opacity: 0.25; }
.roster-nav-col-left {
    position: sticky;
    left: 0;
    z-index: 10;
    width: 2.25rem;
    min-width: 2.25rem;
    max-width: 2.25rem;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    background: var(--bg-2);
    box-shadow: 2px 0 4px rgba(0,0,0,0.15);
}
.roster-nav-col-left .roster-nav-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    height: 100%;
}
.roster-nav-col-left .roster-nav-btn:hover:not(:disabled) {
    background: transparent;
    box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line);
}
.data-table tbody tr:hover .roster-nav-col-left {
    background-color: var(--bg-2);
    background-image: linear-gradient(rgba(43,95,196,0.06), rgba(43,95,196,0.06));
}
.roster-nav-col-right {
    position: sticky;
    right: 0;
    z-index: 10;
    width: 2.25rem;
    min-width: 2.25rem;
    max-width: 2.25rem;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    background: var(--bg-2);
    box-shadow: -2px 0 4px rgba(0,0,0,0.15);
}
.roster-nav-col-right .roster-nav-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    height: 100%;
}
.roster-nav-col-right .roster-nav-btn:hover:not(:disabled) {
    background: transparent;
    box-shadow: inset 1px 0 0 var(--line);
}
.data-table tbody tr:hover .roster-nav-col-right {
    background-color: var(--bg-2);
    background-image: linear-gradient(rgba(43,95,196,0.06), rgba(43,95,196,0.06));
}

/* .roster-stats-toggle-btn { background: none; border: none; cursor: pointer; padding: 0.125rem; line-height: 0; } — .btn.btn-sm */
.roster-stats-toggle-btn { flex-shrink: 0; }
.roster-stats-icon { display: inline-block; width: 1rem; height: 1rem; background-color: var(--ink-3); -webkit-mask-image: url('/img/statistics.svg'); mask-image: url('/img/statistics.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.roster-stats-toggle-btn:hover .roster-stats-icon { background-color: var(--ink); }
.roster-table thead tr:not(.roster-stats-row) .roster-player-th { padding-left: 2rem; }
thead.roster-stats-collapsed tr.roster-stats-row,
thead.roster-stats-collapsed tr.roster-stats-group-label-row { display: none; }
.roster-table tr.roster-stats-row th { padding: 0.063rem 0.5rem; background: var(--bg-2); border-bottom: 1px solid var(--line-soft); text-transform: none; text-align: right; }
.roster-table tr.roster-stats-group-label-row th { background: var(--bg-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-soft); padding: 0.188rem 0.5rem; }
.roster-stats-group-heading { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05rem; color: var(--ink-3); text-align: left; }
.roster-stats-label { text-align: right; font-size: 0.75rem; color: var(--ok); }
.roster-table tr.roster-stats-row th.roster-stat-th { text-align: center; font-size: 0.813rem; font-weight: 600; color: var(--ok); padding-right: 0.5rem; }

.roster-table tr.roster-stats-row th.roster-stat-zero { background: rgba(255, 107, 107, 0.06); color: #ff6b6b; }
.roster-enc-th { width: 7.5rem; min-width: 7.5rem; max-width: 7.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; padding: 0.375rem 0.5rem; font-size: 0.75rem; font-weight: 500; }
.roster-enc-th[draggable="true"] { cursor: grab; user-select: none; }
.roster-enc-th.roster-col-dragging { opacity: 0.35; }
.roster-enc-th.roster-col-drag-over { background: rgba(43,95,196,0.12); outline: 2px solid var(--accent); outline-offset: -2px; }
.roster-player-td {
    position: sticky;
    left: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    padding: 0.313rem 0.75rem;
    background: var(--bg-2);
    box-shadow: 2px 0 6px rgba(0,0,0,0.18);
}
.data-table tbody tr:hover .roster-player-td {
    background-color: var(--bg-2);
    background-image: linear-gradient(rgba(43,95,196,0.06), rgba(43,95,196,0.06));
}

.roster-boss-td { width: 7.5rem; min-width: 7.5rem; max-width: 7.5rem; padding-left: 0.25rem; padding-right: 0.25rem; vertical-align: middle; }
.roster-boss-cell { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.roster-status-select { display: none; }
.roster-status-picker { order: 1; display: flex; align-items: center; }
.roster-status-btn { background: none; border: none; padding: 0.125rem 0.313rem; font-size: 0.75rem; font-family: inherit; line-height: 1.3; cursor: pointer; border-radius: var(--r-sm); transition: background 0.1s; white-space: nowrap; color: var(--ink-2); }
.roster-status-btn:hover { background: var(--bg-3); }
.roster-status-btn[data-value="1"] { color: var(--ok); }
.roster-status-btn[data-value="2"] { color: #f87171; }
.roster-status-btn[data-value="3"] { color: #f59e0b; }
.roster-status-btn[data-value="4"] { color: #7aaeff; }
.roster-status-dropdown { position: fixed; z-index: 201; display: none; flex-direction: column; overflow: hidden; min-width: 5.5rem; background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-card); }
.roster-status-dropdown.is-open { display: flex; }
.roster-status-option { background: none; border: none; padding: 0.313rem 0.75rem; font-size: 0.813rem; font-family: inherit; cursor: pointer; text-align: left; transition: background 0.1s; }
.roster-status-option:hover { background: var(--bg-3); }
.roster-status-option[data-value="1"] { color: var(--ok); }
.roster-status-option[data-value="2"] { color: #f87171; }
.roster-status-option[data-value="3"] { color: #f59e0b; }
.roster-status-option[data-value="4"] { color: #7aaeff; }
.roster-cell-role-btn { order: 2; flex-shrink: 0; background: none; border: none; padding: 0.125rem; cursor: pointer; border-radius: var(--r-sm); display: flex; align-items: center; opacity: 0.6; transition: opacity 0.1s, background 0.1s; }
.roster-boss-td[data-status="2"] .roster-cell-role-btn,
.roster-boss-td[data-status="3"] .roster-cell-role-btn { display: none; }
.roster-cell-role-btn:hover { opacity: 1; background: var(--bg-3); }
.roster-cell-role-btn .role-icon { width: 1rem; height: 1rem; }
.roster-cell-role-btn .role-icon-svg { width: 1rem; height: 1rem; }
/* .roster-announcement-toggle:disabled { opacity: 0.4; pointer-events: none; } — .btn:disabled */
/* .roster-announcement-toggle.btn-active { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--accent); } — .btn-active */
.roster-announcement-panel { margin-bottom: 0.75rem; }
.roster-announcement-toolbar { display: flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.625rem; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
/* .roster-editor-btn { background: none; border: 1px solid transparent; border-radius: ...; padding: ...; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: ...; } — .btn.btn-sm */
.roster-editor-btn { font-size: 0.813rem; color: var(--ink-2); min-width: 1.75rem; line-height: 1.3; }
/* .roster-editor-btn:hover { background: var(--bg-3); color: var(--ink); border-color: var(--line); } — .btn:hover */
.roster-editor-separator { width: 1px; background: var(--line); margin: 0 0.25rem; align-self: stretch; }
.roster-save-indicator { width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-left: auto; flex-shrink: 0; align-self: center; display: none; transition: background 0.2s; }
.roster-save-indicator.is-saved { display: block; background: var(--ok); }
.roster-save-indicator.is-dirty { display: block; background: #f87171; }
.roster-announcement-editor { min-height: 6rem; padding: 0.625rem 0.75rem; outline: none; font-size: 0.813rem; color: var(--ink); line-height: 1.6; }
.roster-announcement-editor h2 { font-size: 1.063rem; font-weight: 600; margin: 0.375rem 0 0.188rem; }
.roster-announcement-editor h3 { font-size: 0.938rem; font-weight: 600; margin: 0.25rem 0 0.125rem; }
.roster-announcement-editor ul, .roster-announcement-editor ol { padding-left: 1.5rem; margin: 0.25rem 0; }
.roster-announcement-editor li { margin: 0.125rem 0; }
.roster-announcement-save-row { display: flex; justify-content: flex-end; padding: 0.5rem 0.75rem; border-top: 1px solid var(--line-soft); }
.roster-role-picker { position: fixed; z-index: 200; display: flex; gap: 0.25rem; padding: 0.375rem; background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-card); }
.roster-role-picker-option { background: none; border: none; padding: 0.25rem; cursor: pointer; border-radius: var(--r-sm); display: flex; align-items: center; opacity: 0.55; transition: opacity 0.1s, background 0.1s; }
.roster-role-picker-option:hover { opacity: 1; background: var(--bg-3); }
.roster-role-picker-option.is-selected { opacity: 1; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--accent); }
.roster-role-picker-option .role-icon { width: 1.375rem; height: 1.375rem; }
.roster-role-picker-option .role-icon-svg { width: 1.375rem; height: 1.375rem; }
.roster-filler-cell { padding: 0; border: none; }
.roster-col-placeholder { width: 7.5rem; min-width: 7.5rem; max-width: 7.5rem; padding: 0; border: none; }

/* .worker-status-chevron transition: transform removed — chevron now uses textContent toggle: ⮞/⮟ */
.worker-status-chevron { display: inline-block; font-size: 0.75rem; color: var(--ink-4); line-height: 1; }
.chevron-cell { width: 1%; white-space: nowrap; }
.worker-status-detail-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.75rem; margin-bottom: 0.75rem; }
.worker-status-detail-grid > .gp-section-card { grid-column: span 4; }
.worker-kv-table { border-collapse: collapse; font-size: 0.813rem; width: 100%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 0.5rem; }
.worker-kv-table td { padding: 0.125rem 0; vertical-align: middle; }
.worker-kv-table td:first-child { padding-left: 0.625rem; padding-right: 0.75rem; }
.worker-kv-table td:last-child { padding-right: 0.625rem; text-align: left; white-space: normal; }

/* Shared utility — visually suppressed / inactive state */
.is-dimmed { opacity: 0.45; }

/* Team Events */
.te-add-icon { display: inline-block; width: 0.875rem; height: 0.875rem; background-color: currentColor; mask: url('/img/add.svg') no-repeat center / contain; -webkit-mask: url('/img/add.svg') no-repeat center / contain; }
.te-delete-icon { display: inline-block; width: 0.875rem; height: 0.875rem; background-color: currentColor; mask: url('/img/trash.svg') no-repeat center / contain; -webkit-mask: url('/img/trash.svg') no-repeat center / contain; }
.te-complete-icon { display: inline-block; width: 0.875rem; height: 0.875rem; background-color: currentColor; mask: url('/img/tick.svg') no-repeat center / contain; -webkit-mask: url('/img/tick.svg') no-repeat center / contain; }
.te-unlinked-body { padding: 0.75rem 1rem; }
/*.te-link-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }*/
/*.te-link-row select { flex: 1; min-width: 0; }*/

/* Air Datepicker — highlighted date dot indicator */
.air-datepicker-cell.gp-dp-highlight { position: relative; }
.air-datepicker-cell.gp-dp-highlight::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent); pointer-events: none; }
.worker-kv-table .worker-kv-label { color: #7aaeff; font-size: 0.688rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.038rem; white-space: nowrap; width: 1%; }
.data-table .worker-kv-table { border-top: none; border-bottom: none; }
.data-table .worker-kv-table tbody tr { border-top: none; background: transparent; transition: none; }
.data-table .worker-kv-table tbody tr:hover { background-image: none; }