@import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');

@font-face {
    font-family: 'Zero Prime';
    src: local('Zero Prime'), local('ZeroPrime'),
         url('../fonts/zero-prime.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-display: "Zero Prime", "Electrolize", "Segoe UI", sans-serif;
    --font-tech: "Electrolize", "Segoe UI", "Arial Narrow", Arial, sans-serif;
    --font-ui: "Electrolize", "Segoe UI", "Arial Narrow", Arial, sans-serif;
    --bg: #020405;
    --panel: rgba(6, 10, 12, 0.94);
    --line: rgba(225, 0, 0, 0.72);
    --line-soft: rgba(225, 0, 0, 0.25);
    --cyan: #21eaff;
    --cyan-soft: rgba(33, 234, 255, 0.18);
    --red: #e00000;
    --green: #77ff46;
    --text: #f1f4f6;
    --muted: #8d979e;
    --grid: rgba(33, 234, 255, 0.085);
    --cell-border: rgba(172, 193, 202, 0.18);
    --row-a-col-a: rgba(10, 14, 16, .96);
    --row-a-col-b: rgba(15, 19, 22, .96);
    --row-b-col-a: rgba(18, 22, 25, .96);
    --row-b-col-b: rgba(23, 27, 30, .96);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(circle at 76% 0%, rgba(152, 0, 0, .22), transparent 34rem),
        radial-gradient(circle at 20% 100%, rgba(33, 234, 255, .055), transparent 30rem),
        var(--bg);
    font-family: "Electrolize", "Segoe UI", "Arial Narrow", Arial, sans-serif;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,.22) 1px, transparent 1px);
    background-size: 92px 92px, 92px 92px, 180px 180px;
    opacity: .85;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.35));
}

.app-shell {
    position: relative;
    width: min(1920px, calc(100vw - 42px));
    margin: 0 auto;
    padding: 8px 0 22px;
}

.site-header {
    min-height: 176px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "brand status"
        "nav status";
    gap: 14px 28px;
    padding: 22px 34px 16px;
    border-bottom: 3px solid var(--red);
    background:
        linear-gradient(120deg, rgba(14, 20, 24, .94), rgba(3, 5, 7, .70)),
        radial-gradient(circle at 70% 42%, rgba(33, 234, 255, .10), transparent 20rem),
        linear-gradient(90deg, rgba(255,255,255,.055), transparent 42%);
    clip-path: polygon(0 0, 100% 0, 100% 78%, 73% 78%, 70% 100%, 0 100%);
    box-shadow: 0 18px 60px rgba(0,0,0,.42);
}

.brand {
    grid-area: brand;
    display: flex;
    align-items: center;
    gap: 20px;
}

.crest-img {
    width: 116px;
    height: 116px;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(255, 202, 96, .24)) drop-shadow(0 0 12px rgba(224, 0, 0, .35));
}

.brand-title {
    font-family: "Zero Prime", "Electrolize", "Segoe UI", sans-serif;
    font-size: clamp(34px, 3.8vw, 62px);
    line-height: .94;
    font-weight: 950;
    letter-spacing: .105em;
    text-transform: uppercase;
    color: #fafafa;
    text-shadow: 0 2px 0 #777, 0 0 18px rgba(255,255,255,.42);
}

.brand-subtitle {
    font-family: "Zero Prime", "Electrolize", "Segoe UI", sans-serif;
    margin-top: 10px;
    color: #d5d9dc;
    font-size: clamp(13px, 1.35vw, 22px);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.nav-tabs {
    grid-area: nav;
    display: flex;
    align-items: end;
    gap: 16px;
    padding-left: 136px;
    overflow-x: auto;
}

.nav-tabs span,
.nav-tabs a {
    min-width: 130px;
    padding: 15px 16px;
    color: #aeb5bb;
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.20));
    border-bottom: 2px solid rgba(255,255,255,.14);
    clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
    text-align: center;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .095em;
}

.nav-tabs span.active,
.nav-tabs a.active {
    color: #fff;
    border-bottom-color: var(--red);
    box-shadow: inset 0 -3px 0 var(--red), 0 0 18px rgba(224,0,0,.40);
}

.status-panels {
    grid-area: status;
    display: grid;
    grid-template-columns: 240px 220px;
    gap: 16px;
    align-content: start;
    padding-top: 12px;
}

.field {
    display: grid;
    gap: 8px;
    padding: 13px 14px;
    background: rgba(2, 5, 7, .72);
    border: 1px solid var(--line-soft);
    clip-path: polygon(0 0, 93% 0, 100% 23%, 100% 100%, 7% 100%, 0 77%);
}

.field span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

input, select, button { font: inherit; }

input, select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    color: var(--text);
    background: rgba(0,0,0,.62);
    border: 1px solid rgba(255,255,255,.18);
    outline: none;
}

/* Keep Chromium/WebView and Windows native select popups inside the VCG palette. */
html body select,
html body select option,
html body select optgroup {
    color-scheme: dark !important;
    color: #e7ecef !important;
    background-color: #05090b !important;
}

html body select optgroup {
    color: #d85a62 !important;
    font-weight: 800;
}

html body select option:checked {
    color: #e7ecef !important;
    background-color: #05090b !important;
}

html body select:disabled,
html body select option:disabled {
    color: #717b82 !important;
    background-color: #090c0e !important;
}

input:focus, select:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 2px var(--cyan-soft);
}

button {
    min-height: 38px;
    padding: 9px 14px;
    color: #fff;
    background: rgba(0,0,0,.62);
    border: 1px solid var(--line);
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    cursor: pointer;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

button:hover {
    color: var(--cyan);
    border-color: var(--cyan);
    box-shadow: 0 0 16px var(--cyan-soft);
}

.subbar {
    display: grid;
    grid-template-columns: minmax(260px, 390px) 1fr auto;
    gap: 14px;
    align-items: stretch;
    margin: 16px 0 14px;
}

.mode-field { padding: 10px 14px; }

.hint, .active-role {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    color: var(--muted);
    background: rgba(4,8,10,.72);
    border: 1px solid rgba(255,255,255,.08);
}

.active-role {
    min-width: 150px;
    justify-content: center;
    color: var(--cyan);
    border-color: var(--line-soft);
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dashboard {
    display: grid;
    grid-template-columns: minmax(1120px, 1fr) minmax(520px, 650px);
    gap: 18px;
    align-items: start;
}

.panel {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), transparent 110px),
        var(--panel);
    border: 1px solid var(--line);
    box-shadow: 0 0 0 1px rgba(255,0,0,.07) inset, 0 20px 60px rgba(0,0,0,.38);
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

.panel-corner {
    position: absolute;
    top: -1px;
    left: 28px;
    right: 76px;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--red), transparent);
    opacity: .78;
}

.panel-title {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 22px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(90deg, rgba(255,255,255,.05), transparent);
}

.panel-title h1,
.panel-title h2 {
    margin: 0;
    font-size: 23px;
    line-height: 1.1;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.panel-title h2 { font-size: 21px; }

.panel-title span {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.table-scroll {
    overflow: auto;
    max-height: calc(100vh - 310px);
    min-height: 620px;
    scrollbar-color: var(--red) rgba(255,255,255,.08);
}

.role-matrix {
    width: 100%;
    min-width: 3180px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
}

.role-matrix th,
.role-matrix td {
    border: 1px solid var(--cell-border);
    vertical-align: top;
}

.role-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 10px 8px;
    color: #dfe8ec;
    background: rgba(8, 13, 15, .98);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .055em;
    text-align: center;
    text-transform: uppercase;
}

.role-matrix thead tr:nth-child(2) th { top: 38px; }

.role-head-cell {
    width: 270px;
    left: 0;
    z-index: 8 !important;
}

.role-cell {
    position: sticky;
    left: 0;
    z-index: 4;
    width: 270px;
    padding: 12px 12px;
    background: rgba(6, 10, 12, .98);
}

.role-matrix tbody tr:nth-child(odd) .task-cell.col-odd { background: var(--row-a-col-a); }
.role-matrix tbody tr:nth-child(odd) .task-cell.col-even { background: var(--row-a-col-b); }
.role-matrix tbody tr:nth-child(even) .task-cell.col-odd { background: var(--row-b-col-a); }
.role-matrix tbody tr:nth-child(even) .task-cell.col-even { background: var(--row-b-col-b); }

.role-matrix tbody tr:nth-child(even) .role-cell { background: rgba(14, 18, 21, .98); }

.role-matrix tbody tr.role-hover .task-cell,
.role-matrix tbody tr.role-selected .task-cell {
    background: rgba(33,234,255,.105) !important;
    box-shadow: inset 0 1px 0 rgba(33,234,255,.18), inset 0 -1px 0 rgba(33,234,255,.18);
}

.role-matrix tbody tr.role-hover .role-cell,
.role-matrix tbody tr.role-selected .role-cell {
    background: rgba(0, 46, 54, .95);
    box-shadow: inset 4px 0 0 var(--cyan);
}

.role-card-mini {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: start;
    gap: 10px;
}

.role-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #a2aab0;
    color: #020304;
    font-weight: 950;
    box-shadow: 0 0 14px rgba(255,255,255,.10);
}

tr.role-hover .role-icon,
tr.role-selected .role-icon {
    background: var(--cyan);
    box-shadow: 0 0 20px rgba(33,234,255,.72);
}

.role-name {
    color: #fff;
    font-size: 15px;
    font-weight: 950;
    line-height: 1.1;
}

.role-note,
.role-order {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.25;
}

.assignment {
    margin-top: 7px;
    color: var(--green);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.assignment.empty { color: #737b81; }

.task-cell {
    width: 244px;
    padding: 8px 8px;
    color: #d2dde2;
    line-height: 1.28;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

.mode-highlight {
    background: rgba(33,234,255,.075) !important;
    box-shadow: inset 0 0 0 1px rgba(33,234,255,.20);
}

.empty-dash {
    display: block;
    color: rgba(255,255,255,.14);
    text-align: center;
}

.task-line {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 6px;
    align-items: start;
    padding: 3px 0;
}

.task-line + .task-line {
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,.07);
    padding-top: 7px;
}

.prio-badge {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(33,234,255,.32);
    color: var(--cyan);
    background: rgba(0,0,0,.32);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

.panel-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 14px 22px;
    color: #a5adb3;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.26);
}

.panel-footer b { color: #fff; }

.ship-panel { min-height: 780px; }

.ship-map-wrap {
    position: relative;
    min-height: 650px;
    margin: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(rgba(33,234,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(33,234,255,.07) 1px, transparent 1px),
        rgba(0,0,0,.28);
    background-size: 28px 28px;
    overflow: hidden;
}

.ship-stage {
    position: absolute;
    left: 42%;
    top: 52%;
    transform: translate(-50%, -50%);
    width: min(58%, 390px);
    aspect-ratio: 768 / 1500;
}

.ship-stage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: .96;
    filter: drop-shadow(0 0 28px rgba(33,234,255,.15));
}

.marker-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.marker {
    --marker-color: var(--cyan);
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 27px;
    height: 27px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    color: #001215;
    background: var(--marker-color);
    border: 2px solid rgba(255,255,255,.80);
    border-radius: 50%;
    opacity: .27;
    transition: opacity .16s ease, transform .16s ease, box-shadow .16s ease, filter .16s ease;
    pointer-events: auto;
}

.marker.station { --marker-color: var(--cyan); }
.marker.fire_extinguisher { --marker-color: #ff3730; }
.marker.escape_pod { --marker-color: var(--green); }

.marker.relevant,
.marker.general-active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.25);
    box-shadow: 0 0 16px var(--marker-color), 0 0 38px var(--marker-color);
    filter: saturate(1.35);
}

.marker.dimmed { opacity: .13; }

.marker-symbol {
    font-size: 13px;
    font-weight: 950;
}

.marker-label {
    display: none;
    position: absolute;
    top: 50%;
    left: 32px;
    transform: translateY(-50%);
    min-width: max-content;
    max-width: 180px;
    padding: 5px 8px;
    color: #eafcff;
    background: rgba(0,0,0,.78);
    border: 1px solid rgba(33,234,255,.32);
    font-size: 11px;
    line-height: 1.25;
}

.marker.tooltip-enabled:hover .marker-label { display: block; }

.legend-card,
.role-info-card {
    position: absolute;
    right: 18px;
    width: 215px;
    padding: 16px;
    background: rgba(3, 7, 9, .82);
    border: 1px solid rgba(255,255,255,.18);
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    box-shadow: 0 0 22px rgba(0,0,0,.34);
}

.legend-card { top: 18px; }
.role-info-card { top: 232px; }

.legend-card h3,
.role-info-card h3 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.role-info-card h3 { color: var(--cyan); }

.legend-card div,
.role-info-card div {
    color: #d4d9dc;
    font-size: 13px;
    line-height: 1.45;
}

.legend-card div + div { margin-top: 11px; }

.legend-dot {
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-right: 10px;
    border-radius: 50%;
    vertical-align: -4px;
    box-shadow: 0 0 13px currentColor;
}

.legend-dot.station { color: var(--cyan); background: var(--cyan); }
.legend-dot.fire_extinguisher { color: #ff3730; background: #ff3730; }
.legend-dot.escape_pod { color: var(--green); background: var(--green); }

.assign-card {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin: 0 16px 16px;
    padding: 16px;
    background: rgba(0,0,0,.30);
    border: 1px solid rgba(255,255,255,.10);
}

.assign-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.assign-role {
    margin-top: 4px;
    color: var(--cyan);
    font-size: 19px;
    font-weight: 950;
    text-transform: uppercase;
}

.assign-user {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.assign-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.empty-state {
    margin-top: 16px;
    padding: 40px;
    border: 1px solid var(--line);
    background: var(--panel);
}

@media (max-width: 1600px) {
    .dashboard { grid-template-columns: 1fr; }
    .table-scroll { max-height: none; min-height: 0; }
    .ship-panel { min-height: 780px; }
}

@media (max-width: 980px) {
    .app-shell { width: min(100vw - 18px, 1920px); }

    .site-header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "brand"
            "nav"
            "status";
        clip-path: none;
        padding: 18px;
    }

    .brand { align-items: flex-start; }
    .crest-img { width: 82px; height: 82px; }
    .nav-tabs { padding-left: 0; }
    .status-panels, .subbar { grid-template-columns: 1fr; }

    .legend-card,
    .role-info-card {
        position: static;
        width: auto;
        margin: 12px;
    }

    .ship-map-wrap { min-height: 820px; }

    .ship-stage {
        top: 42%;
        left: 50%;
        width: min(70%, 390px);
    }
}

.coverage-note {
    margin-top: 7px;
    color: #f1c66a;
    font-size: 11px;
    line-height: 1.25;
}

.marker.medbay { --marker-color: #ffffff; }
.marker.airlock { --marker-color: #ffb347; }
.marker.component { --marker-color: #b884ff; }
.marker.fuse { --marker-color: #ffdf4d; }

.marker.covered {
    outline: 2px dashed rgba(255, 198, 106, .9);
    outline-offset: 4px;
}

.legend-dot.medbay { color: #ffffff; background: #ffffff; }
.legend-dot.airlock { color: #ffb347; background: #ffb347; }
.legend-dot.component { color: #b884ff; background: #b884ff; }
.legend-dot.fuse { color: #ffdf4d; background: #ffdf4d; }

.nav-tabs a { text-decoration: none; }

.nav-tabs a { text-decoration: none; }

.link-page-panel {
    margin-top: 18px;
    padding-bottom: 22px;
}

.link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    padding: 22px;
}

.link-card {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 16px;
    min-height: 132px;
    padding: 18px;
    color: var(--text);
    text-decoration: none;
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(0,0,0,.18));
    border: 1px solid rgba(33,234,255,.18);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.link-card:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 22px rgba(33,234,255,.18);
    transform: translateY(-2px);
}

.link-card-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    color: #001215;
    background: var(--cyan);
    border-radius: 50%;
    font-size: 24px;
    font-weight: 950;
    box-shadow: 0 0 18px rgba(33,234,255,.45);
}

.link-card h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: .065em;
}

.link-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.link-page-note {
    margin: 0 22px 22px;
    color: var(--muted);
}

.link-section {
    padding: 0 22px 22px;
}

.link-section-title {
    margin: 22px 0 12px;
    color: var(--cyan);
    font-size: 18px;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.link-card-icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(33, 234, 255, .25));
}

@font-face { font-family: 'ZeroPrimeVCG'; src: url('/assets/fonts/zero-prime.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }


.marker.hidden-by-filter { display: none; }
.marker.tooltip-enabled:hover { z-index: 30; }
.ship-view-toolbar { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 12px; padding: 14px 16px 0; }
.compact-field { padding: 10px 12px; }
.brand-title, .brand-subtitle, .panel-title h1, .panel-title h2, .admin-header h1, .link-section-title { font-family: 'ZeroPrimeVCG', 'Zero Prime', 'Electrolize', system-ui, sans-serif; }


/* VCG cleanup: Markerfilter sitzt in der Legende */
.legend-filter-card {
    padding: 12px 14px;
}

.legend-filter-card summary {
    cursor: pointer;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 950;
    margin-bottom: 8px;
}

.legend-filter-item {
    width: 100%;
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
    padding: 3px 2px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.legend-filter-item:hover {
    color: var(--cyan);
}

.legend-filter-item.legend-filter-muted {
    opacity: .32;
    filter: grayscale(.8);
}

.legend-filter-item.legend-filter-muted span:last-child {
    text-decoration: line-through;
}

.marker.hidden-by-filter {
    display: none !important;
}

.marker.medbay { --marker-color: #ffffff; }
.marker.airlock { --marker-color: #ffb347; }
.marker.component { --marker-color: #b884ff; }
.marker.fuse { --marker-color: #ffdf4d; }
.legend-dot.medbay { background: #ffffff; }
.legend-dot.airlock { background: #ffb347; }
.legend-dot.component { background: #b884ff; }
.legend-dot.fuse { background: #ffdf4d; }


/* legend-admin-deck-2-roster */
.legend-filter-card {
    padding: 12px 14px;
}

.legend-filter-card summary {
    cursor: pointer;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 950;
    margin-bottom: 8px;
}

.legend-filter-item {
    width: 100%;
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
    padding: 3px 2px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.legend-filter-item:hover {
    color: var(--red);
}

.legend-filter-item.legend-filter-muted {
    opacity: .30;
    filter: grayscale(.85);
}

.legend-filter-item.legend-filter-muted span:last-child {
    text-decoration: line-through;
}

.marker.hidden-by-filter {
    display: none !important;
}

.marker.medbay { --marker-color: #ffffff; }
.marker.airlock { --marker-color: #ffb347; }
.marker.component { --marker-color: #b884ff; }
.marker.fuse { --marker-color: #ffdf4d; }
.legend-dot.medbay { background: #ffffff; }
.legend-dot.airlock { background: #ffb347; }
.legend-dot.component { background: #b884ff; }
.legend-dot.fuse { background: #ffdf4d; }

.placeholder-page {
    padding: 28px;
    color: var(--muted);
    line-height: 1.6;
}


/* stable-ui-1-roster */
.nav-tabs a,
.nav-tabs span {
    transition: color .16s ease, background .16s ease, border-color .16s ease, text-shadow .16s ease, transform .16s ease;
}

.nav-tabs a:hover {
    color: var(--cyan);
    border-color: var(--cyan);
    text-shadow: 0 0 14px rgba(33,234,255,.75);
    transform: translateY(-1px);
}

.ship-view-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 12px;
    padding: 14px 16px 0;
}

.compact-field {
    padding: 10px 12px;
}

.legend-filter-card {
    padding: 12px 14px;
}

.legend-filter-card summary {
    cursor: pointer;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 950;
    margin-bottom: 8px;
}

.legend-filter-item {
    width: 100%;
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
    padding: 3px 2px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.legend-filter-item:hover {
    color: var(--red);
}

.legend-filter-item.legend-filter-muted {
    opacity: .30;
    filter: grayscale(.85);
}

.legend-filter-item.legend-filter-muted span:last-child {
    text-decoration: line-through;
}

.marker.hidden-by-filter {
    display: none !important;
}

.marker.tooltip-enabled:hover .marker-label {
    display: block;
}

.marker.medbay { --marker-color: #ffffff; }
.marker.airlock { --marker-color: #ffb347; }
.marker.component { --marker-color: #b884ff; }
.marker.fuse { --marker-color: #ffdf4d; }
.legend-dot.medbay { background: #ffffff; }
.legend-dot.airlock { background: #ffb347; }
.legend-dot.component { background: #b884ff; }
.legend-dot.fuse { background: #ffdf4d; }

.link-grid {
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

.link-card {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 6px 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(33,234,255,.22);
    background: rgba(255,255,255,.035);
    color: var(--text);
    text-decoration: none;
}

.link-card:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 18px rgba(33,234,255,.18);
}

.link-icon {
    grid-row: span 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--cyan);
    border: 1px solid rgba(33,234,255,.4);
}

.link-card small,
.placeholder-page {
    color: var(--muted);
}

.placeholder-page {
    padding: 28px;
    line-height: 1.6;
}


/* visual-fix-2-roster */
.legend-filter-card {
    z-index: 20;
}

.legend-role-info {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(172,193,202,.18);
}

.legend-role-info h3 {
    margin: 0 0 6px;
    color: var(--cyan);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.legend-role-info div {
    color: var(--text);
    font-size: 12px;
    line-height: 1.45;
}

.role-info-card {
    display: none !important;
}

/* admin-matrix-3-roster */

/* Discord landing page */
.landing-shell {
    min-height: 100vh;
    padding: 24px;
}

.landing-hero {
    max-width: 1600px;
    margin: 0 auto;
    padding: 28px;
}

.landing-brand {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 26px;
}

.landing-crest {
    width: 88px;
    height: 88px;
    object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(255, 0, 32, 0.25));
}

.landing-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(420px, 1.15fr);
    gap: 24px;
    align-items: stretch;
}

.landing-copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: center;
}

.landing-kicker {
    font-family: 'ZeroPrimeVCG', 'Zero Prime', 'Electrolize', system-ui, sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
}

.landing-copy h1 {
    margin: 0;
    font-family: 'ZeroPrimeVCG', 'Zero Prime', 'Electrolize', system-ui, sans-serif;
    font-size: clamp(2rem, 4vw, 3.75rem);
    line-height: 1.02;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-primary);
}

.landing-copy p {
    margin: 0;
    max-width: 62ch;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.landing-alert {
    border: 1px solid rgba(255, 72, 72, 0.65);
    background: rgba(78, 6, 6, 0.46);
    color: #ffd7d7;
    padding: 12px 14px;
    box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.08), 0 0 16px rgba(255, 0, 0, 0.1);
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.discord-login-btn,
.landing-secondary-btn,
.public-link-row a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid rgba(255, 0, 0, 0.45);
    background: linear-gradient(180deg, rgba(10, 17, 23, 0.96), rgba(6, 10, 15, 0.98));
    color: var(--text-primary);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: 'ZeroPrimeVCG', 'Zero Prime', 'Electrolize', system-ui, sans-serif;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    cursor: pointer;
}

.discord-login-btn:hover,
.landing-secondary-btn:hover,
.public-link-row a:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 235, 255, 0.65);
    box-shadow: 0 0 18px rgba(0, 235, 255, 0.18);
}

.landing-secondary-btn {
    background: rgba(7, 11, 17, 0.92);
}

.public-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.landing-user-card {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border: 1px solid rgba(0, 235, 255, 0.35);
    background: rgba(0, 20, 28, 0.48);
    max-width: fit-content;
}

.landing-user-card img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.landing-user-card strong,
.landing-user-card span {
    display: block;
}

.landing-user-card span {
    color: var(--text-secondary);
    margin-top: 4px;
}

.landing-visuals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    min-height: 100%;
}

.landing-visual-card {
    position: relative;
    min-height: 240px;
    overflow: hidden;
    border: 1px solid rgba(255, 0, 0, 0.36);
    background: rgba(0, 0, 0, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 16px 24px rgba(0,0,0,0.18);
}

.landing-visual-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.22));
}

.landing-visual-card--wide {
    grid-column: 1 / -1;
    min-height: 320px;
}

.landing-visual-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
}

@media (max-width: 1100px) {
    .landing-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .landing-shell {
        padding: 14px;
    }

    .landing-hero {
        padding: 18px;
    }

    .landing-brand {
        align-items: flex-start;
    }

    .landing-crest {
        width: 68px;
        height: 68px;
    }

    .landing-visuals {
        grid-template-columns: 1fr;
    }

    .landing-visual-card--wide {
        grid-column: auto;
    }
}

/* audit-polish-2026-08: shared readability, keyboard and workspace rules */
html {
    color-scheme: dark;
}

.site-skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 10000;
    padding: 9px 12px;
    color: #fff;
    background: #8f0710;
    border: 1px solid #ff5964;
    transform: translateY(-160%);
    transition: transform .15s ease;
}

.site-skip-link:focus-visible {
    transform: translateY(0);
}

html body :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid rgba(255, 72, 82, .95);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(224, 0, 0, .16);
}

html body :where(button, summary, [role="button"]):focus:not(:focus-visible) {
    outline: none;
}

.field > span,
.compact-field > span {
    font-size: 12px;
    letter-spacing: .08em;
}

input,
select,
textarea,
button {
    font-size: max(12px, 1em);
}

.versedb-alert-panel.is-neutral {
    margin: 0 0 14px;
    padding: 11px 13px;
    border: 1px solid rgba(173, 186, 194, .34);
    border-left: 3px solid rgba(173, 186, 194, .72);
    background: rgba(173, 186, 194, .055);
    color: rgba(224, 232, 236, .82);
    line-height: 1.5;
}

.versedb-value-missing {
    color: rgba(188, 199, 205, .64) !important;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 600 !important;
}

/* The role matrix remains horizontally explorable while the ship pane stops
   consuming a fixed 650 px on ordinary desktop screens. */
.dashboard {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 30vw);
    gap: 16px;
}

.table-panel,
.ship-panel {
    min-width: 0;
}

.table-scroll {
    min-height: min(620px, calc(100vh - 310px));
    overscroll-behavior: contain;
}

.role-matrix,
.role-matrix thead th {
    font-size: 12px;
}

.ship-panel {
    min-height: 0;
}

.ship-panel .ship-map-wrap {
    min-height: clamp(470px, 56vh, 710px);
}

@media (max-width: 1380px) {
    .dashboard {
        grid-template-columns: minmax(0, 1fr);
    }

    .ship-panel {
        order: 2;
    }

    .ship-panel .ship-map-wrap {
        min-height: 560px;
    }
}

@media (max-width: 720px) {
    .roster-controlbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .roster-controlbar .hint,
    .roster-controlbar .active-role {
        min-width: 0;
    }

    .table-scroll {
        min-height: 480px;
        max-height: 70vh;
    }

    .ship-panel .ship-map-wrap {
        min-height: 430px;
        margin: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* member-directory-and-profile-v1 */
.member-section-kicker {
    display: block;
    margin: 0 0 6px;
    color: #ef4d55;
    font-family: var(--font-tech, sans-serif);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

html body :is(.member-directory-page, .member-profile-page, .member-wishlist-page, .profile-workspace) {
    width: min(1880px, calc(100% - 34px));
    margin: 22px auto 44px;
    padding: 0;
    border: 0;
    background: transparent;
}

.member-directory-heading,
.profile-workspace-heading {
    --member-cut: 14px;
    position: relative;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    min-height: 118px;
    padding: 22px 28px 24px;
    clip-path: polygon(var(--member-cut) 0, 100% 0, 100% calc(100% - var(--member-cut)), calc(100% - var(--member-cut)) 100%, 0 100%, 0 var(--member-cut));
    background: rgba(7, 11, 13, .94);
    box-shadow: inset 0 0 16px rgba(224, 0, 0, .07), 0 0 15px rgba(224, 0, 0, .06);
}

.member-directory-heading::after,
.profile-workspace-heading::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(#e00000, #e00000) left var(--member-cut) top / calc(100% - var(--member-cut)) 1px no-repeat,
        linear-gradient(rgba(224, 0, 0, .5), rgba(224, 0, 0, .5)) right top / 1px calc(100% - var(--member-cut)) no-repeat,
        linear-gradient(#e00000, #e00000) left bottom / calc(100% - var(--member-cut)) 1px no-repeat,
        linear-gradient(rgba(224, 0, 0, .5), rgba(224, 0, 0, .5)) left top var(--member-cut) / 1px calc(100% - var(--member-cut)) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 1px), #e00000 calc(50% - 1px), #e00000 calc(50% + 1px), transparent calc(50% + 1px)) left top / var(--member-cut) var(--member-cut) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 1px), #e00000 calc(50% - 1px), #e00000 calc(50% + 1px), transparent calc(50% + 1px)) right bottom / var(--member-cut) var(--member-cut) no-repeat;
}

.member-directory-heading h1,
.profile-workspace-heading h1 {
    margin: 0;
    color: #f1f4f5;
    font-family: var(--font-display, sans-serif);
    font-size: clamp(28px, 3vw, 44px);
    letter-spacing: 0;
}

.member-directory-heading p,
.profile-workspace-heading p {
    max-width: 830px;
    margin: 7px 0 0;
    color: #99a4aa;
    font-size: 16px;
}

.member-directory-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.member-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 17px;
    border: 1px solid rgba(171, 181, 187, .46);
    color: #d4dadd;
    background: rgba(14, 18, 20, .92);
    font-family: var(--font-tech, sans-serif);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.member-action-button:hover,
.member-action-button.is-primary {
    border-color: #e00000;
    color: #fff;
    background: rgba(85, 8, 13, .72);
}

.member-directory-filter {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    align-items: end;
    gap: 12px;
    margin: 14px 0;
    padding: 15px 18px;
    border-left: 2px solid #e00000;
    background: rgba(5, 9, 11, .92);
}

.member-directory-filter label,
.profile-wishlist-add label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.member-directory-filter label > span,
.profile-wishlist-add label > span,
.field-title {
    color: #8e989e;
    font-family: var(--font-tech, sans-serif);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.member-directory-filter button,
.member-directory-filter > a {
    min-height: 40px;
    padding: 9px 16px;
}

.member-directory-filter > a {
    display: inline-flex;
    align-items: center;
    color: #aeb7bc;
}

.member-directory-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    margin-bottom: 14px;
}

.member-directory-summary span {
    min-width: 148px;
    padding: 10px 14px;
    border: 1px solid rgba(143, 154, 160, .22);
    background: rgba(7, 11, 13, .88);
    color: #8c979d;
    font-size: 12px;
    text-transform: uppercase;
}

.member-directory-summary strong {
    margin-right: 7px;
    color: #f0f3f4;
    font-size: 17px;
}

.member-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 12px;
}

.member-directory-card {
    --member-card-cut: 12px;
    position: relative;
    display: flex;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    color: inherit;
    background: rgba(5, 9, 11, .95);
    clip-path: polygon(var(--member-card-cut) 0, 100% 0, 100% calc(100% - var(--member-card-cut)), calc(100% - var(--member-card-cut)) 100%, 0 100%, 0 var(--member-card-cut));
    filter: drop-shadow(0 0 6px rgba(224, 0, 0, .06));
    transition: transform .16s ease, background .16s ease, filter .16s ease;
}

.member-directory-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(178, 188, 194, .48), rgba(178, 188, 194, .48)) left var(--member-card-cut) top / calc(100% - var(--member-card-cut)) 1px no-repeat,
        linear-gradient(rgba(178, 188, 194, .25), rgba(178, 188, 194, .25)) right top / 1px calc(100% - var(--member-card-cut)) no-repeat,
        linear-gradient(rgba(178, 188, 194, .48), rgba(178, 188, 194, .48)) left bottom / calc(100% - var(--member-card-cut)) 1px no-repeat,
        linear-gradient(rgba(178, 188, 194, .25), rgba(178, 188, 194, .25)) left top var(--member-card-cut) / 1px calc(100% - var(--member-card-cut)) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 1px), rgba(178, 188, 194, .65) calc(50% - 1px), rgba(178, 188, 194, .65) calc(50% + 1px), transparent calc(50% + 1px)) left top / var(--member-card-cut) var(--member-card-cut) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 1px), rgba(178, 188, 194, .65) calc(50% - 1px), rgba(178, 188, 194, .65) calc(50% + 1px), transparent calc(50% + 1px)) right bottom / var(--member-card-cut) var(--member-card-cut) no-repeat;
    box-shadow: inset 0 0 12px rgba(224, 0, 0, .045);
}

.member-directory-card:hover {
    transform: translateY(-2px);
    background: rgba(8, 12, 14, .98);
    filter: drop-shadow(0 0 9px rgba(224, 0, 0, .16));
}

.member-directory-primary {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas: 'avatar identity' 'presence presence';
    gap: 13px 16px;
    padding: 20px 20px 12px;
    color: inherit;
    text-decoration: none;
}

.member-directory-primary:focus-visible {
    outline: 2px solid #f53136;
    outline-offset: -5px;
}

.member-directory-avatar {
    grid-area: avatar;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    overflow: hidden;
    border: 1px solid rgba(224, 0, 0, .72);
    background: #111619;
    color: #fff;
    font-family: var(--font-display, sans-serif);
    font-size: 23px;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.member-directory-avatar img,
.member-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-directory-identity {
    grid-area: identity;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

.member-directory-state {
    margin-bottom: 7px;
    color: #aab3b8;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.member-directory-state.is-active { color: #73d58a; }
.member-directory-state.is-reserve { color: #e8bd58; }
.member-directory-state.is-leave { color: #d88a56; }

.member-directory-identity > strong {
    max-width: 100%;
    overflow: hidden;
    color: #edf1f3;
    font-size: 19px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-directory-identity small,
.member-directory-identity > span:last-child {
    max-width: 100%;
    margin-top: 3px;
    overflow: hidden;
    color: #8d989e;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-directory-identity > span:last-child {
    color: #d6b257;
    font-weight: 700;
}

.member-directory-presence {
    grid-area: presence;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(143, 154, 160, .18);
    color: #7f898e;
    font-size: 11px;
    text-transform: uppercase;
}

.member-directory-presence i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4a5358;
}

.member-directory-presence i.is-online {
    background: #55e379;
    box-shadow: 0 0 10px rgba(85, 227, 121, .8);
}

.member-directory-profile-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 20px 16px;
}

.member-directory-profile-action {
    gap: 6px;
    min-height: 30px;
    padding: 5px 10px;
    font-size: 10px;
    line-height: 1;
}

.member-directory-profile-action svg {
    width: 13px;
    height: 13px;
    stroke-width: 1.8;
}

.member-directory-discord-profile {
    flex: 0 0 30px;
    width: 30px;
    min-width: 30px;
    padding: 0;
    color: #e6edf0;
}

.member-directory-discord-profile svg {
    width: 17px;
    height: 17px;
}

.member-directory-discord-mark {
    fill: currentColor;
    stroke: none;
}

.member-directory-discord-profile:hover,
.member-directory-discord-profile:focus-visible {
    color: #fff;
    border-color: #ff3246;
    background: rgba(224, 0, 20, .16);
}

.member-empty-state,
.member-inline-empty {
    padding: 28px;
    color: #859096;
}

.member-empty-state {
    display: grid;
    gap: 5px;
    border: 1px solid rgba(143, 154, 160, .28);
    background: rgba(5, 9, 11, .9);
}

.member-empty-state strong { color: #d9dee1; }

.member-profile-breadcrumb {
    display: flex;
    gap: 10px;
    margin: 0 0 10px;
    color: #737e84;
    font-size: 12px;
    text-transform: uppercase;
}

.member-profile-breadcrumb a { color: #db4d54; }

.member-profile-hero,
.profile-edit-preview {
    --member-hero-cut: 18px;
    position: relative;
    display: grid;
    grid-template-columns: 138px 1fr auto;
    align-items: end;
    gap: 24px;
    min-height: 260px;
    padding: 34px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(3, 6, 8, .96), rgba(3, 6, 8, .68) 48%, rgba(3, 6, 8, .9)),
        var(--member-profile-banner, linear-gradient(115deg, #251015, #080d0f 62%));
    background-position: center;
    background-size: cover;
    clip-path: polygon(var(--member-hero-cut) 0, 100% 0, 100% calc(100% - var(--member-hero-cut)), calc(100% - var(--member-hero-cut)) 100%, 0 100%, 0 var(--member-hero-cut));
}

.member-profile-hero::after,
.profile-edit-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-top: 1px solid #e00000;
    border-bottom: 1px solid #e00000;
    background: linear-gradient(90deg, #e00000, transparent 28%) left bottom / 100% 3px no-repeat;
}

.member-profile-avatar {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 138px;
    height: 138px;
    overflow: hidden;
    border: 1px solid #e00000;
    background: #111619;
    color: #fff;
    font-family: var(--font-display, sans-serif);
    font-size: 38px;
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}

.member-profile-title,
.member-profile-live-state,
.profile-edit-preview > div,
.profile-edit-preview > dl { position: relative; z-index: 1; }

.member-profile-title h1,
.profile-edit-preview h2 {
    margin: 0;
    color: #f3f5f6;
    font-family: var(--font-display, sans-serif);
    font-size: clamp(30px, 4vw, 58px);
    letter-spacing: 0;
}

.member-profile-title > strong { display: block; margin-top: 5px; color: #e3bb5d; font-size: 15px; text-transform: uppercase; }
.member-profile-title p,
.profile-edit-preview p { margin: 5px 0 0; color: #a4adb2; font-size: 15px; }

.member-profile-live-state {
    display: grid;
    gap: 7px;
    justify-items: end;
}

.member-profile-live-state span,
.member-profile-live-state a {
    min-width: 156px;
    padding: 7px 10px;
    border-left: 2px solid #626d73;
    background: rgba(0, 0, 0, .48);
    color: #a1aaaf;
    font-size: 11px;
    text-align: right;
    text-decoration: none;
    text-transform: uppercase;
}

.member-profile-live-state span.is-online { border-color: #4edb71; color: #8be99f; }
.member-profile-live-state a { border-color: #e00000; color: #fff; }

.member-profile-layout {
    display: grid;
    grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
    gap: 14px;
    margin-top: 14px;
}

.member-profile-sidebar,
.member-profile-content { display: grid; align-content: start; gap: 14px; }

.member-profile-section {
    position: relative;
    padding: 20px;
    border: 1px solid rgba(139, 150, 157, .30);
    border-left-color: rgba(224, 0, 0, .72);
    background: rgba(5, 9, 11, .94);
}

.member-profile-section h2 {
    margin: 0 0 14px;
    color: #e7ebed;
    font-family: var(--font-tech, sans-serif);
    font-size: 18px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.member-profile-facts { display: grid; grid-template-columns: minmax(90px, .75fr) 1.25fr; gap: 0; margin: 0; }
.member-profile-facts dt,
.member-profile-facts dd { margin: 0; padding: 9px 0; border-bottom: 1px solid rgba(139, 150, 157, .14); }
.member-profile-facts dt { color: #778188; font-size: 10px; text-transform: uppercase; }
.member-profile-facts dd { color: #cbd1d4; font-size: 12px; text-align: right; overflow-wrap: anywhere; }

.member-profile-links { display: grid; gap: 5px; }
.member-profile-links a { padding: 9px 11px; border-left: 2px solid rgba(224, 0, 0, .64); background: rgba(255, 255, 255, .025); color: #d3dadd; font-size: 12px; text-decoration: none; }
.member-profile-links a:hover { background: rgba(224, 0, 0, .10); color: #fff; }

.member-profile-bio p { max-width: 980px; margin: 0; color: #aeb7bc; line-height: 1.65; white-space: pre-line; }
.member-profile-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; border-bottom: 1px solid rgba(224, 0, 0, .45); }
.member-profile-section-head h2 { margin-bottom: 10px; }
.member-profile-section-head > strong { padding: 8px; color: #e6b94d; font-size: 20px; }

.member-assignment-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.member-assignment-list article { display: grid; gap: 3px; padding: 13px; border: 1px solid rgba(139, 150, 157, .23); border-left: 2px solid #e00000; background: rgba(255, 255, 255, .02); }
.member-assignment-list article span { color: #d7b355; font-size: 10px; text-transform: uppercase; }
.member-assignment-list article strong { color: #e7ecee; font-size: 15px; }
.member-assignment-list article small { color: #78838a; }

.member-ship-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 9px; }
.member-ship-grid article { display: grid; grid-template-columns: 96px 1fr; gap: 14px; min-height: 92px; border: 1px solid rgba(139, 150, 157, .24); background: rgba(255, 255, 255, .018); }
.member-ship-image { display: grid; place-items: center; overflow: hidden; background: #080c0e; }
.member-ship-image img { width: 100%; height: 100%; object-fit: cover; }
.member-ship-image span { color: #6e787e; font-family: var(--font-display, sans-serif); }
.member-ship-grid article > div:last-child { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 10px 12px 10px 0; }
.member-ship-grid strong { color: #e4e8ea; font-size: 15px; }
.member-ship-grid span { color: #b39348; font-size: 11px; }
.member-ship-grid small { margin-top: 5px; color: #737e84; }

.member-public-wishlists { display: grid; gap: 8px; }
.member-public-wishlists details { border: 1px solid rgba(139, 150, 157, .28); background: rgba(255, 255, 255, .015); }
.member-public-wishlists summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 15px; cursor: pointer; list-style: none; }
.member-public-wishlists summary > span { display: grid; gap: 3px; }
.member-public-wishlists summary strong { color: #e1e6e8; }
.member-public-wishlists summary small { color: #78838a; }
.member-public-wishlists summary b { color: #d5ad4d; font-size: 11px; text-transform: uppercase; }
.member-wishlist-lines { display: grid; padding: 0 15px 15px; }
.member-wishlist-lines > div { display: grid; grid-template-columns: 64px minmax(160px, 1fr) minmax(140px, .7fr); gap: 9px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(139, 150, 157, .15); }
.member-wishlist-lines p { grid-column: 2 / -1; margin: 0; color: #8b959a; }
.member-wishlist-copy-action { display: flex; justify-content: flex-end; padding: 0 15px 15px; }

.member-wishlist-priority { display: inline-flex; width: max-content; padding: 3px 6px; border: 1px solid rgba(151, 161, 167, .38); color: #aab3b8; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.member-wishlist-priority.is-high { border-color: rgba(244, 61, 69, .72); color: #ff777d; }
.member-wishlist-priority.is-low { color: #778188; }

.member-wishlist-overview { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 14px; }
.member-wishlist-list-index,
.member-wishlist-table-wrap { border: 1px solid rgba(139, 150, 157, .28); background: rgba(5, 9, 11, .94); }
.member-wishlist-list-index { padding: 15px; }
.member-wishlist-list-index h2 { margin: 0 0 12px; color: #e5e9eb; font-size: 16px; text-transform: uppercase; }
.member-wishlist-list-index > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border-top: 1px solid rgba(139, 150, 157, .16); color: inherit; text-decoration: none; }
.member-wishlist-list-index > a span { display: grid; gap: 2px; }
.member-wishlist-list-index strong { color: #d9dfe1; }
.member-wishlist-list-index small { color: #78838a; }
.member-wishlist-list-index b { color: #d6ae4e; }
.member-wishlist-table-wrap { overflow-x: auto; }
.member-wishlist-table { width: 100%; border-collapse: collapse; }
.member-wishlist-table th,
.member-wishlist-table td { padding: 12px 13px; border-bottom: 1px solid rgba(139, 150, 157, .15); color: #adb6bb; font-size: 12px; text-align: left; vertical-align: top; }
.member-wishlist-table th { color: #778188; font-size: 10px; text-transform: uppercase; }
.member-wishlist-table td:first-child { min-width: 220px; }
.member-wishlist-table td strong,
.member-wishlist-table td small { display: block; }
.member-wishlist-table td strong { color: #e0e5e7; }
.member-wishlist-table td small { margin-top: 3px; color: #717c82; }
.member-wishlist-table a { color: #e15a61; }

/* Compact profile editor */
.profile-workspace-heading { margin-bottom: 14px; }
.profile-edit-preview { grid-template-columns: 92px 1fr auto; min-height: 150px; margin-bottom: 14px; padding: 24px 28px; }
.profile-edit-preview .member-profile-avatar { width: 92px; height: 92px; font-size: 25px; }
.profile-edit-preview h2 { font-size: clamp(24px, 3vw, 38px); }
.profile-edit-preview > dl { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 1px; margin: 0; }
.profile-edit-preview > dl > div { min-width: 120px; padding: 9px 12px; background: rgba(0, 0, 0, .55); }
.profile-edit-preview dt { color: #778188; font-size: 9px; text-transform: uppercase; }
.profile-edit-preview dd { margin: 3px 0 0; color: #d6dcdf; font-size: 12px; }
.profile-edit-sections { display: grid; gap: 9px; }

.profile-edit-section {
    --profile-section-cut: 10px;
    position: relative;
    border: 1px solid rgba(139, 150, 157, .30);
    border-left-color: rgba(224, 0, 0, .72);
    background: rgba(5, 9, 11, .95);
    clip-path: polygon(var(--profile-section-cut) 0, 100% 0, 100% calc(100% - var(--profile-section-cut)), calc(100% - var(--profile-section-cut)) 100%, 0 100%, 0 var(--profile-section-cut));
}

.profile-edit-section[open] { border-color: rgba(224, 0, 0, .64); }
.profile-edit-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 68px; padding: 12px 20px; cursor: pointer; list-style: none; background: rgba(8, 12, 14, .96); box-shadow: inset 0 0 10px rgba(224, 0, 0, .06); }
.profile-edit-section > summary::-webkit-details-marker { display: none; }
.profile-edit-section > summary > span { display: grid; grid-template-columns: 42px 1fr; grid-template-areas: 'number title' 'number description'; align-items: center; gap: 2px 12px; }
.profile-edit-section > summary b { grid-area: number; color: #e00000; font-family: var(--font-tech, sans-serif); font-size: 18px; }
.profile-edit-section > summary strong { grid-area: title; color: #e5eaec; font-family: var(--font-tech, sans-serif); font-size: 16px; text-transform: uppercase; }
.profile-edit-section > summary small { grid-area: description; color: #78838a; }
.profile-edit-section > summary em { color: #d3a947; font-size: 11px; font-style: normal; text-transform: uppercase; }
.profile-edit-section-body { padding: 18px 20px 22px; border-top: 1px solid rgba(139, 150, 157, .18); }

.profile-identity-form { display: grid; gap: 18px; }
.profile-identity-form fieldset { margin: 0; padding: 16px; border: 1px solid rgba(139, 150, 157, .26); }
.profile-identity-form legend { padding: 0 8px; color: #df535a; font-family: var(--font-tech, sans-serif); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.profile-form-grid { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 12px; }
.profile-identity-form .field { display: grid; align-content: start; gap: 6px; min-width: 0; }
.profile-identity-form .field > span { color: #8a959b; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.profile-identity-form .field small { color: #6f7a80; }
.profile-bio-field { margin-top: 12px; }
.profile-media-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 14px; align-items: start; }
.profile-avatar-priority { display: grid; align-content: start; gap: 5px; min-height: 62px; padding: 10px 12px; border-left: 2px solid #e00000; background: rgba(224, 0, 0, .055); box-shadow: inset 0 0 12px rgba(224, 0, 0, .05), 0 0 10px rgba(224, 0, 0, .035); }
.profile-avatar-priority .field-title { color: #8a959b; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.profile-avatar-priority strong { color: #e5eaec; font-family: var(--font-tech, sans-serif); font-size: 13px; }
.profile-avatar-priority small { color: #6f7a80; }
.profile-remove-media { display: grid; gap: 8px; padding-top: 22px; color: #9aa4a9; font-size: 11px; }
.profile-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 4px; }
.profile-form-actions p { margin: 0; color: #778188; }
.profile-rsi-sync-state { display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: 8px; margin-top: 12px; }
.profile-rsi-sync-state > span { display: grid; gap: 4px; padding: 10px 12px; border-left: 2px solid #b08c3b; background: rgba(176, 140, 59, .07); }
.profile-rsi-sync-state strong { color: #d9bf80; font-size: 12px; }
.profile-rsi-sync-state small { color: #737e84; }
.profile-rsi-sync-form { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 11px 15px; border-left: 2px solid rgba(139, 150, 157, .5); background: rgba(255, 255, 255, .018); }
.profile-rsi-sync-form p { margin: 0; color: #78838a; }

.profile-standard-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.profile-standard-links span { display: grid; gap: 2px; padding: 11px; border-left: 2px solid #e00000; background: rgba(255, 255, 255, .025); }
.profile-standard-links b { color: #dde3e5; }
.profile-standard-links small { color: #78838a; }
.profile-link-editor { display: grid; gap: 7px; }
.profile-link-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.profile-link-row > form:first-child,
.profile-link-row.is-new { display: grid; grid-template-columns: minmax(150px, .35fr) minmax(250px, 1fr) auto; gap: 7px; }
.profile-link-row.is-new { grid-template-columns: minmax(150px, .35fr) minmax(250px, 1fr) auto; }
.profile-link-row .is-danger,
.profile-wishlist-detail .is-danger { border-color: rgba(224, 0, 0, .7); color: #ef6970; background: rgba(224, 0, 0, .07); }

.profile-wishlist-workspace { display: grid; grid-template-columns: minmax(210px, 280px) minmax(0, 1fr); gap: 14px; }
.profile-wishlist-index { display: grid; align-content: start; gap: 6px; }
.profile-wishlist-index > a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px; border: 1px solid rgba(139, 150, 157, .26); color: inherit; text-decoration: none; }
.profile-wishlist-index > a.is-active { border-color: #e00000; background: rgba(224, 0, 0, .10); }
.profile-wishlist-index > a span { display: grid; gap: 2px; }
.profile-wishlist-index strong { color: #dce2e4; }
.profile-wishlist-index small { color: #747f85; }
.profile-wishlist-index b { color: #d2a743; }
.profile-wishlist-create { display: grid; gap: 7px; margin-top: 8px; padding: 12px; border: 1px solid rgba(139, 150, 157, .24); }
.profile-wishlist-create label { color: #8e989e; font-size: 11px; }
.profile-wishlist-detail > header { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 12px; }
.profile-wishlist-detail > header > form:first-child { display: grid; grid-template-columns: minmax(180px, .55fr) 1fr auto auto; gap: 7px; }
.profile-wishlist-detail > header label { display: flex; align-items: center; gap: 6px; padding-inline: 7px; color: #929ca1; font-size: 11px; }
.profile-wishlist-actions { display: flex; align-items: stretch; gap: 7px; }
.profile-wishlist-actions form { display: flex; }
.profile-wishlist-actions button { white-space: nowrap; }
.profile-wishlist-add { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(260px, 1fr) 90px 140px minmax(180px, .6fr) auto; gap: 8px; align-items: end; margin-bottom: var(--profile-item-results-space, 0); padding: 13px; border: 1px solid rgba(139, 150, 157, .28); background: rgba(255, 255, 255, .018); transition: margin-bottom .16s ease; }
.profile-wishlist-detail:has(.profile-item-results:not([hidden])),
.profile-edit-section:has(.profile-item-results:not([hidden])) { z-index: 40; }
.profile-item-results { position: absolute; top: calc(100% + 3px); right: 0; left: 0; z-index: 60; max-height: 270px; overflow-y: auto; border: 1px solid #e00000; background: #05090b; box-shadow: 0 14px 30px rgba(0, 0, 0, .72); }
.profile-item-result { display: grid; width: 100%; gap: 2px; padding: 9px 11px; border: 0; border-bottom: 1px solid rgba(139, 150, 157, .16); background: transparent; text-align: left; }
.profile-item-result:hover { background: rgba(224, 0, 0, .12); }
.profile-item-result strong { color: #e1e6e8; }
.profile-item-result small,
.profile-item-result-empty { color: #778188; }
.profile-item-result-empty { display: block; padding: 12px; }
.profile-wishlist-item-list { display: grid; gap: 5px; margin-top: 9px; }
.profile-wishlist-item-list article { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(430px, 1.2fr) auto; gap: 8px; align-items: center; padding: 9px 10px; border: 1px solid rgba(139, 150, 157, .20); }
.profile-wishlist-item-list article > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; }
.profile-wishlist-item-list article > div small { grid-column: 2; color: #747f85; }
.profile-wishlist-item-list article > form:nth-of-type(1) { display: grid; grid-template-columns: 80px 130px 1fr auto; gap: 6px; }

@media (max-width: 1180px) {
    .profile-form-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
    .profile-media-grid { grid-template-columns: repeat(2, 1fr); }
    .profile-wishlist-add { grid-template-columns: minmax(260px, 1fr) 80px 130px; }
    .profile-wishlist-add > label:nth-of-type(4) { grid-column: 1 / 3; }
    .profile-wishlist-item-list article { grid-template-columns: 1fr auto; }
    .profile-wishlist-item-list article > form:nth-of-type(1) { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
    html body :is(.member-directory-page, .member-profile-page, .member-wishlist-page, .profile-workspace) { width: min(100% - 18px, 1880px); margin-top: 12px; }
    .member-directory-heading,
    .profile-workspace-heading { align-items: start; flex-direction: column; padding: 20px; }
    .member-directory-filter { grid-template-columns: 1fr; }
    .member-profile-hero,
    .profile-edit-preview { grid-template-columns: 82px 1fr; align-items: center; min-height: 190px; padding: 22px; }
    .member-profile-avatar,
    .profile-edit-preview .member-profile-avatar { width: 82px; height: 82px; }
    .member-profile-live-state,
    .profile-edit-preview > dl { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); justify-items: stretch; }
    .member-profile-live-state span,
    .member-profile-live-state a { min-width: 0; text-align: left; }
    .member-profile-layout,
    .member-wishlist-overview,
    .profile-wishlist-workspace { grid-template-columns: 1fr; }
    .profile-form-grid,
    .profile-media-grid,
    .profile-rsi-sync-state,
    .profile-standard-links { grid-template-columns: 1fr; }
    .profile-link-row > form:first-child,
    .profile-link-row.is-new,
    .profile-wishlist-detail > header > form:first-child,
    .profile-wishlist-add,
    .profile-wishlist-item-list article,
    .profile-wishlist-item-list article > form:nth-of-type(1) { grid-template-columns: 1fr; }
    .profile-wishlist-add > label:nth-of-type(4),
    .profile-wishlist-item-list article > form:nth-of-type(1) { grid-column: auto; }
    .profile-form-actions,
    .profile-rsi-sync-form { align-items: stretch; flex-direction: column; }
}

@media (max-width: 520px) {
    .member-directory-primary { grid-template-columns: 60px minmax(0, 1fr); padding: 16px 16px 10px; }
    .member-directory-avatar { width: 60px; height: 60px; }
    .member-directory-profile-actions { padding: 0 16px 14px; }
    .member-profile-hero,
    .profile-edit-preview { grid-template-columns: 1fr; }
    .member-profile-live-state,
    .profile-edit-preview > dl { grid-column: auto; grid-template-columns: 1fr; }
    .member-profile-facts { grid-template-columns: 1fr; }
    .member-profile-facts dd { padding-top: 0; text-align: left; }
    .member-wishlist-lines > div { grid-template-columns: 1fr; }
    .member-wishlist-lines p { grid-column: auto; }
    .profile-edit-section > summary { padding: 12px 14px; }
    .profile-edit-section > summary small,
    .profile-edit-section > summary em { display: none; }
    .profile-edit-section-body { padding: 14px; }
}


/* member-header-1 */
.member-card {
    grid-area: status;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 340px;
    max-width: 430px;
    padding: 12px 14px;
    background: linear-gradient(120deg, rgba(4, 9, 12, .86), rgba(10, 15, 18, .72));
    border: 1px solid var(--line-soft);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 0 18px rgba(0,0,0,.22);
    clip-path: polygon(0 0, 94% 0, 100% 24%, 100% 100%, 6% 100%, 0 76%);
}

.status-panels {
    grid-template-columns: minmax(240px, 300px) minmax(330px, 430px);
}

.status-panels .member-card {
    grid-area: auto;
    min-width: 0;
    max-width: none;
}

.member-avatar {
    width: 54px;
    height: 54px;
    border-radius: 0;
    object-fit: cover;
    border: 1px solid rgba(224, 0, 0, .58);
    box-shadow: 0 0 16px rgba(224, 0, 0, .14);
    clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
}

.member-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef6970;
    font-size: 12px;
    font-weight: 950;
    background: rgba(0,0,0,.52);
}

.member-meta {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.member-meta span,
.member-meta small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.member-meta strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-meta a,
.landing-user-card a {
    color: #c6ced2;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}

.member-meta a:hover,
.landing-user-card a:hover {
    color: #fff;
    text-shadow: 0 0 12px rgba(224, 0, 0, .72);
}

.member-logout-form {
    margin: 0;
}

.member-logout-btn {
    min-width: 84px;
    min-height: 34px;
    padding: 8px 10px;
    color: #fff;
    border-color: rgba(224, 0, 0, .84);
    background: rgba(0, 0, 0, .64);
}

.member-logout-btn:hover {
    color: #fff;
    border-color: #ff313b;
    box-shadow: inset 0 0 14px rgba(224, 0, 0, .14);
}

.runtime-versions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 5px;
    color: rgba(141, 151, 158, .58);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.runtime-versions span,
.runtime-versions a {
    color: inherit;
    font-size: inherit;
    letter-spacing: inherit;
}

.runtime-versions > * + *::before {
    margin-right: 10px;
    color: rgba(224, 0, 0, .52);
    content: "/";
}

.runtime-versions strong,
.runtime-versions a {
    color: rgba(213, 221, 225, .68);
    font: inherit;
}

.runtime-versions a {
    text-decoration: none;
}

.runtime-versions .is-outdated,
.runtime-versions.has-client-update a {
    color: #ffbd4a;
    text-shadow: 0 0 8px rgba(255, 189, 74, .34);
}

.runtime-versions.has-client-update a:hover,
.runtime-versions.has-client-update a:focus-visible {
    color: #fff1be;
}

.runtime-versions [hidden] {
    display: none;
}

.landing-copy > .runtime-versions {
    margin-top: 14px;
    opacity: .8;
}

@media (max-width: 980px) {
    .site-header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "brand"
            "nav"
            "status";
        clip-path: none;
    }

    .nav-tabs {
        padding-left: 0;
    }

    .status-panels {
        grid-template-columns: 1fr;
    }

    .member-card {
        max-width: none;
        min-width: 0;
    }
}


/* rsi-handle-profile-1 */
.member-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-panel {
    margin-top: 18px;
    padding-bottom: 28px;
}

.profile-grid {
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(320px, 1fr);
    gap: 18px;
    padding: 20px;
}

.profile-card {
    border: 1px solid var(--line-soft);
    background: rgba(4, 8, 10, .72);
    padding: 18px;
    clip-path: polygon(0 0, 96% 0, 100% 9%, 100% 100%, 4% 100%, 0 91%);
}

.profile-card h2 {
    margin: 0 0 16px;
    font-family: "Zero Prime", "Electrolize", "Segoe UI", sans-serif;
    color: #e5eaec;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.profile-card dl {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px 14px;
    margin: 0;
}

.profile-card dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.profile-card dd {
    margin: 0;
    color: var(--text);
}

.profile-form {
    display: grid;
    gap: 14px;
}

.profile-hint {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.profile-status,
.profile-errors {
    margin: 18px 20px 0;
    padding: 12px 14px;
    border: 1px solid rgba(78, 217, 130, .42);
    background: rgba(24, 83, 46, .18);
    color: #a9e8bd;
}

.profile-errors {
    border-color: rgba(224, 0, 0, .55);
    background: rgba(60, 0, 0, .42);
}

.profile-rsi-link {
    display: inline-flex;
    margin-top: 14px;
    color: #df535a;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-decoration: none;
}

.profile-rsi-link:hover {
    color: #fff;
    text-shadow: 0 0 14px rgba(224, 0, 0, .72);
}

.profile-overlay-card {
    grid-column: 1 / -1;
    display: grid;
    gap: 18px;
}

.profile-overlay-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(126, 148, 153, .28);
}

.profile-overlay-heading h2 {
    margin-bottom: 0;
}

.profile-card-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.profile-overlay-status {
    flex: 0 0 auto;
    max-width: 360px;
    color: #76dc8e;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
    text-align: right;
    text-transform: uppercase;
}

.profile-overlay-status.is-error {
    color: #ff6572;
}

.profile-overlay-switches {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-block: 1px solid rgba(126, 148, 153, .3);
}

.profile-overlay-switch {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-height: 72px;
    padding: 12px 16px;
    border-right: 1px solid rgba(126, 148, 153, .24);
    cursor: pointer;
}

.profile-overlay-switch:last-child {
    border-right: 0;
}

.profile-overlay-switch:hover {
    background: rgba(224, 0, 0, .065);
}

.profile-overlay-switch span,
.profile-overlay-range > span:first-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.profile-overlay-switch strong,
.profile-overlay-range strong {
    color: var(--text);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.profile-overlay-switch small,
.profile-overlay-range small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

.profile-overlay-options {
    display: grid;
    grid-template-columns: minmax(320px, 760px) auto;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.profile-overlay-range {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.5fr);
    align-items: center;
    gap: 18px;
}

.profile-overlay-range-control {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 56px;
    align-items: center;
    gap: 12px;
}

.profile-overlay-range input {
    width: 100%;
    accent-color: #e00000;
}

.profile-overlay-range output {
    color: #d2a743;
    font-size: 12px;
    font-weight: 950;
    text-align: right;
}

.profile-overlay-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.profile-overlay-download,
.profile-overlay-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding-inline: 18px;
    border: 1px solid rgba(227, 26, 37, .78);
    background: rgba(227, 26, 37, .08);
    color: var(--text);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .06em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.profile-overlay-download {
    border-color: rgba(224, 0, 0, .82);
    background: rgba(224, 0, 0, .13);
    color: #f1f3f4;
}

.profile-overlay-download:hover,
.profile-overlay-download:focus-visible {
    border-color: #ff313b;
    color: #fff;
    box-shadow: inset 0 0 16px rgba(224, 0, 0, .16);
    text-shadow: 0 0 12px rgba(224, 0, 0, .72);
}

.profile-radio-priority-card {
    grid-column: 1 / -1;
    display: grid;
    gap: 18px;
}

.profile-radio-settings-panel {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(126, 148, 153, .28);
    border-left: 2px solid rgba(224, 0, 0, .82);
    background: rgba(0, 0, 0, .2);
}

.profile-radio-settings-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.profile-radio-settings-heading > div {
    display: grid;
    gap: 3px;
}

.profile-radio-settings-heading h3 {
    margin: 0;
    color: #eef1f2;
    font-family: var(--font-display, var(--font-tech, sans-serif));
    font-size: 18px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.profile-radio-settings-heading > small {
    max-width: 360px;
    color: #8b969c;
    font-size: 10px;
    line-height: 1.4;
    text-align: right;
    text-transform: uppercase;
}

.profile-radio-settings-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.profile-radio-settings-actions > button {
    min-height: 36px;
    padding-inline: 14px;
    border: 1px solid rgba(224, 0, 0, .7);
    background: rgba(224, 0, 0, .08);
    color: #e9edef;
    font-family: var(--font-tech, sans-serif);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
}

.profile-radio-settings-actions > button[aria-busy="true"] {
    opacity: .55;
    pointer-events: none;
}

.profile-radio-device-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.profile-radio-device-grid label {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.profile-radio-device-grid label > span {
    color: #8f999e;
    font-family: var(--font-tech, sans-serif);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.profile-radio-device-grid select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 42px 0 13px;
    border: 1px solid rgba(126, 148, 153, .36);
    border-radius: 0;
    background-color: rgba(3, 7, 9, .92);
    color: #e9edef;
    font-family: var(--font-body, sans-serif);
    font-size: 12px;
}

.profile-radio-range-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid rgba(126, 148, 153, .22);
}

.profile-radio-setting-range {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 13px 14px;
}

.profile-radio-setting-range + .profile-radio-setting-range {
    border-left: 1px solid rgba(126, 148, 153, .22);
}

.profile-radio-setting-range > span {
    display: grid;
    gap: 3px;
}

.profile-radio-setting-range > span:last-child {
    grid-template-columns: minmax(90px, 1fr) 54px;
    align-items: center;
    gap: 10px;
}

.profile-radio-setting-range strong {
    color: #e9edef;
    font-family: var(--font-tech, sans-serif);
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.profile-radio-setting-range small {
    color: #7f8a90;
    font-size: 10px;
    line-height: 1.35;
}

.profile-radio-setting-range input {
    width: 100%;
    min-width: 0;
    margin: 0;
    accent-color: #e00000;
}

.profile-radio-setting-range output {
    color: #e8aa3c;
    font-size: 11px;
    font-weight: 950;
    text-align: right;
}

.profile-radio-switches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(126, 148, 153, .2);
}

.profile-radio-switches .vcg-checkbox {
    min-height: 54px;
    padding: 10px 12px;
}

.profile-radio-switches .vcg-checkbox + .vcg-checkbox {
    border-left: 1px solid rgba(126, 148, 153, .2);
}

.profile-radio-switches .vcg-checkbox > span:last-child {
    display: grid;
    gap: 2px;
}

.profile-radio-switches strong {
    color: #e9edef;
    font-size: 10px;
    text-transform: uppercase;
}

.profile-radio-switches small {
    color: #7f8a90;
    font-size: 10px;
}

.profile-radio-global-bindings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.profile-radio-global-binding {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, .7fr);
    align-items: center;
    gap: 14px;
    min-width: 0;
    min-height: 62px;
    padding: 9px 11px;
    border: 1px solid rgba(126, 148, 153, .22);
    background: rgba(0, 0, 0, .25);
}

.profile-radio-global-binding:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.profile-radio-global-binding > div:first-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.profile-radio-global-binding strong {
    color: #e9edef;
    font-family: var(--font-tech, sans-serif);
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.profile-radio-global-binding small {
    color: #7f8a90;
    font-size: 9px;
    line-height: 1.35;
}

.profile-radio-global-binding > div:last-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 6px;
}

.profile-radio-global-binding button {
    min-width: 0;
    min-height: 34px;
    overflow: hidden;
    padding: 0 10px;
    border: 1px solid rgba(224, 0, 0, .56);
    background: rgba(224, 0, 0, .06);
    color: #dce2e4;
    font-family: var(--font-tech, sans-serif);
    font-size: 9px;
    font-weight: 900;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.profile-radio-global-binding button.is-listening {
    border-color: #e8aa3c;
    color: #e8aa3c;
    box-shadow: inset 0 0 16px rgba(232, 170, 60, .08);
}

.profile-radio-global-binding button.is-clear {
    padding: 0;
    color: #ff6d74;
}

.profile-radio-global-binding button:disabled {
    opacity: .32;
    cursor: default;
}

.profile-radio-settings-note {
    margin: 0;
    color: #7f8a90;
    font-size: 10px;
    line-height: 1.45;
}

.profile-radio-priority-card [data-radio-settings-status][data-tone="error"] {
    border-color: rgba(255, 74, 86, .55);
    color: #ff7b84;
}

.profile-radio-priority-card [data-radio-settings-status][data-tone="working"] {
    border-color: rgba(232, 170, 60, .5);
    color: #e8aa3c;
}

.profile-radio-priority-channel {
    display: grid;
    gap: 3px;
    min-width: 220px;
    text-align: right;
}

.profile-radio-priority-channel small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.profile-radio-priority-channel strong {
    color: #e8aa3c;
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-shadow: 0 0 13px rgba(232, 170, 60, .28);
}

.profile-radio-priority-form {
    display: grid;
    grid-template-columns: minmax(360px, .9fr) minmax(360px, 1.1fr);
    gap: 18px 28px;
}

.profile-radio-priority-mode {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    margin: 0;
    padding: 0;
    border: 1px solid rgba(126, 148, 153, .3);
}

.profile-radio-priority-mode legend {
    padding: 0 8px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.profile-radio-priority-mode label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 10px 14px;
    cursor: pointer;
}

.profile-radio-priority-mode label + label {
    border-left: 1px solid rgba(126, 148, 153, .24);
}

.profile-radio-priority-mode label:has(input:checked) {
    background: rgba(232, 170, 60, .07);
    box-shadow: inset 0 0 16px rgba(232, 170, 60, .07);
}

.profile-radio-priority-mode input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #e8aa3c;
}

.profile-radio-priority-mode span,
.profile-radio-priority-level > span:first-child {
    display: grid;
    gap: 3px;
}

.profile-radio-priority-mode strong,
.profile-radio-priority-level strong {
    color: var(--text);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.profile-radio-priority-mode small,
.profile-radio-priority-level small {
    color: var(--muted);
    font-size: 10px;
}

.profile-radio-priority-level {
    display: grid;
    grid-template-columns: minmax(190px, .8fr) minmax(220px, 1.2fr);
    align-items: center;
    gap: 18px;
}

.profile-radio-priority-level-control {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 54px;
    align-items: center;
    gap: 12px;
}

.profile-radio-priority-level input {
    width: 100%;
    accent-color: #e8aa3c;
}

.profile-radio-priority-level output {
    color: #e8aa3c;
    font-size: 12px;
    font-weight: 950;
    text-align: right;
}

.profile-radio-priority-card.is-priority-muted .profile-radio-priority-level {
    opacity: .46;
}

.profile-radio-priority-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(126, 148, 153, .24);
}

.profile-radio-priority-actions p {
    max-width: 660px;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.profile-radio-priority-actions > span {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-radio-priority-actions a,
.profile-radio-priority-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding-inline: 18px;
    border: 1px solid rgba(232, 170, 60, .6);
    background: rgba(232, 170, 60, .06);
    color: #e8aa3c;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .05em;
    text-decoration: none;
    text-transform: uppercase;
}

.profile-radio-priority-actions button {
    border-color: rgba(227, 26, 37, .78);
    background: rgba(227, 26, 37, .08);
    color: var(--text);
}

@media (max-width: 900px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .profile-card dl {
        grid-template-columns: 1fr;
    }

    .profile-overlay-switches {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }

    .profile-overlay-switch:nth-child(2) {
        border-right: 0;
    }

    .profile-overlay-switch:nth-child(even) {
        border-right: 0;
    }

    .profile-overlay-switch:nth-child(-n + 4) {
        border-bottom: 1px solid rgba(126, 148, 153, .24);
    }

    .profile-overlay-options,
    .profile-overlay-range {
        grid-template-columns: 1fr;
    }

    .profile-overlay-actions {
        justify-self: start;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .profile-radio-priority-form,
    .profile-radio-priority-level {
        grid-template-columns: 1fr;
    }

    .profile-radio-range-list,
    .profile-radio-global-bindings {
        grid-template-columns: 1fr;
    }

    .profile-radio-setting-range + .profile-radio-setting-range {
        border-top: 1px solid rgba(126, 148, 153, .22);
        border-left: 0;
    }

    .profile-radio-global-binding:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .profile-radio-priority-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-radio-priority-actions > span {
        flex-wrap: wrap;
    }
}

@media (max-width: 560px) {
    .profile-radio-settings-heading,
    .profile-radio-global-binding {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .profile-radio-settings-heading {
        display: grid;
    }

    .profile-radio-settings-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .profile-radio-settings-heading > small {
        text-align: left;
    }

    .profile-radio-device-grid,
    .profile-radio-switches {
        grid-template-columns: 1fr;
    }

    .profile-radio-switches .vcg-checkbox + .vcg-checkbox {
        border-top: 1px solid rgba(126, 148, 153, .2);
        border-left: 0;
    }
    .profile-overlay-heading {
        display: grid;
    }

    .profile-overlay-status {
        max-width: none;
        text-align: left;
    }

    .profile-overlay-switches {
        grid-template-columns: 1fr;
    }

    .profile-overlay-switch,
    .profile-overlay-switch:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid rgba(126, 148, 153, .24);
    }

    .profile-overlay-switch:last-child {
        border-bottom: 0;
    }

    .profile-overlay-range-control {
        grid-template-columns: minmax(0, 1fr) 52px;
    }

    .profile-overlay-actions,
    .profile-overlay-download,
    .profile-overlay-reset {
        width: 100%;
    }
}


/* admin-section-roster-1 */
.roster-controlbar {
    grid-template-columns: minmax(230px, 320px) minmax(230px, 320px) minmax(260px, 390px) 1fr auto;
}

.ship-picker-field,
.role-filter-field {
    padding: 10px 14px;
}

.role-filter-hidden {
    display: none !important;
}

.admin-section-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.admin-section-content {
    display: grid;
    grid-template-columns: inherit;
    gap: inherit;
    min-width: 0;
}

.admin-section-sidebar {
    position: sticky;
    top: 16px;
    display: grid;
    gap: 10px;
    padding: 14px;
}

.admin-section-sidebar a {
    display: block;
    padding: 14px 12px;
    color: #aeb5bb;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 950;
    letter-spacing: .08em;
    background: rgba(0,0,0,.42);
    border: 1px solid rgba(255,255,255,.10);
    clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
}

.admin-section-sidebar a:hover,
.admin-section-sidebar a.active {
    color: #fff;
    border-color: var(--red);
    box-shadow: inset 0 -3px 0 var(--red), 0 0 18px rgba(224,0,0,.32);
}

.admin-section-hidden {
    display: none !important;
}

.admin-placeholder-page {
    margin: 18px;
}

@media (max-width: 1100px) {
    .roster-controlbar,
    .subbar {
        grid-template-columns: 1fr;
    }

    .admin-section-layout {
        grid-template-columns: 1fr;
    }

    .admin-section-sidebar {
        position: relative;
        top: auto;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}


/* roles-are-columns-1 */
.role-column-hidden {
    display: none !important;
}

.role-column-filtered {
    min-width: 560px;
}

.role-column-filtered .role-head-cell,
.role-column-filtered .role-cell {
    width: 300px;
}

.roster-controlbar {
    grid-template-columns: minmax(240px, 330px) minmax(280px, 430px) 1fr auto;
}

.role-column-field,
.ship-picker-field {
    padding: 10px 14px;
}

.site-header > .member-card {
    grid-area: status;
}

.admin-section-layout {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.admin-section-sidebar {
    position: sticky;
    top: 16px;
    z-index: 20;
    width: 72px;
    min-height: 0;
    display: grid;
    gap: 10px;
    padding: 10px;
    overflow: visible;
    transition: width .18s ease, box-shadow .18s ease;
}

.admin-section-sidebar:hover {
    width: 250px;
    box-shadow: 0 0 30px rgba(0,0,0,.42), 0 0 18px rgba(224,0,0,.18);
}

.admin-section-sidebar a {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 10px;
    color: #aeb5bb;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 950;
    letter-spacing: .08em;
    background: rgba(0,0,0,.42);
    border: 1px solid rgba(255,255,255,.10);
    clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
    white-space: nowrap;
}

.admin-section-code {
    display: grid;
    place-items: center;
    width: 36px;
    height: 30px;
    color: var(--cyan);
    border: 1px solid rgba(33,234,255,.35);
    background: rgba(0,0,0,.52);
    font-size: 12px;
}

.admin-section-label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width .18s ease, opacity .18s ease;
}

.admin-section-sidebar:hover .admin-section-label {
    max-width: 180px;
    opacity: 1;
}

.admin-section-sidebar a:hover,
.admin-section-sidebar a.active {
    color: #fff;
    border-color: var(--red);
    box-shadow: inset 0 -3px 0 var(--red), 0 0 18px rgba(224,0,0,.32);
}

.admin-section-hidden {
    display: none !important;
}

.admin-section-content {
    min-width: 0;
}

@media (max-width: 1100px) {
    .roster-controlbar,
    .subbar {
        grid-template-columns: 1fr;
    }

    .admin-section-layout {
        grid-template-columns: 1fr;
    }

    .admin-section-sidebar,
    .admin-section-sidebar:hover {
        position: relative;
        top: auto;
        width: auto;
        grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
    }

    .admin-section-sidebar .admin-section-label {
        max-width: none;
        opacity: 1;
    }
}


/* admin-members-width-1 */
.admin-section-layout {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    width: 100%;
}

.admin-section-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
    min-width: 0;
}

.admin-section-content > .panel {
    width: 100%;
    min-width: 0;
}

.admin-section-sidebar {
    width: 72px;
}

.admin-section-sidebar:hover {
    width: 265px;
}

.admin-section-sidebar a {
    grid-template-columns: 42px minmax(0, 1fr);
}

.admin-members-table small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
}

.admin-members-table input {
    min-width: 160px;
}

.mono-cell {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 11px;
    color: var(--muted);
}

.admin-member-note {
    margin: 16px 18px 0;
    padding: 12px 14px;
    border: 1px solid rgba(33, 234, 255, .28);
    background: rgba(0, 24, 30, .32);
    color: var(--muted);
    line-height: 1.55;
}

@media (max-width: 1100px) {
    .admin-section-layout {
        grid-template-columns: 1fr !important;
    }

    .admin-section-sidebar,
    .admin-section-sidebar:hover {
        width: auto;
    }
}


/* roles-hide-ship-sidebar-1 */
.role-column-hidden,
.role-matrix .role-column-hidden {
    display: none !important;
}

.role-column-filtered {
    min-width: 620px !important;
}

.role-column-filtered .role-head-cell,
.role-column-filtered .role-cell {
    width: 300px;
}

.admin-sidebar-ship-form {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 54px;
    margin: 0 0 8px;
    padding: 8px 10px;
    border: 1px solid rgba(33, 234, 255, .28);
    background: rgba(0, 18, 24, .44);
    clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
}

.admin-ship-code {
    color: #fff;
    border-color: rgba(224, 0, 0, .7);
}

.admin-sidebar-ship-label {
    display: grid;
    gap: 5px;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width .18s ease, opacity .18s ease;
}

.admin-section-sidebar:hover .admin-sidebar-ship-label {
    max-width: 190px;
    opacity: 1;
}

.admin-sidebar-ship-label span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.admin-sidebar-ship-label select {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 12px;
}

.admin-current-ship-strip {
    display: flex;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(33, 234, 255, .22);
    background: linear-gradient(90deg, rgba(0, 26, 34, .52), rgba(4, 8, 10, .62));
    color: var(--text);
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.admin-current-ship-strip span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.admin-current-ship-strip strong {
    color: var(--cyan);
    font-family: "Zero Prime", "Electrolize", "Segoe UI", sans-serif;
    font-size: 18px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-current-ship-strip small {
    color: var(--muted);
}

@media (max-width: 1100px) {
    .admin-sidebar-ship-label {
        max-width: none;
        opacity: 1;
    }

    .admin-sidebar-ship-form {
        grid-template-columns: 42px minmax(180px, 1fr);
    }

    .admin-current-ship-strip {
        flex-wrap: wrap;
    }
}


/* role-dropdown-marker-visible-1 */
.role-matrix [hidden],
.role-matrix .role-column-hidden {
    display: none !important;
    visibility: collapse !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

.role-column-filtered {
    min-width: 620px !important;
}

.role-column-filtered .role-head-cell,
.role-column-filtered .role-cell {
    width: 300px;
}

.marker.all-visible {
    opacity: .92;
    filter: saturate(1.15);
    box-shadow: 0 0 10px rgba(33, 234, 255, .18);
}

.marker.all-visible:hover {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 0 16px var(--marker-color), 0 0 30px rgba(33, 234, 255, .22);
}


/* role-filter-last-active-1 */
.role-matrix [hidden],
.role-matrix .role-column-hidden {
    display: none !important;
    visibility: collapse !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
    overflow: hidden !important;
}

.role-column-filtered {
    min-width: 620px !important;
}

.role-column-filtered .role-head-cell,
.role-column-filtered .role-cell {
    width: 300px;
}

.marker.all-visible {
    opacity: .92;
    filter: saturate(1.15);
    box-shadow: 0 0 10px rgba(33, 234, 255, .18);
}

.marker.all-visible:hover {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 0 16px var(--marker-color), 0 0 30px rgba(33, 234, 255, .22);
}


/* role-header-sync-1 */
.role-matrix [hidden],
.role-matrix .role-column-hidden {
    display: none !important;
    visibility: collapse !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
    overflow: hidden !important;
}

.role-matrix.role-column-filtered {
    table-layout: auto;
    min-width: 620px !important;
}

.role-matrix.role-column-filtered .position-col,
.role-matrix.role-column-filtered .position-head {
    width: 380px;
}

.role-matrix.role-column-filtered .role-group-head,
.role-matrix.role-column-filtered .role-head-cell,
.role-matrix.role-column-filtered .role-cell {
    width: auto;
    text-align: left;
}

.role-matrix.role-column-filtered .role-group-head {
    text-align: center;
}


/* equipment-profiles-1 */
.equipment-profile-admin-grid,
.equipment-profile-page-grid {
    display: grid;
    gap: 18px;
    padding: 18px;
}

.equipment-profile-admin-card,
.equipment-profile-public-card,
.equipment-profile-roster-card {
    border: 1px solid var(--line-soft);
    background: rgba(4, 8, 10, .72);
    padding: 16px;
    clip-path: polygon(0 0, 97% 0, 100% 12%, 100% 100%, 3% 100%, 0 88%);
}

.equipment-profile-admin-card {
    display: grid;
    gap: 12px;
}

.admin-inline-delete-form {
    margin: 0;
    justify-self: start;
}

.equipment-item-wrap {
    margin-top: 8px;
}

.equipment-item-table input {
    min-width: 110px;
}

.equipment-profile-roster-card {
    margin-top: 14px;
}

.equipment-profile-roster-card h3,
.equipment-profile-public-card h2 {
    margin: 0 0 10px;
    color: var(--cyan);
    font-family: "Zero Prime", "Electrolize", "Segoe UI", sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.equipment-profile-roster-title {
    color: #fff;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.equipment-profile-roster-card p,
.equipment-profile-public-card p {
    margin: 8px 0 10px;
    color: var(--muted);
    line-height: 1.45;
}

.equipment-profile-roster-card ul,
.equipment-profile-public-card ul {
    list-style: none;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.equipment-profile-roster-card li,
.equipment-profile-public-card li {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 8px;
    align-items: baseline;
    padding: 8px 10px;
    border: 1px solid rgba(33, 234, 255, .16);
    background: rgba(0, 18, 24, .28);
}

.equipment-profile-roster-card li span,
.equipment-profile-public-card li small {
    grid-column: 2;
    color: var(--muted);
}

.equipment-profile-roster-empty {
    color: var(--muted);
}

.equipment-profile-public-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: baseline;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 12px;
    padding-bottom: 10px;
}

.equipment-profile-public-head span {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
}

.equipment-profile-page-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}


/* equipment-slots-section-stay-1 */
.equipment-slot-table {
    min-width: 1180px;
}

.equipment-slot-table input[type="file"] {
    min-width: 180px;
}

.equipment-slot-label {
    color: var(--cyan);
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
}

.equipment-slot-preview,
.equipment-slot-thumb,
.equipment-profile-image-preview img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border: 1px solid rgba(33, 234, 255, .28);
    background: rgba(0,0,0,.5);
}

.equipment-profile-image-preview {
    justify-self: start;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.28);
}

.equipment-profile-roster-card li,
.equipment-profile-public-card li {
    grid-template-columns: 58px 50px 1fr;
}

.equipment-profile-roster-card li .equipment-slot-thumb,
.equipment-profile-public-card li .equipment-slot-thumb {
    grid-row: span 2;
}

.equipment-profile-roster-card li span,
.equipment-profile-public-card li small {
    grid-column: 3;
}


/* layout-links-taskmatrix-1 */
.admin-section-label {
    font-size: 9px !important;
    letter-spacing: .045em !important;
}

.admin-section-sidebar:hover .admin-section-label {
    max-width: 205px !important;
}

.equipment-bottom-panel {
    margin-top: 18px;
}

.equipment-profile-roster-card--bottom {
    margin-top: 0;
    padding: 18px 22px 24px;
    border: 0;
    background: transparent;
    clip-path: none !important;
    overflow: visible !important;
}

.equipment-profile-roster-card--bottom .equipment-profile-roster-title {
    margin-bottom: 12px;
    font-size: 20px;
}

.equipment-profile-roster-card--bottom ul {
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 12px;
}

.equipment-profile-roster-card--bottom li {
    min-height: 78px;
    overflow: visible;
}

.equipment-profile-roster-card--bottom p {
    max-width: 1100px;
}

.equipment-profile-admin-card,
.equipment-profile-public-card {
    clip-path: none !important;
    overflow: visible !important;
}

.equipment-profile-admin-card button,
.equipment-slot-form button,
.admin-inline-delete-form button {
    clip-path: none !important;
    min-width: 170px;
    padding-left: 22px;
    padding-right: 22px;
    line-height: 1.25;
    overflow: visible;
}

.equipment-slot-form {
    overflow: visible;
    padding-bottom: 12px;
}

.equipment-profile-admin-card {
    padding: 18px 20px 22px !important;
}

.equipment-profile-public-card li {
    overflow: visible;
}

.task-matrix-horizontal-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.task-matrix-horizontal-table {
    min-width: 980px;
    table-layout: fixed;
}

.task-matrix-horizontal-table .task-slot-head,
.task-matrix-horizontal-table .task-slot-label {
    width: 110px;
    min-width: 110px;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.task-matrix-horizontal-table .task-group-head {
    text-align: center;
    color: var(--cyan);
    background: rgba(0, 34, 42, .28);
}

.task-matrix-horizontal-table .task-role-head {
    min-width: 210px;
    width: 210px;
    color: var(--text);
    text-align: center;
}

.task-matrix-horizontal-table .task-input-cell {
    min-width: 210px;
    width: 210px;
    vertical-align: top;
}

.task-matrix-horizontal-table textarea {
    min-height: 56px;
    resize: vertical;
    line-height: 1.35;
    font-size: 12px;
}

.position-task-matrix-horizontal[hidden] {
    display: none !important;
}


/* revert-before-missioncards-1 */
.role-matrix.role-column-filtered{
    width:auto!important;
    min-width:514px!important;
    table-layout:fixed!important;
}
.role-matrix.role-column-filtered .position-head,
.role-matrix.role-column-filtered .position-col{
    width:270px!important;
    min-width:270px!important;
    max-width:270px!important;
}
.role-matrix.role-column-filtered .role-group-head,
.role-matrix.role-column-filtered .mode-head,
.role-matrix.role-column-filtered .role-head-cell:not(.position-head),
.role-matrix.role-column-filtered .task-cell:not(.role-column-hidden){
    width:244px!important;
    min-width:244px!important;
    max-width:244px!important;
}
.role-matrix .task-cell{
    position:static!important;
    left:auto!important;
}
.ship-overview-controlbar{
    grid-template-columns:minmax(240px,360px) minmax(240px,360px) 1fr;
}
.ship-overview-map-panel{
    margin-top:18px;
}
.ship-overview-map-wrap{
    position:relative;
    padding:18px;
    min-height:780px;
}
.ship-overview-stage{
    min-height:760px;
    max-height:none;
}
.ship-overview-stage img{
    width:100%;
    max-height:76vh;
    object-fit:contain;
}
.ship-overview-legend{
    position:absolute;
    right:34px;
    top:34px;
    min-width:230px;
    background:rgba(4,8,10,.80);
}
.admin-bulk-save-button,
.admin-group-save-button{
    border:1px solid rgba(224,0,0,.55);
    background:rgba(224,0,0,.12);
    color:#fff;
    font-weight:900;
    letter-spacing:.04em;
    cursor:pointer;
    border-radius:8px;
    padding:8px 12px;
}
.admin-group-save-button{
    margin-left:auto;
    padding:5px 9px;
    font-size:11px;
}
.marker-type-section summary{
    display:flex;
    align-items:center;
    gap:12px;
}
.admin-bulk-save-button:disabled,
.admin-group-save-button:disabled{
    opacity:.55;
    cursor:wait;
}


/* overview-links-style-1 */
.overview-link-section {
    margin-top: 34px;
}

.overview-link-section:first-of-type {
    margin-top: 18px;
}

.overview-link-section .link-section-title {
    margin: 0 0 16px 64px !important;
    padding: 0 0 0 18px;
    color: rgba(241,244,246,.88) !important;
    border-left: 3px solid var(--red);
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: .105em;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(255,255,255,.10);
}

.overview-link-section .link-grid {
    padding-left: 64px;
}

@media (max-width: 900px) {
    .overview-link-section .link-section-title {
        margin-left: 22px !important;
    }

    .overview-link-section .link-grid {
        padding-left: 22px;
    }
}


/* equipment-heading-style-1
   Ausrüstungsprofil-Überschriften konsistent: kein Cyan/Blau mehr.
*/
.equipment-profile-public-head h2,
.equipment-profile-card h2,
.equipment-profile-card h3,
.equipment-profile-admin-card h2,
.equipment-profile-admin-card h3,
.equipment-profile-title,
.equipment-page .equipment-profile-public-head h2,
.equipment-page .equipment-profile-card h2,
.equipment-page .equipment-profile-card h3 {
    color: rgba(241, 244, 246, .94) !important;
    text-shadow: 0 0 12px rgba(255,255,255,.10) !important;
}

.equipment-profile-public-head h2::before,
.equipment-profile-card h2::before,
.equipment-profile-card h3::before {
    border-color: var(--red) !important;
}


/* quartier-marschrolle-1 */
.role-matrix .quarter-head {
    position: sticky;
    left: 270px;
    z-index: 7 !important;
    width: 170px;
    min-width: 170px;
    max-width: 170px;
}

.role-matrix .quarter-col {
    position: sticky;
    left: 270px;
    z-index: 3;
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    padding: 12px 10px;
    background: rgba(8, 13, 15, .98);
    text-align: center;
    vertical-align: middle;
}

.role-matrix tbody tr:nth-child(even) .quarter-col {
    background: rgba(14, 18, 21, .98);
}

.role-matrix tbody tr.role-hover .quarter-col,
.role-matrix tbody tr.role-selected .quarter-col {
    background: rgba(0, 46, 54, .95);
    box-shadow: inset 0 1px 0 rgba(33,234,255,.18), inset 0 -1px 0 rgba(33,234,255,.18);
}

.quarter-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px 9px;
    border-left: 2px solid var(--red);
    background: rgba(255,255,255,.045);
    color: rgba(241,244,246,.88);
    border-radius: 8px;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .035em;
}

.role-matrix.role-column-filtered{
    min-width:684px!important;
}

.role-matrix.role-column-filtered .quarter-head,
.role-matrix.role-column-filtered .quarter-col{
    width:170px!important;
    min-width:170px!important;
    max-width:170px!important;
}


/* roster-rooms-1 */
.ship-stage,
.ship-overview-stage {
    position: relative;
}
.room-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.room-shape {
    pointer-events: all;
    cursor: help;
    transition: fill-opacity .12s ease, stroke-width .12s ease;
}
.room-shape:hover {
    fill-opacity: .34;
    stroke-width: .9;
}
.marker-layer {
    z-index: 4;
}


/* map-rooms-layout-hotfix-1
   Rollenplan/Schiffübersicht: Raum-SVG darf die ursprüngliche Schiff-Zentrierung nicht aufheben.
*/
.ship-map-wrap .ship-stage:not(.ship-overview-stage) {
    position: absolute !important;
    left: 42% !important;
    top: 52% !important;
    transform: translate(-50%, -50%) !important;
    width: min(58%, 390px) !important;
    max-width: 390px !important;
    height: auto !important;
    aspect-ratio: 768 / 1500 !important;
    margin: 0 !important;
}

.ship-map-wrap .ship-stage:not(.ship-overview-stage) > img,
.ship-map-wrap .ship-stage:not(.ship-overview-stage) #shipMapImage {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    transform: none !important;
}

.ship-overview-map-wrap .ship-overview-stage {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: min(92%, 760px) !important;
    max-width: 760px !important;
    height: 760px !important;
    min-height: 760px !important;
    aspect-ratio: 768 / 1500 !important;
    margin: 0 auto !important;
}

.ship-overview-map-wrap .ship-overview-stage > img,
.ship-overview-map-wrap .ship-overview-stage #shipMapImage {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    transform: none !important;
}

.room-layer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
}

.marker-layer {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
}


/* map-label-columns-1
   Marker-/Raum-Beschriftungen mit HTML-Textspalten außerhalb der Schiffsgrafik.
*/
.ship-panel,
.ship-map-wrap,
.ship-overview-map-panel,
.ship-overview-map-wrap {
    overflow: visible !important;
}

.ship-map-wrap {
    min-height: 710px;
}

.ship-map-wrap .ship-stage:not(.ship-overview-stage) {
    left: 50% !important;
    width: min(42%, 360px) !important;
}

.ship-overview-map-wrap .ship-overview-stage,
.ship-overview-stage {
    width: min(48%, 520px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.ship-stage {
    overflow: visible !important;
}

.map-label-layer {
    position: absolute;
    inset: 0;
    z-index: 9;
    overflow: visible;
    pointer-events: none;
}

.map-label-line-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.map-label-line {
    stroke-width: 0.62;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    opacity: .98;
    filter: drop-shadow(0 0 3px rgba(0,0,0,.96)) drop-shadow(0 0 6px rgba(0,0,0,.72));
}

.map-label-html {
    position: absolute;
    min-width: 138px;
    max-width: 220px;
    color: rgba(241,244,246,.98);
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: 11px;
    line-height: 1.12;
    letter-spacing: .025em;
    white-space: normal;
    text-shadow:
        0 1px 1px rgba(0,0,0,.96),
        0 0 4px rgba(0,0,0,.90),
        0 0 8px rgba(0,0,0,.75);
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.map-label-html.left {
    left: -12.5%;
    transform: translate(-100%, -50%);
    text-align: right;
}

.map-label-html.right {
    left: 112.5%;
    transform: translateY(-50%);
    text-align: left;
}

.map-label-html::before {
    content: "";
    display: block;
    height: 2px;
    width: 100%;
    margin-bottom: -1px;
    background: var(--leader-color, rgba(241,244,246,.96));
    opacity: .95;
    box-shadow: 0 0 4px rgba(0,0,0,.70);
}

.map-label-mode-tooltip .map-label-layer,
.map-label-mode-tooltip .map-label-line-svg,
.map-label-mode-tooltip .map-label-html {
    display: none !important;
}

.map-label-mode-leader-always .marker-label,
.map-label-mode-leader-hover .marker-label {
    display: none !important;
}

.map-label-mode-tooltip .marker.tooltip-enabled:hover .marker-label,
.map-label-mode-tooltip .marker:hover .marker-label {
    display: block;
}

.legend-label-mode-control {
    display: grid;
    gap: 6px;
    margin: 10px 0 12px;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    border-radius: 10px;
}

.legend-label-mode-control span {
    color: rgba(241,244,246,.74);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 900;
}

.legend-label-mode-control select {
    width: 100%;
    min-height: 32px;
    color: rgba(241,244,246,.92);
    background: rgba(0,0,0,.44);
    border: 1px solid rgba(214,221,227,.22);
    border-radius: 7px;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif;
    font-size: 12px;
}

@media (max-width: 1250px) {
    .ship-map-wrap .ship-stage:not(.ship-overview-stage),
    .ship-overview-map-wrap .ship-overview-stage,
    .ship-overview-stage {
        width: min(54%, 420px) !important;
    }

    .map-label-html {
        font-size: 10px;
        max-width: 170px;
    }
}



/* map-label-shipoverview-only-1
   Strichbeschriftungen nur noch in der Schiffsübersicht.
   Rollenplan wird wieder kompakt/groß dargestellt.
*/
.ship-map-wrap .ship-stage:not(.ship-overview-stage) {
    position: absolute !important;
    left: 42% !important;
    top: 52% !important;
    transform: translate(-50%, -50%) !important;
    width: min(58%, 390px) !important;
    max-width: 390px !important;
    height: auto !important;
    aspect-ratio: 768 / 1500 !important;
    margin: 0 !important;
}

.ship-map-wrap .ship-stage:not(.ship-overview-stage) .map-label-layer,
.ship-map-wrap .ship-stage:not(.ship-overview-stage) .map-label-line-svg,
.ship-map-wrap .ship-stage:not(.ship-overview-stage) .map-label-html {
    display: none !important;
}

.ship-overview-map-wrap {
    overflow: visible !important;
    min-height: 860px !important;
    padding-left: clamp(140px, 18vw, 280px) !important;
    padding-right: clamp(140px, 18vw, 280px) !important;
}

.ship-overview-map-wrap .ship-overview-stage,
.ship-overview-stage {
    width: min(52%, 560px) !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
}

.ship-stage:not(.ship-overview-stage) .map-label-html,
.ship-stage:not(.ship-overview-stage) .map-label-line-svg {
    display: none !important;
}

.map-label-html::before {
    content: none !important;
    display: none !important;
}

.map-label-html {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    color: rgba(241,244,246,.98) !important;
    text-shadow:
        0 1px 1px rgba(0,0,0,.96),
        0 0 4px rgba(0,0,0,.92),
        0 0 8px rgba(0,0,0,.74) !important;
}

.map-label-line {
    stroke-width: .82 !important;
    opacity: 1 !important;
    filter:
        drop-shadow(0 0 3px rgba(0,0,0,.98))
        drop-shadow(0 0 7px rgba(0,0,0,.78)) !important;
}

.ship-overview-stage .map-label-html.left {
    left: -15.5% !important;
    transform: translate(-100%, -50%) !important;
    text-align: right !important;
}

.ship-overview-stage .map-label-html.right {
    left: 115.5% !important;
    transform: translateY(-50%) !important;
    text-align: left !important;
}

.ship-map-wrap:not(.ship-overview-map-wrap) .legend-label-mode-control {
    display: none !important;
}


/* roster-quarter-filter-1
   Quartier wirkt wie normale Matrix-Information und kann separat gefiltert werden.
*/

/* rote Pillen-/Badge-Optik entfernen */
.role-matrix .quarter-col {
    text-align: left !important;
    vertical-align: top !important;
}

.role-matrix .quarter-label {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: rgba(214,221,227,.92) !important;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: .025em !important;
    text-align: left !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.65);
}

/* Gefilterte Rollenansicht: Quartier ausblenden, damit es sich wie eine einzelne Rollen-Spalte verhält. */
.role-matrix.role-column-filtered:not(.role-quarter-filtered) .quarter-head,
.role-matrix.role-column-filtered:not(.role-quarter-filtered) .quarter-col {
    display: none !important;
    visibility: collapse !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
}

/* Quartier-Filter: nur Position + Quartier sichtbar. */
.role-matrix.role-quarter-filtered {
    min-width: 520px !important;
}

.role-matrix.role-quarter-filtered .quarter-head,
.role-matrix.role-quarter-filtered .quarter-col {
    display: table-cell !important;
    visibility: visible !important;
    width: 244px !important;
    min-width: 244px !important;
    max-width: 244px !important;
}

.role-matrix.role-quarter-filtered .quarter-label {
    font-size: 13px !important;
}

/* Header im Quartier-Filter sauber halten */
.role-matrix.role-quarter-filtered thead tr:nth-child(2) {
    display: none !important;
}



/* ship-overview-large-45-1
   Schiffsübersicht:
   - Breite wird maximal genutzt
   - Höhe kommt automatisch aus dem Bild-Seitenverhältnis
   - keine künstliche max-height-Begrenzung
   - Labelspalten außerhalb des Bildes
*/
.ship-overview-map-panel {
    overflow: visible !important;
}

.ship-overview-map-wrap {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 22px clamp(180px, 21vw, 360px) 34px !important;
    overflow: visible !important;
}

.ship-overview-map-wrap .ship-overview-stage,
.ship-overview-stage {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: var(--ship-overview-aspect, 768 / 1500) !important;
    margin: 0 auto !important;
    overflow: visible !important;
}

.ship-overview-stage > img,
.ship-overview-stage #shipMapImage {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
}

.ship-overview-stage .room-layer,
.ship-overview-stage .marker-layer,
.ship-overview-stage .map-label-layer,
.ship-overview-stage .map-label-line-svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.ship-overview-stage .map-label-layer {
    z-index: 9 !important;
    overflow: visible !important;
    pointer-events: none !important;
}

.ship-overview-stage .map-label-line-svg {
    overflow: visible !important;
}

.ship-overview-stage .map-label-line {
    stroke-width: .86 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: 1 !important;
    filter:
        drop-shadow(0 0 3px rgba(0,0,0,.98))
        drop-shadow(0 0 7px rgba(0,0,0,.78)) !important;
}

.ship-overview-stage .map-label-html {
    position: absolute !important;
    min-width: 150px !important;
    max-width: 245px !important;
    color: rgba(241,244,246,.98) !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: 11px !important;
    line-height: 1.12 !important;
    letter-spacing: .025em !important;
    white-space: normal !important;
    text-shadow:
        0 1px 1px rgba(0,0,0,.96),
        0 0 4px rgba(0,0,0,.92),
        0 0 8px rgba(0,0,0,.74) !important;
}

.ship-overview-stage .map-label-html::before {
    content: none !important;
    display: none !important;
}

.ship-overview-stage .map-label-html.left {
    left: -20% !important;
    transform: translate(-100%, -50%) !important;
    text-align: right !important;
}

.ship-overview-stage .map-label-html.right {
    left: 120% !important;
    transform: translateY(-50%) !important;
    text-align: left !important;
}

.ship-overview-legend {
    z-index: 20 !important;
}

.ship-stage:not(.ship-overview-stage) .map-label-layer,
.ship-stage:not(.ship-overview-stage) .map-label-line-svg,
.ship-stage:not(.ship-overview-stage) .map-label-html {
    display: none !important;
}

@media (max-width: 1280px) {
    .ship-overview-map-wrap {
        padding-left: clamp(130px, 18vw, 240px) !important;
        padding-right: clamp(130px, 18vw, 240px) !important;
    }

    .ship-overview-stage .map-label-html {
        font-size: 10px !important;
        max-width: 185px !important;
    }

    .ship-overview-stage .map-label-html.left {
        left: -17% !important;
    }

    .ship-overview-stage .map-label-html.right {
        left: 117% !important;
    }
}




/* ship-overview-zoom-labels-1
   Schiffsübersicht: Zoom/Pan, dynamische externe Beschriftung, bessere Legende.
*/
.ship-overview-map-panel,
.ship-overview-map-wrap {
    overflow: visible !important;
}

.ship-overview-map-wrap {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px clamp(105px, 14vw, 220px) 34px !important;
}

.ship-overview-map-wrap .ship-overview-stage,
.ship-overview-stage {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: var(--ship-overview-aspect, 768 / 1500) !important;
    margin: 0 auto !important;
    overflow: visible !important;
    transform:
        translate(var(--ship-overview-pan-x, 0px), var(--ship-overview-pan-y, 0px))
        scale(var(--ship-overview-zoom, 1)) !important;
    transform-origin: 50% 50% !important;
    cursor: grab;
    touch-action: none;
}

.ship-overview-stage.is-panning {
    cursor: grabbing;
}

.ship-overview-stage > img,
.ship-overview-stage #shipMapImage {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
}

.ship-overview-stage .room-layer,
.ship-overview-stage .marker-layer,
.ship-overview-stage .map-label-layer,
.ship-overview-stage .map-label-line-svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.ship-overview-stage .map-label-layer {
    z-index: 9 !important;
    overflow: visible !important;
    pointer-events: none !important;
}

.ship-overview-stage .map-label-line-svg {
    overflow: visible !important;
}

.ship-overview-stage .map-label-line-halo {
    stroke-width: 1.85 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: .96 !important;
}

.ship-overview-stage .map-label-line-contrast {
    stroke-width: 1.18 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: .86 !important;
}

.ship-overview-stage .map-label-line {
    stroke-width: .76 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: 1 !important;
    filter:
        drop-shadow(0 0 2px rgba(0,0,0,.98))
        drop-shadow(0 0 5px rgba(0,0,0,.72)) !important;
}

.ship-overview-stage .map-label-html {
    position: absolute !important;
    min-width: 132px !important;
    max-width: 230px !important;
    color: rgba(241,244,246,.98) !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: calc(var(--map-label-font-px, 11) * 1px) !important;
    line-height: 1.12 !important;
    letter-spacing: .025em !important;
    white-space: normal !important;
    text-shadow:
        0 1px 1px rgba(0,0,0,.98),
        0 0 4px rgba(0,0,0,.95),
        0 0 8px rgba(0,0,0,.82),
        0 0 12px rgba(0,0,0,.65) !important;
}

.ship-overview-stage .map-label-html::before {
    content: none !important;
    display: none !important;
}

.ship-overview-stage .map-label-html.left {
    left: -6.8% !important;
    transform: translate(-100%, -50%) !important;
    text-align: right !important;
}

.ship-overview-stage .map-label-html.right {
    left: 106.8% !important;
    transform: translateY(-50%) !important;
    text-align: left !important;
}

.ship-stage:not(.ship-overview-stage) .map-label-layer,
.ship-stage:not(.ship-overview-stage) .map-label-line-svg,
.ship-stage:not(.ship-overview-stage) .map-label-html {
    display: none !important;
}

/* Legende/Controls */
.ship-overview-legend {
    z-index: 30 !important;
    overflow: visible !important;
    max-height: none !important;
}

.ship-overview-legend .legend-label-tools {
    display: grid;
    gap: 9px;
    margin: 10px 0 12px;
}

.ship-overview-legend .legend-label-mode-control,
.ship-overview-legend .legend-label-font-control {
    display: grid;
    gap: 6px;
    margin: 0 !important;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    border-radius: 10px;
}

.ship-overview-legend .legend-label-mode-control span,
.ship-overview-legend .legend-label-font-control span {
    color: rgba(241,244,246,.74);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 900;
}

.ship-overview-legend .legend-label-mode-control select,
.ship-overview-legend .legend-label-font-control input {
    width: 100%;
}

.ship-overview-legend .legend-label-mode-control select {
    min-height: 34px;
    color: rgba(241,244,246,.92);
    background: rgba(0,0,0,.44);
    border: 1px solid rgba(214,221,227,.22);
    border-radius: 7px;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif;
    font-size: 12px;
}

.ship-overview-legend .legend-map-zoom-control {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 9px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    border-radius: 10px;
}

.ship-overview-legend .legend-map-zoom-control button {
    min-width: 32px;
    min-height: 28px;
    border: 1px solid rgba(214,221,227,.22);
    border-radius: 7px;
    background: rgba(0,0,0,.42);
    color: rgba(241,244,246,.96);
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif;
    font-weight: 900;
    cursor: pointer;
}

.ship-overview-legend .legend-map-zoom-control span {
    min-width: 46px;
    text-align: center;
    color: rgba(241,244,246,.82);
    font-size: 11px;
    font-weight: 900;
}

.ship-overview-legend .legend-filter-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 30px !important;
    overflow: visible !important;
    color: rgba(241,244,246,.92) !important;
}

.ship-overview-legend .legend-dot {
    display: inline-flex !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    box-shadow: 0 0 9px rgba(0,0,0,.75), 0 0 7px currentColor !important;
}

.ship-overview-legend .legend-dot.station { background: #25d9f2 !important; color: #25d9f2 !important; }
.ship-overview-legend .legend-dot.fire { background: #ff3a3a !important; color: #ff3a3a !important; }
.ship-overview-legend .legend-dot.pod { background: #58f04b !important; color: #58f04b !important; }
.ship-overview-legend .legend-dot.med { background: #f1f4f6 !important; color: #f1f4f6 !important; }
.ship-overview-legend .legend-dot.airlock { background: #ffb13b !important; color: #ffb13b !important; }
.ship-overview-legend .legend-dot.component { background: #a875ff !important; color: #a875ff !important; }
.ship-overview-legend .legend-dot.fuse { background: #ffe44b !important; color: #ffe44b !important; }

@media (max-width: 1280px) {
    .ship-overview-map-wrap {
        padding-left: clamp(92px, 13vw, 170px) !important;
        padding-right: clamp(92px, 13vw, 170px) !important;
    }

    .ship-overview-stage .map-label-html {
        max-width: 180px !important;
    }

    .ship-overview-stage .map-label-html.left {
        left: -5.8% !important;
    }

    .ship-overview-stage .map-label-html.right {
        left: 105.8% !important;
    }
}




/* ship-overview-labels-room-filter-1
   Schiffsübersicht: externe Beschriftung, Raumfilter, Marker vor Linien.
*/
.ship-overview-map-panel,
.ship-overview-map-wrap {
    overflow: visible !important;
}

.ship-overview-map-wrap {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px clamp(105px, 14vw, 220px) 34px !important;
}

.ship-overview-map-wrap .ship-overview-stage,
.ship-overview-stage {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: var(--ship-overview-aspect, 768 / 1500) !important;
    margin: 0 auto !important;
    overflow: visible !important;
    transform:
        translate(var(--ship-overview-pan-x, 0px), var(--ship-overview-pan-y, 0px))
        scale(var(--ship-overview-zoom, 1)) !important;
    transform-origin: 50% 50% !important;
    cursor: grab;
    touch-action: none;
}

.ship-overview-stage.is-panning {
    cursor: grabbing;
}

.ship-overview-stage > img,
.ship-overview-stage #shipMapImage {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    z-index: 1 !important;
}

.ship-overview-stage .room-layer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    pointer-events: all !important;
}

.ship-overview-stage .map-label-layer,
.ship-overview-stage .map-label-line-svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 3 !important;
    overflow: visible !important;
    pointer-events: none !important;
}

.ship-overview-stage .marker-layer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 8 !important;
    pointer-events: none !important;
}

.ship-overview-stage .marker {
    z-index: 9 !important;
    pointer-events: auto !important;
}

.ship-overview-stage .marker.hidden-by-room {
    display: none !important;
}

.ship-overview-stage .room-shape {
    cursor: pointer !important;
    pointer-events: all !important;
}

.ship-overview-stage .room-shape.room-selected {
    fill-opacity: .28 !important;
    stroke-width: 1.2 !important;
    filter: drop-shadow(0 0 6px rgba(255,255,255,.20));
}

.room-layer.room-layer-hidden-by-legend {
    display: none !important;
}

.ship-overview-stage .map-label-line-halo {
    stroke-width: 2.15 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: .98 !important;
}

.ship-overview-stage .map-label-line-contrast {
    stroke-width: 1.32 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: .92 !important;
}

.ship-overview-stage .map-label-line {
    stroke-width: .82 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: 1 !important;
    filter:
        drop-shadow(0 0 2px rgba(0,0,0,.98))
        drop-shadow(0 0 5px rgba(0,0,0,.72)) !important;
}

.ship-overview-stage .map-label-html {
    position: absolute !important;
    min-width: 126px !important;
    max-width: 220px !important;
    color: rgba(241,244,246,.98) !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-family: "ZeroPrimeVCG", "Zero Prime", "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: calc(var(--map-label-font-px, 11) * 1px) !important;
    line-height: 1.10 !important;
    letter-spacing: .018em !important;
    white-space: normal !important;
    text-shadow:
        0 1px 1px rgba(0,0,0,.98),
        0 0 4px rgba(0,0,0,.95),
        0 0 8px rgba(0,0,0,.82),
        0 0 12px rgba(0,0,0,.65) !important;
}

.ship-overview-stage .map-label-html::before {
    content: none !important;
    display: none !important;
}

.ship-overview-stage .map-label-html.left {
    left: -6.2% !important;
    transform: translate(-100%, -50%) !important;
    text-align: right !important;
}

.ship-overview-stage .map-label-html.right {
    left: 106.2% !important;
    transform: translateY(-50%) !important;
    text-align: left !important;
}

.ship-stage:not(.ship-overview-stage) .map-label-layer,
.ship-stage:not(.ship-overview-stage) .map-label-line-svg,
.ship-stage:not(.ship-overview-stage) .map-label-html {
    display: none !important;
}

/* Legende/Controls */
.ship-overview-legend {
    z-index: 30 !important;
    overflow: visible !important;
    max-height: none !important;
}

.ship-overview-legend .legend-label-tools {
    display: grid;
    gap: 9px;
    margin: 10px 0 12px;
}

.ship-overview-legend .legend-label-mode-control,
.ship-overview-legend .legend-label-font-control {
    display: grid;
    gap: 6px;
    margin: 0 !important;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    border-radius: 10px;
}

.ship-overview-legend .legend-label-mode-control span,
.ship-overview-legend .legend-label-font-control span {
    color: rgba(241,244,246,.74);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 900;
}

.ship-overview-legend .legend-label-mode-control select,
.ship-overview-legend .legend-label-font-control input {
    width: 100%;
}

.ship-overview-legend .legend-label-mode-control select {
    min-height: 34px;
    color: rgba(241,244,246,.92);
    background: rgba(0,0,0,.44);
    border: 1px solid rgba(214,221,227,.22);
    border-radius: 7px;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif;
    font-size: 12px;
}

.ship-overview-legend .legend-map-zoom-control {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 9px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    border-radius: 10px;
}

.ship-overview-legend .legend-map-zoom-control button {
    min-width: 32px;
    min-height: 28px;
    border: 1px solid rgba(214,221,227,.22);
    border-radius: 7px;
    background: rgba(0,0,0,.42);
    color: rgba(241,244,246,.96);
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif;
    font-weight: 900;
    cursor: pointer;
}

.ship-overview-legend .legend-map-zoom-control span {
    min-width: 46px;
    text-align: center;
    color: rgba(241,244,246,.82);
    font-size: 11px;
    font-weight: 900;
}

.legend-room-toggle {
    margin-top: 7px !important;
}

.legend-room-toggle .legend-dot.room,
.ship-overview-legend .legend-dot.room {
    background: transparent !important;
    color: #d6dde3 !important;
    border: 2px solid rgba(214,221,227,.92) !important;
    border-radius: 4px !important;
}

.ship-overview-legend .legend-filter-item,
.legend-card .legend-filter-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 30px !important;
    overflow: visible !important;
    color: rgba(241,244,246,.92) !important;
}

.ship-overview-legend .legend-dot,
.legend-card .legend-dot {
    display: inline-flex !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    box-shadow: 0 0 9px rgba(0,0,0,.75), 0 0 7px currentColor !important;
}

.ship-overview-legend .legend-dot.station,
.legend-card .legend-dot.station { background: #25d9f2 !important; color: #25d9f2 !important; }
.ship-overview-legend .legend-dot.fire,
.legend-card .legend-dot.fire { background: #ff3a3a !important; color: #ff3a3a !important; }
.ship-overview-legend .legend-dot.pod,
.legend-card .legend-dot.pod { background: #58f04b !important; color: #58f04b !important; }
.ship-overview-legend .legend-dot.med,
.legend-card .legend-dot.med { background: #f1f4f6 !important; color: #f1f4f6 !important; }
.ship-overview-legend .legend-dot.airlock,
.legend-card .legend-dot.airlock { background: #ffb13b !important; color: #ffb13b !important; }
.ship-overview-legend .legend-dot.component,
.legend-card .legend-dot.component { background: #a875ff !important; color: #a875ff !important; }
.ship-overview-legend .legend-dot.fuse,
.legend-card .legend-dot.fuse { background: #ffe44b !important; color: #ffe44b !important; }

@media (max-width: 1280px) {
    .ship-overview-map-wrap {
        padding-left: clamp(92px, 13vw, 170px) !important;
        padding-right: clamp(92px, 13vw, 170px) !important;
    }

    .ship-overview-stage .map-label-html {
        max-width: 178px !important;
    }

    .ship-overview-stage .map-label-html.left {
        left: -5.5% !important;
    }

    .ship-overview-stage .map-label-html.right {
        left: 105.5% !important;
    }
}


/* ship-overview-performance-hotfix-1
   Keine optische Änderung; Marker-Raumfilter bleibt, aber ohne MutationObserver-Renderloop.
*/
.ship-overview-stage .marker.hidden-by-room {
    display: none !important;
}

/* ship-overview-label-sort-fix-1
   Labels bleiben näher an ihrer tatsächlichen Markerhöhe.
*/
.ship-overview-stage .map-label-layer,
.ship-overview-stage .map-label-line-svg {
    overflow: visible !important;
}

.ship-overview-stage .map-label-html {
    overflow: visible !important;
}


/* ship-overview-no-cross-room-legend-1
   Raumfilter optisch wie normale Legendenfilter; Labelrouting naeher an Markerhoehe.
*/
.ship-overview-stage .map-label-layer,
.ship-overview-stage .map-label-line-svg {
    overflow: visible !important;
}

.ship-overview-stage .map-label-html {
    overflow: visible !important;
}

.legend-room-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 30px !important;
    margin-top: 6px !important;
    color: rgba(241,244,246,.92) !important;
    cursor: pointer !important;
}

.legend-room-toggle input[data-room-layer-toggle] {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.legend-room-toggle .legend-dot.room,
.ship-overview-legend .legend-dot.room,
.legend-card .legend-dot.room {
    display: inline-flex !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    border-radius: 4px !important;
    background: rgba(214,221,227,.16) !important;
    color: #d6dde3 !important;
    border: 2px solid rgba(214,221,227,.92) !important;
    box-shadow: 0 0 9px rgba(0,0,0,.75), 0 0 7px rgba(214,221,227,.35) !important;
}

.legend-room-toggle input[data-room-layer-toggle]:not(:checked) + .legend-dot.room {
    opacity: .35 !important;
    background: transparent !important;
    box-shadow: none !important;
}



/* ship-overview-nav-fuel-controls-1
   Commandbar unterhalb der Tabs für Standort, Quantum Fuel und Ansicht.
*/
.ship-overview-commandbar {
    display: grid;
    grid-template-columns: minmax(220px, 1.05fr) minmax(420px, 2fr) minmax(210px, .9fr);
    gap: 14px;
    align-items: stretch;
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid rgba(214, 221, 227, .13);
    border-left: 2px solid var(--red, #e30b17);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), rgba(2, 6, 8, .74);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 0 28px rgba(0,0,0,.34);
}

.ship-overview-commandbar__group {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(214,221,227,.10);
    background: rgba(0,0,0,.23);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.ship-overview-commandbar label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.ship-overview-commandbar label span,
.ship-overview-view-title {
    color: rgba(214,221,227,.72);
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ship-overview-commandbar input[type="text"],
.ship-overview-commandbar input[type="number"] {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid rgba(214,221,227,.18);
    border-radius: 8px;
    background: rgba(0,0,0,.45);
    color: rgba(241,244,246,.96);
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif;
    font-size: 13px;
    outline: none;
}

.ship-overview-commandbar input:focus {
    border-color: rgba(37,217,242,.72);
    box-shadow: 0 0 0 1px rgba(37,217,242,.16), 0 0 18px rgba(37,217,242,.10);
}

.ship-overview-fuel-block {
    grid-template-columns: minmax(110px, .7fr) minmax(140px, .8fr) minmax(180px, 1.2fr);
    align-items: end;
}

.ship-overview-fuel-block output {
    grid-column: 1 / -1;
    min-height: 26px;
    padding: 5px 8px;
    color: rgba(241,244,246,.92);
    border-left: 2px solid rgba(37,217,242,.82);
    background: rgba(37,217,242,.06);
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .04em;
}

.ship-overview-slider-label input[type="range"] {
    width: 100%;
    accent-color: #25d9f2;
}

.ship-overview-view-block {
    align-content: start;
}

.ship-overview-view-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(34px, 1fr));
    gap: 6px;
    align-items: center;
}

.ship-overview-view-grid button,
.ship-overview-view-grid strong {
    min-height: 34px;
    border: 1px solid rgba(214,221,227,.18);
    border-radius: 8px;
    background: rgba(0,0,0,.42);
    color: rgba(241,244,246,.96);
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif;
    font-weight: 900;
    letter-spacing: .04em;
    text-align: center;
}

.ship-overview-view-grid button {
    cursor: pointer;
}

.ship-overview-view-grid button:hover {
    border-color: rgba(37,217,242,.62);
    color: #25d9f2;
    box-shadow: 0 0 16px rgba(37,217,242,.12);
}

.ship-overview-view-grid strong {
    display: grid;
    place-items: center;
    font-size: 11px;
    color: rgba(37,217,242,.96);
}

@media (max-width: 1200px) {
    .ship-overview-commandbar {
        grid-template-columns: 1fr;
    }

    .ship-overview-fuel-block {
        grid-template-columns: 1fr;
    }
}




/* ship-overview-functions-location-1
   Commandbar/Legende Design-Fix.
*/
.ship-overview-commandbar {
    grid-template-columns: minmax(280px, 1fr) minmax(520px, 2.1fr) !important;
    border-color: rgba(227, 11, 23, .42) !important;
    background:
        linear-gradient(135deg, rgba(227,11,23,.055), rgba(255,255,255,.018)),
        rgba(2, 6, 8, .82) !important;
}

.ship-overview-commandbar .ship-overview-view-block {
    display: none !important;
}

.ship-overview-location-block {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ship-overview-location-block .ship-location-manual {
    grid-column: 1 / -1;
}

.ship-overview-commandbar select {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid rgba(214,221,227,.18);
    border-radius: 8px;
    background: rgba(0,0,0,.45);
    color: rgba(241,244,246,.96);
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif;
    font-size: 13px;
    outline: none;
}

.ship-overview-commandbar select:focus {
    border-color: rgba(227,11,23,.64);
    box-shadow: 0 0 0 1px rgba(227,11,23,.15), 0 0 18px rgba(227,11,23,.10);
}

.ship-overview-fuel-block output {
    border-left-color: rgba(227,11,23,.82) !important;
    background: rgba(227,11,23,.075) !important;
}

.ship-overview-slider-label input[type="range"],
.ship-overview-commandbar input[type="range"] {
    accent-color: #e30b17 !important;
}

.ship-functions-panel {
    display: grid;
    gap: 8px;
    margin: 10px 0 12px;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    border-radius: 10px;
}

.ship-functions-panel h4 {
    margin: 0;
    color: rgba(241,244,246,.78);
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ship-functions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(32px, 1fr));
    gap: 6px;
    align-items: center;
}

.ship-functions-grid button,
.ship-functions-grid strong {
    min-height: 30px;
    border: 1px solid rgba(214,221,227,.18);
    border-radius: 7px;
    background: rgba(0,0,0,.42);
    color: rgba(241,244,246,.96);
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif;
    font-weight: 900;
    letter-spacing: .04em;
    text-align: center;
}

.ship-functions-grid button {
    cursor: pointer;
}

.ship-functions-grid button:hover {
    border-color: rgba(227,11,23,.7);
    color: #ff4b55;
    box-shadow: 0 0 16px rgba(227,11,23,.18);
}

.ship-functions-grid strong {
    display: grid;
    place-items: center;
    font-size: 11px;
    color: rgba(255,75,85,.96);
}

/* Externe Markerbeschriftung wieder Electrolize statt Zero Prime. */
.ship-overview-stage .map-label-html {
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    letter-spacing: .035em !important;
}

@media (max-width: 1200px) {
    .ship-overview-commandbar {
        grid-template-columns: 1fr !important;
    }

    .ship-overview-location-block {
        grid-template-columns: 1fr;
    }
}


/* ship-overview-legend-functions-1 */

/* Schriftgrößen-Regler rot statt blau */
.ship-overview-legend .legend-label-font-control input[type="range"],
.legend-card .legend-label-font-control input[type="range"] {
    accent-color: #e30b17 !important;
}

/* Funktionen-Steuerung: echte Plusform + Zoom/Reset daneben */
.ship-functions-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(30px, 1fr)) !important;
    grid-template-areas:
        ". up . zin"
        "left center right pct"
        ". down . zout"
        ". . . reset" !important;
    gap: 6px !important;
    align-items: center !important;
}

.ship-functions-grid [data-view-move="up"] { grid-area: up !important; }
.ship-functions-grid [data-view-move="left"] { grid-area: left !important; }
.ship-functions-grid [data-view-center] { grid-area: center !important; }
.ship-functions-grid [data-view-move="right"] { grid-area: right !important; }
.ship-functions-grid [data-view-move="down"] { grid-area: down !important; }
.ship-functions-grid [data-view-zoom-in] { grid-area: zin !important; }
.ship-functions-grid [data-view-zoom-out] { grid-area: zout !important; }
.ship-functions-grid [data-ship-view-zoom-output] { grid-area: pct !important; }
.ship-functions-grid [data-view-reset] { grid-area: reset !important; font-size: 10px !important; }

.ship-functions-panel button,
.ship-functions-panel strong {
    min-height: 32px !important;
    border: 1px solid rgba(214,221,227,.18) !important;
    border-radius: 8px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.24)),
        rgba(0,0,0,.42) !important;
    color: rgba(241,244,246,.96) !important;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-weight: 900 !important;
    text-align: center !important;
}

.ship-functions-panel button:hover {
    border-color: rgba(227,11,23,.72) !important;
    color: #ff4b55 !important;
    box-shadow: 0 0 16px rgba(227,11,23,.18) !important;
}

.ship-functions-panel [data-ship-view-zoom-output] {
    color: #ff4b55 !important;
}

/* Räume-Filter wie normale Legendeneinträge */
.ship-overview-legend .legend-room-toggle,
.legend-card .legend-room-toggle {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 3px 0 !important;
    overflow: visible !important;
    cursor: pointer !important;
    color: rgba(241,244,246,.92) !important;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.ship-overview-legend .legend-room-toggle input[data-room-layer-toggle],
.legend-card .legend-room-toggle input[data-room-layer-toggle] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    pointer-events: none !important;
}

.ship-overview-legend .legend-room-toggle .legend-dot.room,
.legend-card .legend-room-toggle .legend-dot.room {
    display: inline-flex !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    border-radius: 4px !important;
    border: 2px solid rgba(214,221,227,.88) !important;
    background: rgba(214,221,227,.08) !important;
    box-shadow:
        0 0 9px rgba(0,0,0,.75),
        0 0 7px rgba(214,221,227,.20) !important;
    transform: none !important;
}

.ship-overview-legend .legend-room-toggle input[data-room-layer-toggle]:not(:checked) + .legend-dot.room,
.legend-card .legend-room-toggle input[data-room-layer-toggle]:not(:checked) + .legend-dot.room {
    opacity: .42 !important;
    background: transparent !important;
}

.ship-overview-legend .legend-room-label,
.legend-card .legend-room-label {
    color: rgba(241,244,246,.92) !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

.ship-overview-legend .legend-room-toggle::before,
.legend-card .legend-room-toggle::before,
.ship-overview-legend .legend-room-toggle::after,
.legend-card .legend-room-toggle::after {
    content: none !important;
    display: none !important;
}


/* ship-overview-legend-cleanup-1 */

/* Legende und Listen dürfen Glow/Schatten nicht abschneiden. */
.ship-overview-legend,
.legend-card,
.ship-overview-legend details,
.legend-card details,
.ship-overview-legend .legend-content,
.legend-card .legend-content,
.ship-overview-legend .legend-filter-list,
.legend-card .legend-filter-list {
    overflow: visible !important;
}

/* Mehr linken Raum für Dots und Glow. */
.ship-overview-legend .legend-filter-item,
.legend-card .legend-filter-item,
.ship-overview-legend .legend-room-toggle,
.legend-card .legend-room-toggle {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 36px !important;
    padding: 4px 0 4px 10px !important;
    margin: 0 !important;
    overflow: visible !important;
    color: rgba(241,244,246,.92) !important;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .045em !important;
}

/* Alle Marker-Dots stabil, nicht abgeschnitten. */
.ship-overview-legend .legend-dot,
.legend-card .legend-dot {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin-left: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    box-shadow:
        -5px 7px 0 rgba(0,0,0,.34),
        0 0 9px rgba(0,0,0,.75),
        0 0 9px currentColor !important;
    transform: none !important;
    overflow: visible !important;
}

.ship-overview-legend .legend-dot.station,
.legend-card .legend-dot.station { background: #25d9f2 !important; color: #25d9f2 !important; }
.ship-overview-legend .legend-dot.fire,
.legend-card .legend-dot.fire { background: #ff3a3a !important; color: #ff3a3a !important; }
.ship-overview-legend .legend-dot.pod,
.legend-card .legend-dot.pod { background: #58f04b !important; color: #58f04b !important; }
.ship-overview-legend .legend-dot.med,
.legend-card .legend-dot.med { background: #f1f4f6 !important; color: #f1f4f6 !important; }
.ship-overview-legend .legend-dot.airlock,
.legend-card .legend-dot.airlock { background: #ffb13b !important; color: #ffb13b !important; }
.ship-overview-legend .legend-dot.component,
.legend-card .legend-dot.component { background: #a875ff !important; color: #a875ff !important; }
.ship-overview-legend .legend-dot.fuse,
.legend-card .legend-dot.fuse { background: #ffe44b !important; color: #ffe44b !important; }

/* Räume wie normaler Legendeneintrag, nur quadratisch. */
.ship-overview-legend .legend-room-toggle input[data-room-layer-toggle],
.legend-card .legend-room-toggle input[data-room-layer-toggle],
.ship-overview-legend .legend-room-filter-item input[data-room-layer-toggle],
.legend-card .legend-room-filter-item input[data-room-layer-toggle] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    pointer-events: none !important;
}

.ship-overview-legend .legend-dot.room,
.legend-card .legend-dot.room,
.ship-overview-legend .legend-room-toggle .legend-dot.room,
.legend-card .legend-room-toggle .legend-dot.room,
.ship-overview-legend .legend-room-filter-item .legend-dot.room,
.legend-card .legend-room-filter-item .legend-dot.room {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border-radius: 5px !important;
    border: 2px solid rgba(214,221,227,.82) !important;
    background: rgba(214,221,227,.10) !important;
    color: rgba(214,221,227,.92) !important;
    box-shadow:
        -5px 7px 0 rgba(0,0,0,.34),
        0 0 9px rgba(0,0,0,.75),
        0 0 8px rgba(214,221,227,.20) !important;
    transform: none !important;
    overflow: visible !important;
}

.ship-overview-legend .legend-room-toggle input[data-room-layer-toggle]:not(:checked) + .legend-dot.room,
.legend-card .legend-room-toggle input[data-room-layer-toggle]:not(:checked) + .legend-dot.room {
    opacity: .42 !important;
    background: transparent !important;
}

.ship-overview-legend .legend-room-label,
.legend-card .legend-room-label,
.ship-overview-legend .legend-room-toggle span:last-child,
.legend-card .legend-room-toggle span:last-child {
    color: rgba(241,244,246,.92) !important;
    opacity: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .045em !important;
    text-decoration: none !important;
}

.ship-overview-legend .legend-room-toggle::before,
.legend-card .legend-room-toggle::before,
.ship-overview-legend .legend-room-toggle::after,
.legend-card .legend-room-toggle::after,
.ship-overview-legend .legend-room-filter-item::before,
.legend-card .legend-room-filter-item::before,
.ship-overview-legend .legend-room-filter-item::after,
.legend-card .legend-room-filter-item::after {
    content: none !important;
    display: none !important;
}

/* RESET wird zu RST und ist lesbar. */
.ship-functions-grid [data-view-reset],
.ship-functions-panel [data-view-reset] {
    min-width: 54px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

.ship-functions-grid {
    grid-template-columns: repeat(3, minmax(30px, 1fr)) minmax(56px, .9fr) !important;
}


/* ship-overview-legend-cleanup-hotfix-1
   Performance-Hotfix: keine neue Optik, nur sichere Zielmarker.
*/
.ship-functions-grid [data-view-reset],
.ship-functions-panel [data-view-reset] {
    min-width: 54px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
}


/* ship-overview-room-legend-style-1
   Räume: gleiche Anmutung wie die anderen Marker-Einträge.
*/
.ship-overview-legend .legend-room-standard,
.legend-card .legend-room-standard,
.ship-overview-legend .legend-room-toggle,
.legend-card .legend-room-toggle,
.ship-overview-legend .legend-room-filter-item,
.legend-card .legend-room-filter-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 36px !important;
    padding: 4px 0 4px 10px !important;
    margin: 0 !important;
    overflow: visible !important;
    cursor: pointer !important;
    color: rgba(241,244,246,.92) !important;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
}

.ship-overview-legend .legend-room-standard input[data-room-layer-toggle],
.legend-card .legend-room-standard input[data-room-layer-toggle],
.ship-overview-legend .legend-room-toggle input[data-room-layer-toggle],
.legend-card .legend-room-toggle input[data-room-layer-toggle],
.ship-overview-legend .legend-room-filter-item input[data-room-layer-toggle],
.legend-card .legend-room-filter-item input[data-room-layer-toggle] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    pointer-events: none !important;
}

/* WICHTIG: Räume ist jetzt rund wie die anderen Marker, kein eckiges Kästchen mehr. */
.ship-overview-legend .legend-dot.room,
.legend-card .legend-dot.room,
.ship-overview-legend .room-standard-dot,
.legend-card .room-standard-dot,
.ship-overview-legend .legend-room-toggle .legend-dot.room,
.legend-card .legend-room-toggle .legend-dot.room,
.ship-overview-legend .legend-room-filter-item .legend-dot.room,
.legend-card .legend-room-filter-item .legend-dot.room {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin-left: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    background: #d6dde3 !important;
    color: #d6dde3 !important;
    box-shadow:
        -5px 7px 0 rgba(0,0,0,.34),
        0 0 9px rgba(0,0,0,.75),
        0 0 9px currentColor !important;
    transform: none !important;
    overflow: visible !important;
}

.ship-overview-legend .legend-room-standard input[data-room-layer-toggle]:not(:checked) + .legend-dot.room,
.legend-card .legend-room-standard input[data-room-layer-toggle]:not(:checked) + .legend-dot.room,
.ship-overview-legend .legend-room-toggle input[data-room-layer-toggle]:not(:checked) + .legend-dot.room,
.legend-card .legend-room-toggle input[data-room-layer-toggle]:not(:checked) + .legend-dot.room,
.ship-overview-legend .legend-room-filter-item input[data-room-layer-toggle]:not(:checked) + .legend-dot.room,
.legend-card .legend-room-filter-item input[data-room-layer-toggle]:not(:checked) + .legend-dot.room {
    opacity: .42 !important;
    background: #d6dde3 !important;
    color: #d6dde3 !important;
}

/* Schrift exakt wie die anderen Einträge, nicht fett abweichend / nicht Systemschrift. */
.ship-overview-legend .legend-room-label,
.legend-card .legend-room-label,
.ship-overview-legend .room-standard-label,
.legend-card .room-standard-label,
.ship-overview-legend .legend-room-toggle span:last-child,
.legend-card .legend-room-toggle span:last-child,
.ship-overview-legend .legend-room-filter-item span:last-child,
.legend-card .legend-room-filter-item span:last-child {
    color: rgba(241,244,246,.92) !important;
    opacity: 1 !important;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transform: none !important;
}

/* Alte Sonderdarstellungen endgültig neutralisieren. */
.ship-overview-legend .legend-room-toggle::before,
.legend-card .legend-room-toggle::before,
.ship-overview-legend .legend-room-toggle::after,
.legend-card .legend-room-toggle::after,
.ship-overview-legend .legend-room-filter-item::before,
.legend-card .legend-room-filter-item::before,
.ship-overview-legend .legend-room-filter-item::after,
.legend-card .legend-room-filter-item::after,
.ship-overview-legend .legend-room-standard::before,
.legend-card .legend-room-standard::before,
.ship-overview-legend .legend-room-standard::after,
.legend-card .legend-room-standard::after {
    content: none !important;
    display: none !important;
}


/* ship-overview-ship-state-1
   Statuszeile für schiffsspezifischen Standort/Fuel-Status.
*/
.ship-overview-commandbar .ship-state-badge {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) auto minmax(160px, 1.4fr) auto minmax(110px, .8fr);
    gap: 6px 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(214,221,227,.10);
    border-left: 2px solid rgba(227,11,23,.78);
    background: rgba(0,0,0,.28);
    color: rgba(241,244,246,.88);
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif;
    font-size: 11px;
    letter-spacing: .045em;
}

.ship-overview-commandbar .ship-state-badge span {
    color: rgba(214,221,227,.62);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.ship-overview-commandbar .ship-state-badge strong {
    color: rgba(241,244,246,.95);
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .ship-overview-commandbar .ship-state-badge {
        grid-template-columns: auto 1fr;
    }
}


/* ship-overview-90-standard-1
   Schiffsübersicht: 90° Standarddarstellung.
*/

/* Der Stage selbst bleibt ungedreht; nur Bild/Marker/Räume werden als gemeinsamer Karteninhalt gedreht. */
.ship-overview-stage.ship-overview-rotated-standard {
    aspect-ratio: var(--ship-overview-aspect, 1500 / 768) !important;
    overflow: visible !important;
}

/*
   Child-Layer werden in Original-Proportionen angelegt und dann 90° im Uhrzeigersinn gedreht.
   Dadurch bleiben Bild, Marker, Räume und Hoverflächen untereinander deckungsgleich.
*/
.ship-overview-stage.ship-overview-rotated-standard > #shipMapImage,
.ship-overview-stage.ship-overview-rotated-standard > img#shipMapImage,
.ship-overview-stage.ship-overview-rotated-standard .room-layer,
.ship-overview-stage.ship-overview-rotated-standard .marker-layer {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    width: calc(100% * var(--ship-overview-orig-aspect, 0.512)) !important;
    height: calc(100% * var(--ship-overview-rot-aspect, 1.953)) !important;
    transform-origin: 0 0 !important;
    transform: rotate(90deg) !important;
}

/* Bild sauber füllen, ohne Verzerrung. */
.ship-overview-stage.ship-overview-rotated-standard > #shipMapImage,
.ship-overview-stage.ship-overview-rotated-standard > img#shipMapImage {
    object-fit: contain !important;
    z-index: 1 !important;
}

/* Räume und Marker behalten ihre Ebenenlogik. */
.ship-overview-stage.ship-overview-rotated-standard .room-layer {
    z-index: 2 !important;
    pointer-events: all !important;
}

.ship-overview-stage.ship-overview-rotated-standard .marker-layer {
    z-index: 8 !important;
    pointer-events: none !important;
}

.ship-overview-stage.ship-overview-rotated-standard .marker {
    pointer-events: auto !important;
}

/* Alte externe Label-Layer aus vorherigen Patches ausblenden; neue gedrehte Labels übernehmen. */
.ship-overview-stage.ship-overview-rotated-standard .map-label-layer:not(.ship-rotated-label-layer),
.ship-overview-stage.ship-overview-rotated-standard .map-label-line-svg:not(.ship-rotated-label-line-svg),
.ship-overview-stage.ship-overview-rotated-standard .map-label-html:not(.ship-rotated-label-html) {
    display: none !important;
}

/* Neuer Label-Layer bleibt ungedreht und rechnet in gedrehten Koordinaten. */
.ship-overview-stage.ship-overview-rotated-standard .ship-rotated-label-layer,
.ship-overview-stage.ship-overview-rotated-standard .ship-rotated-label-line-svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 7 !important;
}

.ship-overview-stage.ship-overview-rotated-standard .ship-rotated-label-line-halo {
    stroke-width: 2.15 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: .98 !important;
}

.ship-overview-stage.ship-overview-rotated-standard .ship-rotated-label-line-contrast {
    stroke-width: 1.32 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: .92 !important;
}

.ship-overview-stage.ship-overview-rotated-standard .ship-rotated-label-line {
    stroke-width: .82 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: 1 !important;
    filter:
        drop-shadow(0 0 2px rgba(0,0,0,.98))
        drop-shadow(0 0 5px rgba(0,0,0,.72)) !important;
}

.ship-overview-stage.ship-overview-rotated-standard .ship-rotated-label-html {
    position: absolute !important;
    min-width: 126px !important;
    max-width: 220px !important;
    color: rgba(241,244,246,.98) !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: calc(var(--map-label-font-px, 11) * 1px) !important;
    line-height: 1.10 !important;
    letter-spacing: .035em !important;
    white-space: normal !important;
    text-shadow:
        0 1px 1px rgba(0,0,0,.98),
        0 0 4px rgba(0,0,0,.95),
        0 0 8px rgba(0,0,0,.82),
        0 0 12px rgba(0,0,0,.65) !important;
}

.ship-overview-stage.ship-overview-rotated-standard .ship-rotated-label-html.left {
    left: -6.2% !important;
    transform: translate(-100%, -50%) !important;
    text-align: right !important;
}

.ship-overview-stage.ship-overview-rotated-standard .ship-rotated-label-html.right {
    left: 106.2% !important;
    transform: translateY(-50%) !important;
    text-align: left !important;
}

/* Durch die 90° Darstellung kann die Karte etwas weniger Seitenpadding brauchen. */
.ship-overview-map-wrap {
    padding-left: clamp(86px, 11vw, 180px) !important;
    padding-right: clamp(86px, 11vw, 180px) !important;
}

@media (max-width: 1280px) {
    .ship-overview-map-wrap {
        padding-left: clamp(72px, 10vw, 140px) !important;
        padding-right: clamp(72px, 10vw, 140px) !important;
    }

    .ship-overview-stage.ship-overview-rotated-standard .ship-rotated-label-html {
        max-width: 178px !important;
    }
}


/* ship-overview-90-labels-fix-1
   90° Standarddarstellung: Beschriftung oben/unten + Range-Füllung.
*/

/* 90° Karteninhalt stabilisieren. */
.ship-overview-stage.ship-overview-rotated-standard {
    aspect-ratio: var(--ship-overview-aspect, 1500 / 768) !important;
    overflow: visible !important;
}

.ship-overview-stage.ship-overview-rotated-standard > #shipMapImage,
.ship-overview-stage.ship-overview-rotated-standard > img#shipMapImage,
.ship-overview-stage.ship-overview-rotated-standard .room-layer,
.ship-overview-stage.ship-overview-rotated-standard .marker-layer {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    width: calc(100% * var(--ship-overview-orig-aspect, 0.512)) !important;
    height: calc(100% * var(--ship-overview-rot-aspect, 1.953)) !important;
    transform-origin: 0 0 !important;
    transform: rotate(90deg) !important;
}

.ship-overview-stage.ship-overview-rotated-standard > #shipMapImage,
.ship-overview-stage.ship-overview-rotated-standard > img#shipMapImage {
    object-fit: fill !important;
    z-index: 1 !important;
}

.ship-overview-stage.ship-overview-rotated-standard .room-layer {
    z-index: 2 !important;
    pointer-events: all !important;
}

.ship-overview-stage.ship-overview-rotated-standard .marker-layer {
    z-index: 8 !important;
    pointer-events: none !important;
}

.ship-overview-stage.ship-overview-rotated-standard .marker {
    pointer-events: auto !important;
}

/* Alte Labelsysteme im 90°-Standard ausblenden. */
.ship-overview-stage.ship-overview-rotated-standard .map-label-layer:not(.ship-edge-label-layer),
.ship-overview-stage.ship-overview-rotated-standard .map-label-line-svg,
.ship-overview-stage.ship-overview-rotated-standard .map-label-html,
.ship-overview-stage.ship-overview-rotated-standard .ship-rotated-label-layer,
.ship-overview-stage.ship-overview-rotated-standard .ship-rotated-label-line-svg,
.ship-overview-stage.ship-overview-rotated-standard .ship-rotated-label-html {
    display: none !important;
}

/* Neues Edge-Labelsystem oben/unten. */
.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-layer,
.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-line-svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 7 !important;
}

.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-line-halo {
    stroke-width: 2.15 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: .98 !important;
}

.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-line-contrast {
    stroke-width: 1.32 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: .92 !important;
}

.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-line {
    stroke-width: .82 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: 1 !important;
    filter:
        drop-shadow(0 0 2px rgba(0,0,0,.98))
        drop-shadow(0 0 5px rgba(0,0,0,.72)) !important;
}

.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-html {
    position: absolute !important;
    min-width: 110px !important;
    max-width: 210px !important;
    color: rgba(241,244,246,.98) !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: calc(var(--map-label-font-px, 11) * 1px) !important;
    line-height: 1.10 !important;
    letter-spacing: .035em !important;
    white-space: normal !important;
    text-align: center !important;
    text-shadow:
        0 1px 1px rgba(0,0,0,.98),
        0 0 4px rgba(0,0,0,.95),
        0 0 8px rgba(0,0,0,.82),
        0 0 12px rgba(0,0,0,.65) !important;
}

.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-html.top {
    transform: translate(-50%, -100%) !important;
}

.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-html.bottom {
    transform: translate(-50%, 0) !important;
}

/* Oben/unten mehr Raum für externe Beschriftungen. */
.ship-overview-map-wrap {
    padding-top: clamp(72px, 8vw, 142px) !important;
    padding-bottom: clamp(78px, 8vw, 150px) !important;
    padding-left: clamp(64px, 8vw, 135px) !important;
    padding-right: clamp(64px, 8vw, 135px) !important;
}

/* Range-Slider: bei 100% wirklich voll. */
.ship-overview-commandbar input[type="range"],
.ship-overview-legend input[type="range"],
.legend-card input[type="range"] {
    --vcg-range-fill: 100%;
    appearance: none !important;
    -webkit-appearance: none !important;
    height: 8px !important;
    border-radius: 999px !important;
    background:
        linear-gradient(
            to right,
            #e30b17 0%,
            #e30b17 var(--vcg-range-fill),
            rgba(241,244,246,.86) var(--vcg-range-fill),
            rgba(241,244,246,.86) 100%
        ) !important;
    outline: none !important;
    accent-color: #e30b17 !important;
}

.ship-overview-commandbar input[type="range"]::-webkit-slider-thumb,
.ship-overview-legend input[type="range"]::-webkit-slider-thumb,
.legend-card input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: #e30b17 !important;
    box-shadow: 0 0 10px rgba(227,11,23,.35) !important;
}

.ship-overview-commandbar input[type="range"]::-moz-range-thumb,
.ship-overview-legend input[type="range"]::-moz-range-thumb,
.legend-card input[type="range"]::-moz-range-thumb {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: #e30b17 !important;
    box-shadow: 0 0 10px rgba(227,11,23,.35) !important;
}

@media (max-width: 1280px) {
    .ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-html {
        max-width: 168px !important;
    }

    .ship-overview-map-wrap {
        padding-top: clamp(62px, 7vw, 112px) !important;
        padding-bottom: clamp(68px, 7vw, 120px) !important;
    }
}


/* ship-overview-90-labels-fix-2
   90° Labelrouting v2 + dünnere Glow-Slider.
*/

/* 90° Karteninhalt stabilisieren. */
.ship-overview-stage.ship-overview-rotated-standard {
    aspect-ratio: var(--ship-overview-aspect, 1500 / 768) !important;
    overflow: visible !important;
}

.ship-overview-stage.ship-overview-rotated-standard > #shipMapImage,
.ship-overview-stage.ship-overview-rotated-standard > img#shipMapImage,
.ship-overview-stage.ship-overview-rotated-standard .room-layer,
.ship-overview-stage.ship-overview-rotated-standard .marker-layer {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    width: calc(100% * var(--ship-overview-orig-aspect, 0.512)) !important;
    height: calc(100% * var(--ship-overview-rot-aspect, 1.953)) !important;
    transform-origin: 0 0 !important;
    transform: rotate(90deg) !important;
}

.ship-overview-stage.ship-overview-rotated-standard > #shipMapImage,
.ship-overview-stage.ship-overview-rotated-standard > img#shipMapImage {
    object-fit: fill !important;
    z-index: 1 !important;
}

.ship-overview-stage.ship-overview-rotated-standard .room-layer {
    z-index: 2 !important;
    pointer-events: all !important;
}

.ship-overview-stage.ship-overview-rotated-standard .marker-layer {
    z-index: 8 !important;
    pointer-events: none !important;
}

.ship-overview-stage.ship-overview-rotated-standard .marker {
    pointer-events: auto !important;
}

/* Alle älteren Labelsysteme ausblenden, nur V2 bleibt aktiv. */
.ship-overview-stage.ship-overview-rotated-standard .map-label-layer:not(.ship-edge-label-layer-v2),
.ship-overview-stage.ship-overview-rotated-standard .map-label-line-svg,
.ship-overview-stage.ship-overview-rotated-standard .map-label-html,
.ship-overview-stage.ship-overview-rotated-standard .ship-rotated-label-layer,
.ship-overview-stage.ship-overview-rotated-standard .ship-rotated-label-line-svg,
.ship-overview-stage.ship-overview-rotated-standard .ship-rotated-label-html,
.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-layer:not(.ship-edge-label-layer-v2),
.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-line-svg:not(.ship-edge-label-line-svg-v2),
.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-html:not(.ship-edge-label-html-v2) {
    display: none !important;
}

/* Neues Edge-Labelsystem V2. */
.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-layer-v2,
.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-line-svg-v2 {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 7 !important;
}

.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-line-halo-v2 {
    stroke-width: 2.1 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: .98 !important;
}

.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-line-contrast-v2 {
    stroke-width: 1.22 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: .86 !important;
}

.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-line-v2 {
    stroke-width: .78 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: 1 !important;
    filter:
        drop-shadow(0 0 2px rgba(0,0,0,.98))
        drop-shadow(0 0 5px rgba(0,0,0,.72)) !important;
}

.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-html-v2 {
    position: absolute !important;
    min-width: 110px !important;
    max-width: 210px !important;
    color: rgba(241,244,246,.98) !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: calc(var(--map-label-font-px, 11) * 1px) !important;
    line-height: 1.10 !important;
    letter-spacing: .035em !important;
    white-space: normal !important;
    text-align: center !important;
    text-shadow:
        0 1px 1px rgba(0,0,0,.98),
        0 0 4px rgba(0,0,0,.95),
        0 0 8px rgba(0,0,0,.82),
        0 0 12px rgba(0,0,0,.65) !important;
}

.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-html-v2.top {
    transform: translate(-50%, -100%) !important;
}

.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-html-v2.bottom {
    transform: translate(-50%, 0) !important;
}

/* Mehr Außenraum oben und unten für Edge-Lanes. */
.ship-overview-map-wrap {
    padding-top: clamp(150px, 13vw, 260px) !important;
    padding-bottom: clamp(160px, 13vw, 280px) !important;
    padding-left: clamp(50px, 6vw, 105px) !important;
    padding-right: clamp(50px, 6vw, 105px) !important;
}

/* Dünnere, glühende Slider. */
.ship-overview-commandbar input[type="range"],
.ship-overview-legend input[type="range"],
.legend-card input[type="range"] {
    --vcg-range-fill: 100%;
    appearance: none !important;
    -webkit-appearance: none !important;
    height: 4px !important;
    border-radius: 999px !important;
    background:
        linear-gradient(
            to right,
            #e30b17 0%,
            #e30b17 var(--vcg-range-fill),
            rgba(241,244,246,.76) var(--vcg-range-fill),
            rgba(241,244,246,.76) 100%
        ) !important;
    outline: none !important;
    accent-color: #e30b17 !important;
    box-shadow:
        0 0 6px rgba(227,11,23,.35),
        0 0 14px rgba(227,11,23,.18) !important;
}

.ship-overview-commandbar input[type="range"]::-webkit-slider-thumb,
.ship-overview-legend input[type="range"]::-webkit-slider-thumb,
.legend-card input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    background: #e30b17 !important;
    box-shadow:
        0 0 8px rgba(227,11,23,.65),
        0 0 18px rgba(227,11,23,.36) !important;
}

.ship-overview-commandbar input[type="range"]::-moz-range-thumb,
.ship-overview-legend input[type="range"]::-moz-range-thumb,
.legend-card input[type="range"]::-moz-range-thumb {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    background: #e30b17 !important;
    box-shadow:
        0 0 8px rgba(227,11,23,.65),
        0 0 18px rgba(227,11,23,.36) !important;
}

@media (max-width: 1280px) {
    .ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-html-v2 {
        max-width: 168px !important;
    }

    .ship-overview-map-wrap {
        padding-top: clamp(126px, 11vw, 210px) !important;
        padding-bottom: clamp(136px, 11vw, 225px) !important;
    }
}


/* ship-overview-label-rails-1 */
.ship-overview-stage.ship-overview-rotated-standard{aspect-ratio:var(--ship-overview-aspect,1500 / 768)!important;overflow:visible!important}.ship-overview-stage.ship-overview-rotated-standard>#shipMapImage,.ship-overview-stage.ship-overview-rotated-standard>img#shipMapImage,.ship-overview-stage.ship-overview-rotated-standard .room-layer,.ship-overview-stage.ship-overview-rotated-standard .marker-layer{position:absolute!important;top:0!important;left:100%!important;width:calc(100% * var(--ship-overview-orig-aspect,.512))!important;height:calc(100% * var(--ship-overview-rot-aspect,1.953))!important;transform-origin:0 0!important;transform:rotate(90deg)!important}.ship-overview-stage.ship-overview-rotated-standard>#shipMapImage,.ship-overview-stage.ship-overview-rotated-standard>img#shipMapImage{object-fit:fill!important;z-index:1!important}.ship-overview-stage.ship-overview-rotated-standard .room-layer{z-index:2!important;pointer-events:all!important}.ship-overview-stage.ship-overview-rotated-standard .marker-layer{z-index:8!important;pointer-events:none!important}.ship-overview-stage.ship-overview-rotated-standard .marker{pointer-events:auto!important}
.ship-overview-stage.ship-overview-rotated-standard .map-label-layer:not(.ship-label-rail-layer),.ship-overview-stage.ship-overview-rotated-standard .map-label-line-svg,.ship-overview-stage.ship-overview-rotated-standard .map-label-html,.ship-overview-stage.ship-overview-rotated-standard .ship-rotated-label-layer,.ship-overview-stage.ship-overview-rotated-standard .ship-rotated-label-line-svg,.ship-overview-stage.ship-overview-rotated-standard .ship-rotated-label-html,.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-layer,.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-line-svg,.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-html,.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-layer-v2,.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-line-svg-v2,.ship-overview-stage.ship-overview-rotated-standard .ship-edge-label-html-v2{display:none!important}
.ship-overview-stage.ship-overview-rotated-standard .ship-label-rail-layer,.ship-overview-stage.ship-overview-rotated-standard .ship-label-rail-svg{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:visible!important;pointer-events:none!important;z-index:7!important}.ship-overview-stage.ship-overview-rotated-standard .ship-label-rail-line-halo{stroke-width:2.1!important;vector-effect:non-scaling-stroke!important;stroke-linecap:round!important;opacity:.98!important}.ship-overview-stage.ship-overview-rotated-standard .ship-label-rail-line-contrast{stroke-width:1.2!important;vector-effect:non-scaling-stroke!important;stroke-linecap:round!important;opacity:.84!important}.ship-overview-stage.ship-overview-rotated-standard .ship-label-rail-line{stroke-width:.78!important;vector-effect:non-scaling-stroke!important;stroke-linecap:round!important;opacity:1!important;filter:drop-shadow(0 0 2px rgba(0,0,0,.98)) drop-shadow(0 0 5px rgba(0,0,0,.72))!important}.ship-overview-stage.ship-overview-rotated-standard .ship-label-rail-text{position:absolute!important;min-width:128px!important;max-width:220px!important;color:rgba(241,244,246,.98)!important;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;font-family:"Electrolize","Segoe UI",system-ui,sans-serif!important;font-size:calc(var(--map-label-font-px,11) * 1px)!important;line-height:1.1!important;letter-spacing:.035em!important;white-space:normal!important;text-shadow:0 1px 1px rgba(0,0,0,.98),0 0 4px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.82),0 0 12px rgba(0,0,0,.65)!important}.ship-overview-stage.ship-overview-rotated-standard .ship-label-rail-text.left{transform:translate(-100%,-50%)!important;text-align:right!important}.ship-overview-stage.ship-overview-rotated-standard .ship-label-rail-text.right{transform:translateY(-50%)!important;text-align:left!important}
.ship-overview-map-wrap{padding-left:clamp(170px,14vw,285px)!important;padding-right:clamp(170px,14vw,285px)!important;padding-top:clamp(48px,4vw,96px)!important;padding-bottom:clamp(52px,4vw,104px)!important}
.ship-overview-commandbar input[type="range"],.ship-overview-legend input[type="range"],.legend-card input[type="range"]{--vcg-range-fill:100%;appearance:none!important;-webkit-appearance:none!important;height:4px!important;border-radius:999px!important;background:linear-gradient(to right,#e30b17 0%,#e30b17 var(--vcg-range-fill),rgba(241,244,246,.76) var(--vcg-range-fill),rgba(241,244,246,.76) 100%)!important;outline:none!important;accent-color:#e30b17!important;box-shadow:0 0 6px rgba(227,11,23,.35),0 0 14px rgba(227,11,23,.18)!important}.ship-overview-commandbar input[type="range"]::-webkit-slider-thumb,.ship-overview-legend input[type="range"]::-webkit-slider-thumb,.legend-card input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none!important;width:16px!important;height:16px!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.42)!important;background:#e30b17!important;box-shadow:0 0 8px rgba(227,11,23,.65),0 0 18px rgba(227,11,23,.36)!important}.ship-overview-commandbar input[type="range"]::-moz-range-thumb,.ship-overview-legend input[type="range"]::-moz-range-thumb,.legend-card input[type="range"]::-moz-range-thumb{width:16px!important;height:16px!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.42)!important;background:#e30b17!important;box-shadow:0 0 8px rgba(227,11,23,.65),0 0 18px rgba(227,11,23,.36)!important}@media(max-width:1280px){.ship-overview-map-wrap{padding-left:clamp(138px,12vw,220px)!important;padding-right:clamp(138px,12vw,220px)!important}.ship-overview-stage.ship-overview-rotated-standard .ship-label-rail-text{max-width:172px!important}}




/* removed legacy ship-overview renderer blocks before v29 */




/* ship-overview-restore-deck-images-v21
   Recovery marker. v20 coordinate-basis override removed by replacing full files.
*/


/* ship-overview-recover-v26
   Safe recovery styling only: slim glowing sliders + 24px label support.
*/
.ship-overview-stage {
    --map-label-font-px: min(var(--map-label-font-px, 11), 24);
}

.ship-overview-commandbar input[type="range"],
.ship-overview-legend input[type="range"],
.legend-card input[type="range"],
.legend-label-font-control input[type="range"],
.ship-overview-slider-label input[type="range"],
input[data-label-font-size],
input[data-qf-slider] {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    width: 100% !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    padding: 0 !important;
    margin: 4px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    accent-color: #e30b17 !important;
    cursor: pointer !important;
}

.ship-overview-commandbar input[type="range"]::-webkit-slider-runnable-track,
.ship-overview-legend input[type="range"]::-webkit-slider-runnable-track,
.legend-card input[type="range"]::-webkit-slider-runnable-track,
.legend-label-font-control input[type="range"]::-webkit-slider-runnable-track,
.ship-overview-slider-label input[type="range"]::-webkit-slider-runnable-track,
input[data-label-font-size]::-webkit-slider-runnable-track,
input[data-qf-slider]::-webkit-slider-runnable-track {
    height: 2px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(to right,
        rgba(227,11,23,.95) 0%,
        rgba(227,11,23,.95) var(--vcg-range-fill, 50%),
        rgba(241,244,246,.32) var(--vcg-range-fill, 50%),
        rgba(241,244,246,.32) 100%) !important;
    box-shadow:
        0 0 5px rgba(227,11,23,.74),
        0 0 13px rgba(227,11,23,.38),
        0 0 22px rgba(227,11,23,.18),
        0 0 12px rgba(33,234,255,.11) !important;
}

.ship-overview-commandbar input[type="range"]::-webkit-slider-thumb,
.ship-overview-legend input[type="range"]::-webkit-slider-thumb,
.legend-card input[type="range"]::-webkit-slider-thumb,
.legend-label-font-control input[type="range"]::-webkit-slider-thumb,
.ship-overview-slider-label input[type="range"]::-webkit-slider-thumb,
input[data-label-font-size]::-webkit-slider-thumb,
input[data-qf-slider]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 10px !important;
    height: 10px !important;
    margin-top: -4px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.55) !important;
    background: #e30b17 !important;
    box-shadow:
        0 0 9px rgba(227,11,23,.92),
        0 0 18px rgba(227,11,23,.48),
        0 0 26px rgba(227,11,23,.24),
        0 0 2px rgba(255,255,255,.40) inset !important;
}

.ship-overview-commandbar input[type="range"]::-moz-range-track,
.ship-overview-legend input[type="range"]::-moz-range-track,
.legend-card input[type="range"]::-moz-range-track,
.legend-label-font-control input[type="range"]::-moz-range-track,
.ship-overview-slider-label input[type="range"]::-moz-range-track,
input[data-label-font-size]::-moz-range-track,
input[data-qf-slider]::-moz-range-track {
    height: 2px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(241,244,246,.32) !important;
    box-shadow:
        0 0 5px rgba(227,11,23,.74),
        0 0 13px rgba(227,11,23,.38),
        0 0 22px rgba(227,11,23,.18),
        0 0 12px rgba(33,234,255,.11) !important;
}

.ship-overview-commandbar input[type="range"]::-moz-range-progress,
.ship-overview-legend input[type="range"]::-moz-range-progress,
.legend-card input[type="range"]::-moz-range-progress,
.legend-label-font-control input[type="range"]::-moz-range-progress,
.ship-overview-slider-label input[type="range"]::-moz-range-progress,
input[data-label-font-size]::-moz-range-progress,
input[data-qf-slider]::-moz-range-progress {
    height: 2px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(227,11,23,.95) !important;
    box-shadow:
        0 0 5px rgba(227,11,23,.74),
        0 0 13px rgba(227,11,23,.38) !important;
}

.ship-overview-commandbar input[type="range"]::-moz-range-thumb,
.ship-overview-legend input[type="range"]::-moz-range-thumb,
.legend-card input[type="range"]::-moz-range-thumb,
.legend-label-font-control input[type="range"]::-moz-range-thumb,
.ship-overview-slider-label input[type="range"]::-moz-range-thumb,
input[data-label-font-size]::-moz-range-thumb,
input[data-qf-slider]::-moz-range-thumb {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.55) !important;
    background: #e30b17 !important;
    box-shadow:
        0 0 9px rgba(227,11,23,.92),
        0 0 18px rgba(227,11,23,.48),
        0 0 26px rgba(227,11,23,.24),
        0 0 2px rgba(255,255,255,.40) inset !important;
}

/* ship-overview-recover-v26 */


/* ship-overview-fixed-frame-v29
   Rotate the fixed Admin/Rollenplan coordinate frame: 768x1500 -> 1500x768.
*/
.ship-overview-map-panel,
.ship-overview-map-wrap {
    overflow: visible !important;
}

.ship-overview-map-wrap {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px clamp(105px, 14vw, 220px) 34px !important;
}

.ship-overview-map-wrap .ship-overview-stage.ship-overview-fixed-frame-v29,
.ship-overview-stage.ship-overview-fixed-frame-v29 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: min(100%, 1320px) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--ship-overview-fixed-frame-stage-aspect, 1500 / 768) !important;
    margin: 0 auto !important;
    overflow: visible !important;
    transform:
        translate(var(--ship-overview-pan-x, 0px), var(--ship-overview-pan-y, 0px))
        scale(var(--ship-overview-zoom, 1)) !important;
    transform-origin: 50% 50% !important;
    cursor: grab !important;
    touch-action: none !important;
}

.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-coordinate-frame-v28 {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    width: calc(100% * var(--ship-overview-fixed-frame-inner-w, 0.512)) !important;
    height: calc(100% * var(--ship-overview-fixed-frame-inner-h, 1.953125)) !important;
    transform-origin: 0 0 !important;
    transform: rotate(90deg) !important;
    overflow: visible !important;
    z-index: 1 !important;
}

.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-coordinate-frame-v28 > #shipMapImage,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-coordinate-frame-v28 > img#shipMapImage,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-coordinate-frame-v28 > .room-layer,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-coordinate-frame-v28 > .marker-layer {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    transform-origin: 50% 50% !important;
}

.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-coordinate-frame-v28 > #shipMapImage,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-coordinate-frame-v28 > img#shipMapImage {
    display: block !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
    opacity: .96 !important;
    z-index: 1 !important;
    filter: drop-shadow(0 0 28px rgba(33,234,255,.15));
}

.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-coordinate-frame-v28 > .room-layer {
    display: block !important;
    z-index: 2 !important;
    pointer-events: all !important;
}

.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-coordinate-frame-v28 > .marker-layer {
    display: block !important;
    z-index: 8 !important;
    pointer-events: none !important;
}

.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-coordinate-frame-v28 .marker {
    pointer-events: auto !important;
}

.ship-overview-stage.ship-overview-fixed-frame-v29 .map-label-layer,
.ship-overview-stage.ship-overview-fixed-frame-v29 .map-label-line-svg,
.ship-overview-stage.ship-overview-fixed-frame-v29 .map-label-html,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-room-label-layer-v10,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-room-label-layer-v14,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-room-label-layer-v15,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-room-label-layer-v16,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-room-label-layer-v17,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-room-label-layer-v22,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-room-label-layer-v23,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-room-label-layer-v24,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-room-label-layer-v25,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-label-rail-layer,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-label-rail-layer-v2,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-label-rail-layer-v3,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-label-rail-layer-v4,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-label-rail-layer-v5,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-label-rail-layer-v6,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-rotated-label-layer,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-edge-label-layer,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-edge-label-layer-v2,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-map-content-v17,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-map-content-v22,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-render-v23,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-render-v24,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-render-v25 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-room-label-layer-v28,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-room-label-svg-v28 {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 20 !important;
}

.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-room-label-line-halo-v28 {
    stroke-width: 3.9 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: 1 !important;
}

.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-room-label-line-contrast-v28 {
    stroke-width: 2.25 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: .94 !important;
}

.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-room-label-line-v28 {
    stroke-width: 1.5 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: 1 !important;
    filter:
        drop-shadow(0 0 5px rgba(255,255,255,.72))
        drop-shadow(0 0 12px rgba(255,255,255,.36))
        drop-shadow(0 0 12px rgba(0,0,0,.92))
        drop-shadow(0 0 22px rgba(0,0,0,.78)) !important;
}

.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-room-label-text-v28 {
    position: absolute !important;
    display: block !important;
    min-width: 96px !important;
    max-width: 220px !important;
    color: rgba(246,251,255,.99) !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: calc(var(--map-label-font-px, 11) * 1px) !important;
    line-height: 1.1 !important;
    letter-spacing: .035em !important;
    white-space: normal !important;
    text-align: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-shadow:
        0 0 4px rgba(255,255,255,.30),
        0 1px 1px rgba(0,0,0,.99),
        0 0 7px rgba(0,0,0,.96),
        0 0 16px rgba(0,0,0,.86),
        0 0 26px rgba(0,0,0,.70) !important;
}

.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-room-label-text-v28.top {
    transform: translate(-50%, -100%) !important;
}

.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-room-label-text-v28.bottom {
    transform: translate(-50%, 0) !important;
}

.ship-overview-stage.ship-overview-fixed-frame-v29 .marker .marker-label {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: nowrap !important;
    max-width: 240px !important;
    left: 26px !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(-90deg) !important;
    transform-origin: left center !important;
}

.ship-overview-stage.ship-overview-fixed-frame-v29[data-marker-tooltip-mode="always"] .marker .marker-label,
.ship-overview-stage.ship-overview-fixed-frame-v29 .marker:hover .marker-label,
.ship-overview-stage.ship-overview-fixed-frame-v29 .marker.tooltip-enabled:hover .marker-label {
    display: block !important;
}

/* keep the recovered slim sliders */
.ship-overview-commandbar input[type="range"],
.ship-overview-legend input[type="range"],
.legend-card input[type="range"],
.legend-label-font-control input[type="range"],
.ship-overview-slider-label input[type="range"],
input[data-label-font-size],
input[data-qf-slider] {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    width: 100% !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    padding: 0 !important;
    margin: 4px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    accent-color: #e30b17 !important;
    cursor: pointer !important;
}

.ship-overview-commandbar input[type="range"]::-webkit-slider-runnable-track,
.ship-overview-legend input[type="range"]::-webkit-slider-runnable-track,
.legend-card input[type="range"]::-webkit-slider-runnable-track,
.legend-label-font-control input[type="range"]::-webkit-slider-runnable-track,
.ship-overview-slider-label input[type="range"]::-webkit-slider-runnable-track,
input[data-label-font-size]::-webkit-slider-runnable-track,
input[data-qf-slider]::-webkit-slider-runnable-track {
    height: 2px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(to right,
        rgba(227,11,23,.95) 0%,
        rgba(227,11,23,.95) var(--vcg-range-fill, 50%),
        rgba(241,244,246,.32) var(--vcg-range-fill, 50%),
        rgba(241,244,246,.32) 100%) !important;
    box-shadow:
        0 0 5px rgba(227,11,23,.74),
        0 0 13px rgba(227,11,23,.38),
        0 0 22px rgba(227,11,23,.18),
        0 0 12px rgba(33,234,255,.11) !important;
}

.ship-overview-commandbar input[type="range"]::-webkit-slider-thumb,
.ship-overview-legend input[type="range"]::-webkit-slider-thumb,
.legend-card input[type="range"]::-webkit-slider-thumb,
.legend-label-font-control input[type="range"]::-webkit-slider-thumb,
.ship-overview-slider-label input[type="range"]::-webkit-slider-thumb,
input[data-label-font-size]::-webkit-slider-thumb,
input[data-qf-slider]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 10px !important;
    height: 10px !important;
    margin-top: -4px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.55) !important;
    background: #e30b17 !important;
    box-shadow:
        0 0 9px rgba(227,11,23,.92),
        0 0 18px rgba(227,11,23,.48),
        0 0 26px rgba(227,11,23,.24),
        0 0 2px rgba(255,255,255,.40) inset !important;
}

/* ship-overview-fixed-frame-v29 */


/* ship-overview-fixed-frame-v29
   Stability fix: legacy overview scripts removed; keep active frame image visible.
*/
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-coordinate-frame-v29 > #shipMapImage,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-coordinate-frame-v29 > img#shipMapImage {
    display: block !important;
    visibility: visible !important;
    opacity: .96 !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
}

.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-coordinate-frame-v29 > .room-layer,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-coordinate-frame-v29 > .marker-layer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ship-overview-fixed-frame-v29 */

/* ship-overview-fixed-frame-v29 */


/* ship-overview-cargo-component-v35
   - Schiff größer darstellen
   - zusätzliche Top/Bottom-Reserve für Raumtexte
   - Legendenkopf wieder weiß/Zero Prime
   - Legendenspalte dynamisch je nach auf/zu-Zustand
*/
.ship-overview-map-wrap {
    --ship-overview-legend-space-open: clamp(248px, 18vw, 292px);
    --ship-overview-legend-space-closed: 62px;
    --ship-overview-stage-max-open: 1560px;
    --ship-overview-stage-max-closed: 1720px;
    --ship-overview-label-space-top: 96px;
    --ship-overview-label-space-bottom: 114px;
    --ship-overview-stage-side-pad: 18px;
    position: relative !important;
    padding-top: var(--ship-overview-label-space-top) !important;
    padding-bottom: var(--ship-overview-label-space-bottom) !important;
    padding-left: var(--ship-overview-stage-side-pad) !important;
    padding-right: calc(var(--ship-overview-stage-side-pad) + var(--ship-overview-legend-space-open)) !important;
    min-height: 0 !important;
    overflow: visible !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.ship-overview-map-wrap.ship-overview-legend-collapsed {
    padding-right: calc(var(--ship-overview-stage-side-pad) + var(--ship-overview-legend-space-closed)) !important;
}

.ship-overview-map-wrap .ship-overview-stage.ship-overview-fixed-frame-v29,
.ship-overview-map-wrap .ship-overview-stage.ship-overview-cargo-component-v35 {
    width: min(calc(100% - var(--ship-overview-stage-side-pad)), var(--ship-overview-stage-max-open)) !important;
    margin: 0 auto !important;
}

.ship-overview-map-wrap.ship-overview-legend-open .ship-overview-stage.ship-overview-fixed-frame-v29,
.ship-overview-map-wrap.ship-overview-legend-open .ship-overview-stage.ship-overview-cargo-component-v35 {
    width: min(calc(100% - var(--ship-overview-stage-side-pad)), var(--ship-overview-stage-max-open)) !important;
}

.ship-overview-map-wrap.ship-overview-legend-collapsed .ship-overview-stage.ship-overview-fixed-frame-v29,
.ship-overview-map-wrap.ship-overview-legend-collapsed .ship-overview-stage.ship-overview-cargo-component-v35 {
    width: min(calc(100% - var(--ship-overview-stage-side-pad)), var(--ship-overview-stage-max-closed)) !important;
}

.ship-overview-map-wrap .ship-overview-stage.ship-overview-fixed-frame-v29 .ship-room-label-layer-v28,
.ship-overview-map-wrap .ship-overview-stage.ship-overview-cargo-component-v35 .ship-room-label-layer-v28 {
    overflow: visible !important;
}

.ship-overview-legend {
    top: 28px !important;
    right: 18px !important;
    min-width: 230px !important;
}

.ship-overview-legend > summary {
    color: rgba(241,244,246,.98) !important;
    font-family: "Zero Prime", "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
    text-shadow:
        0 0 10px rgba(255,255,255,.16),
        0 0 18px rgba(255,255,255,.08) !important;
}

.ship-overview-legend > summary::marker,
.ship-overview-legend > summary::-webkit-details-marker {
    color: rgba(241,244,246,.98) !important;
}

.ship-overview-legend:not([open]) {
    min-width: 0 !important;
    width: auto !important;
    padding: 10px 14px !important;
    background: rgba(3,7,9,.78) !important;
}

.ship-overview-legend:not([open]) > :not(summary) {
    display: none !important;
}

.ship-overview-legend:not([open]) > summary {
    margin: 0 !important;
}

@media (max-width: 1500px) {
    .ship-overview-map-wrap {
        --ship-overview-legend-space-open: 260px;
        --ship-overview-stage-max-open: 1380px;
        --ship-overview-stage-max-closed: 1480px;
    }
}

@media (max-width: 1180px) {
    .ship-overview-map-wrap {
        padding-right: 18px !important;
        padding-top: 80px !important;
        padding-bottom: 94px !important;
    }

    .ship-overview-map-wrap .ship-overview-stage.ship-overview-fixed-frame-v29,
    .ship-overview-map-wrap .ship-overview-stage.ship-overview-cargo-component-v35,
    .ship-overview-map-wrap.ship-overview-legend-open .ship-overview-stage.ship-overview-fixed-frame-v29,
    .ship-overview-map-wrap.ship-overview-legend-open .ship-overview-stage.ship-overview-cargo-component-v35,
    .ship-overview-map-wrap.ship-overview-legend-collapsed .ship-overview-stage.ship-overview-fixed-frame-v29,
    .ship-overview-map-wrap.ship-overview-legend-collapsed .ship-overview-stage.ship-overview-cargo-component-v35 {
        width: min(100%, 1180px) !important;
    }

    .ship-overview-legend {
        position: static !important;
        margin-top: 20px !important;
        width: auto !important;
    }
}

/* ship-overview-cargo-component-v35 */


/* ship-overview-layout-tuning-v35
   Feinschliff nach v30:
   1. Optimale Maximalgröße abhängig von Legendenzustand.
   2. Mehr sichere obere/untere Textzone.
   3. Weiche Animation beim Auf-/Zuklappen der Legende.
*/
.ship-overview-map-wrap.ship-overview-layout-tuned-v31,
.ship-overview-map-wrap {
    --ship-overview-legend-space-open: clamp(246px, 15.5vw, 302px);
    --ship-overview-legend-space-closed: 58px;

    /* Bei offener Legende bleibt rechts Sicherheitsraum; bei geschlossener Legende darf das Schiff breiter werden. */
    --ship-overview-stage-max-open: min(1540px, calc(100vw - 390px));
    --ship-overview-stage-max-closed: min(1840px, calc(100vw - 110px));

    /* Freiraum für externe Raumbeschriftungen. */
    --ship-overview-label-space-top: clamp(112px, 9.2vw, 156px);
    --ship-overview-label-space-bottom: clamp(132px, 10.8vw, 184px);
    --ship-overview-stage-side-pad: clamp(12px, 1.6vw, 26px);

    transition:
        padding .28s ease,
        min-height .28s ease !important;
}

.ship-overview-map-wrap.ship-overview-legend-open,
.ship-overview-map-wrap.ship-overview-layout-tuned-v31.ship-overview-legend-open {
    padding-top: var(--ship-overview-label-space-top) !important;
    padding-bottom: var(--ship-overview-label-space-bottom) !important;
    padding-left: var(--ship-overview-stage-side-pad) !important;
    padding-right: calc(var(--ship-overview-stage-side-pad) + var(--ship-overview-legend-space-open)) !important;
}

.ship-overview-map-wrap.ship-overview-legend-collapsed,
.ship-overview-map-wrap.ship-overview-layout-tuned-v31.ship-overview-legend-collapsed {
    padding-top: var(--ship-overview-label-space-top) !important;
    padding-bottom: var(--ship-overview-label-space-bottom) !important;
    padding-left: var(--ship-overview-stage-side-pad) !important;
    padding-right: calc(var(--ship-overview-stage-side-pad) + var(--ship-overview-legend-space-closed)) !important;
}

/* Exakte Größenregel: größer, aber der Legende nicht unterlaufen. */
.ship-overview-map-wrap.ship-overview-legend-open .ship-overview-stage.ship-overview-fixed-frame-v29,
.ship-overview-map-wrap.ship-overview-legend-open .ship-overview-stage.ship-overview-cargo-component-v35,
.ship-overview-map-wrap.ship-overview-legend-open .ship-overview-stage.ship-overview-layout-tuned-v31 {
    width: min(100%, var(--ship-overview-stage-max-open)) !important;
}

.ship-overview-map-wrap.ship-overview-legend-collapsed .ship-overview-stage.ship-overview-fixed-frame-v29,
.ship-overview-map-wrap.ship-overview-legend-collapsed .ship-overview-stage.ship-overview-cargo-component-v35,
.ship-overview-map-wrap.ship-overview-legend-collapsed .ship-overview-stage.ship-overview-layout-tuned-v31 {
    width: min(100%, var(--ship-overview-stage-max-closed)) !important;
}

.ship-overview-stage.ship-overview-layout-tuned-v31,
.ship-overview-map-wrap .ship-overview-stage.ship-overview-layout-tuned-v31 {
    transition:
        width .28s ease,
        transform .22s ease,
        filter .22s ease !important;
}

/* Labels dürfen weiter außerhalb liegen, ohne abgeschnitten zu werden. */
.ship-overview-map-panel,
.ship-overview-map-wrap,
.ship-overview-stage.ship-overview-layout-tuned-v31,
.ship-overview-stage.ship-overview-layout-tuned-v31 .ship-room-label-layer-v28,
.ship-overview-stage.ship-overview-layout-tuned-v31 .ship-room-label-svg-v28 {
    overflow: visible !important;
}

.ship-overview-stage.ship-overview-layout-tuned-v31 .ship-room-label-text-v28.top {
    transform: translate(-50%, -108%) !important;
}

.ship-overview-stage.ship-overview-layout-tuned-v31 .ship-room-label-text-v28.bottom {
    transform: translate(-50%, 8px) !important;
}

/* Legendenkopf: weiß, Zero Prime, klarer Glow. */
.ship-overview-legend > summary {
    color: rgba(248,251,255,.99) !important;
    font-family: "Zero Prime", "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: 15px !important;
    letter-spacing: .085em !important;
    text-transform: uppercase !important;
    text-shadow:
        0 0 8px rgba(255,255,255,.24),
        0 0 18px rgba(255,255,255,.12),
        0 0 26px rgba(33,234,255,.10) !important;
}

/* Weiche Legendenanimation. details selbst kann height nicht sauber animieren, daher animieren wir Container/Items. */
.ship-overview-legend {
    transition:
        width .24s ease,
        min-width .24s ease,
        padding .24s ease,
        background-color .24s ease,
        box-shadow .24s ease,
        opacity .20s ease !important;
}

.ship-overview-legend > :not(summary) {
    transition:
        opacity .18s ease,
        transform .22s ease,
        max-height .24s ease !important;
}

.ship-overview-legend[open] > :not(summary) {
    opacity: 1 !important;
    transform: translateY(0) !important;
    max-height: 900px !important;
}

.ship-overview-legend:not([open]) > :not(summary) {
    opacity: 0 !important;
    transform: translateY(-6px) !important;
    max-height: 0 !important;
    overflow: hidden !important;
}

/* Geschlossene Legende möglichst schlank halten, damit die Karte Fläche gewinnt. */
.ship-overview-legend:not([open]) {
    min-width: 0 !important;
    width: auto !important;
    padding: 10px 14px !important;
    background: rgba(3,7,9,.70) !important;
    box-shadow: 0 0 18px rgba(0,0,0,.28) !important;
}

.ship-overview-legend:not([open]) > summary {
    margin: 0 !important;
}

/* Große Monitore besser ausnutzen. */
@media (min-width: 1900px) {
    .ship-overview-map-wrap.ship-overview-layout-tuned-v31 {
        --ship-overview-stage-max-open: min(1660px, calc(100vw - 410px));
        --ship-overview-stage-max-closed: min(1960px, calc(100vw - 120px));
        --ship-overview-label-space-top: clamp(122px, 7.4vw, 168px);
        --ship-overview-label-space-bottom: clamp(142px, 8vw, 194px);
    }
}

@media (max-width: 1500px) {
    .ship-overview-map-wrap.ship-overview-layout-tuned-v31,
    .ship-overview-map-wrap {
        --ship-overview-stage-max-open: min(1320px, calc(100vw - 330px));
        --ship-overview-stage-max-closed: min(1480px, calc(100vw - 96px));
        --ship-overview-label-space-top: clamp(96px, 8vw, 132px);
        --ship-overview-label-space-bottom: clamp(112px, 9vw, 150px);
    }
}

@media (max-width: 1180px) {
    .ship-overview-map-wrap.ship-overview-layout-tuned-v31,
    .ship-overview-map-wrap {
        padding-right: 18px !important;
        padding-left: 18px !important;
        --ship-overview-stage-max-open: 1180px;
        --ship-overview-stage-max-closed: 1180px;
    }
}

/* ship-overview-layout-tuning-v35 */


/* ship-overview-room-hover-v35
   Normalzustand: Raumfläche blasser/transparenter, Rahmen dezenter.
   Hoverzustand: Raumfläche deutlicher, Rahmen deutlicher.
   Keine JS-/Dropdown-/Koordinatenänderung.
*/
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-coordinate-frame-v28 .room-shape,
.ship-overview-stage.ship-overview-cargo-component-v35 .ship-coordinate-frame-v28 .room-shape,
.ship-overview-stage.ship-overview-layout-tuned-v33 .ship-coordinate-frame-v28 .room-shape {
    fill-opacity: .42 !important;
    stroke-opacity: .72 !important;
    stroke-width: .34 !important;
    transition:
        fill-opacity .13s ease,
        stroke-opacity .13s ease,
        stroke-width .13s ease,
        filter .13s ease !important;
    filter: drop-shadow(0 0 3px rgba(255,174,39,.08)) !important;
}

.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-coordinate-frame-v28 .room-shape:hover,
.ship-overview-stage.ship-overview-cargo-component-v35 .ship-coordinate-frame-v28 .room-shape:hover,
.ship-overview-stage.ship-overview-layout-tuned-v33 .ship-coordinate-frame-v28 .room-shape:hover {
    fill-opacity: 1 !important;
    stroke-opacity: 1 !important;
    stroke-width: .78 !important;
    filter:
        drop-shadow(0 0 6px rgba(255,174,39,.34))
        drop-shadow(0 0 13px rgba(255,174,39,.18)) !important;
}

/* Label-Ebene sichtbar halten, aber keine Eingabeevents blockieren. */
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-room-label-layer-v28,
.ship-overview-stage.ship-overview-fixed-frame-v29 .ship-room-label-svg-v28,
.ship-overview-stage.ship-overview-cargo-component-v35 .ship-room-label-layer-v28,
.ship-overview-stage.ship-overview-cargo-component-v35 .ship-room-label-svg-v28,
.ship-overview-stage.ship-overview-layout-tuned-v33 .ship-room-label-layer-v28,
.ship-overview-stage.ship-overview-layout-tuned-v33 .ship-room-label-svg-v28 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

/* ship-overview-room-hover-v35 */


/* ship-overview-initial-room-labels-v35
   Keine neue Optik; nur Marker für die Prüfung.
*/


/* ship-overview-cargo-component-v35 */
.hidden-by-component-filter {
    display: none !important;
}

.legend-component-subfilters {
    margin: -2px 0 8px 19px;
    padding: 7px 0 5px 12px;
    border-left: 1px solid rgba(180,132,255,.34);
}

.legend-component-subfilters > summary {
    color: rgba(241,244,246,.88);
    cursor: pointer;
    font-family: "Zero Prime", "Electrolize", "Segoe UI", system-ui, sans-serif;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.legend-component-subfilter-list {
    display: grid;
    gap: 3px;
    margin-top: 7px;
}

.legend-component-subfilter {
    min-height: 24px !important;
    padding: 4px 7px !important;
    font-size: 10px !important;
}

.legend-component-subfilter input,
.legend-cargo-grid-toggle input,
.legend-room-toggle input {
    accent-color: var(--red);
}

.cargo-grid-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.cargo-grid-layer-hidden-by-legend {
    display: none !important;
}

.cargo-grid-shape {
    pointer-events: all;
    cursor: help;
    fill-opacity: .46;
    stroke-opacity: .78;
    transition: fill-opacity .13s ease, stroke-opacity .13s ease, stroke-width .13s ease, filter .13s ease;
    filter: drop-shadow(0 0 4px rgba(24,214,255,.10));
}

.cargo-grid-shape:hover {
    fill-opacity: 1;
    stroke-opacity: 1;
    stroke-width: .78;
    filter:
        drop-shadow(0 0 7px rgba(24,214,255,.38))
        drop-shadow(0 0 14px rgba(24,214,255,.20));
}

.legend-dot.cargo-grid {
    color: #18d6ff;
    background: #18d6ff;
}

/* Fallback-Raumlabel-Ebene */
.ship-room-label-layer-v35,
.ship-room-label-svg-v35 {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 21 !important;
}

.ship-room-label-line-halo-v35 {
    stroke-width: 3.9 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: 1 !important;
}

.ship-room-label-line-contrast-v35 {
    stroke-width: 2.25 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: .94 !important;
}

.ship-room-label-line-v35 {
    stroke-width: 1.5 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: 1 !important;
    filter:
        drop-shadow(0 0 5px rgba(255,255,255,.72))
        drop-shadow(0 0 12px rgba(255,255,255,.36))
        drop-shadow(0 0 12px rgba(0,0,0,.92))
        drop-shadow(0 0 22px rgba(0,0,0,.78)) !important;
}

.ship-room-label-text-v35 {
    position: absolute !important;
    display: block !important;
    min-width: 96px !important;
    max-width: 220px !important;
    color: rgba(246,251,255,.99) !important;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: calc(var(--map-label-font-px, 11) * 1px) !important;
    line-height: 1.1 !important;
    letter-spacing: .035em !important;
    white-space: normal !important;
    text-align: center !important;
    text-shadow:
        0 0 4px rgba(255,255,255,.30),
        0 1px 1px rgba(0,0,0,.99),
        0 0 7px rgba(0,0,0,.96),
        0 0 16px rgba(0,0,0,.86),
        0 0 26px rgba(0,0,0,.70) !important;
}

.ship-room-label-text-v35.top {
    transform: translate(-50%, -108%) !important;
}

.ship-room-label-text-v35.bottom {
    transform: translate(-50%, 8px) !important;
}

/* ship-overview-cargo-component-v35 */


/* ship-overview-cargo-grid-labels-v35 */
.ship-cargo-grid-label-layer-v35,
.ship-cargo-grid-label-svg-v35 {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 22 !important;
}

.ship-cargo-grid-label-line-halo-v35 {
    stroke-width: 3.9 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
}

.ship-cargo-grid-label-line-contrast-v35 {
    stroke-width: 2.1 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: .9 !important;
}

.ship-cargo-grid-label-line-v35 {
    stroke-width: 1.35 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    filter:
        drop-shadow(0 0 5px rgba(24,214,255,.58))
        drop-shadow(0 0 12px rgba(24,214,255,.24))
        drop-shadow(0 0 12px rgba(0,0,0,.92)) !important;
}

.ship-cargo-grid-label-text-v35 {
    position: absolute !important;
    display: block !important;
    min-width: 110px !important;
    max-width: 240px !important;
    color: rgba(232,252,255,.99) !important;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: calc(max(10, var(--map-label-font-px, 11) - 1) * 1px) !important;
    line-height: 1.1 !important;
    letter-spacing: .035em !important;
    white-space: normal !important;
    text-align: center !important;
    text-shadow:
        0 0 5px rgba(24,214,255,.28),
        0 1px 1px rgba(0,0,0,.99),
        0 0 8px rgba(0,0,0,.96),
        0 0 18px rgba(0,0,0,.86) !important;
}

.ship-cargo-grid-label-text-v35.top {
    transform: translate(-50%, -100%) !important;
}

.ship-cargo-grid-label-text-v35.bottom {
    transform: translate(-50%, 0) !important;
}

/* ship-overview-cargo-grid-labels-v35 */


/* ship-overview-filter-layout-v41-recover */
.ship-overview-map-wrap {
    display: grid !important;
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr) minmax(210px, 250px) !important;
    gap: 18px !important;
    align-items: start !important;
    padding: 18px 18px 34px !important;
}

.ship-overview-filter-legend,
.ship-overview-legend {
    position: sticky !important;
    top: 16px !important;
    width: 100% !important;
    max-width: 250px !important;
    max-height: calc(100vh - 120px) !important;
    overflow: auto !important;
    z-index: 30 !important;
}

.ship-overview-filter-legend {
    grid-column: 1 !important;
    justify-self: start !important;
}

.ship-overview-map-wrap .ship-overview-stage,
.ship-overview-stage {
    grid-column: 2 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
}

.ship-overview-legend {
    grid-column: 3 !important;
    justify-self: end !important;
}

.ship-overview-filter-legend > summary,
.ship-overview-legend > summary {
    color: #f1f4f6 !important;
    font-family: "Zero Prime", "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    text-shadow: 0 0 8px rgba(255,255,255,.2) !important;
}

.ship-overview-filter-legend .legend-filter-item,
.ship-overview-filter-legend .legend-room-toggle,
.ship-overview-filter-legend .legend-cargo-grid-toggle,
.ship-overview-filter-legend .legend-component-subfilter {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 30px !important;
    color: rgba(241,244,246,.92) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 4px 0 !important;
    cursor: pointer !important;
}

.ship-overview-filter-legend .legend-component-subfilters {
    margin: 0 0 8px 26px !important;
    padding: 6px 0 4px 12px !important;
    border-left: 1px solid rgba(168,117,255,.34) !important;
}

.ship-overview-filter-legend .legend-component-subfilters > summary {
    color: rgba(241,244,246,.88) !important;
    cursor: pointer !important;
    font-family: "Zero Prime", "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: 10px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.ship-overview-filter-legend .legend-component-subfilter-list {
    display: grid !important;
    gap: 3px !important;
    margin-top: 7px !important;
}

.ship-overview-filter-legend .legend-component-subfilter input,
.ship-overview-filter-legend .legend-room-toggle input,
.ship-overview-filter-legend .legend-cargo-grid-toggle input {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.ship-overview-filter-legend .legend-component-subfilter::before {
    content: '' !important;
    display: inline-flex !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #a875ff !important;
    box-shadow: 0 0 6px rgba(168,117,255,.85) !important;
    flex: 0 0 10px !important;
}

.ship-overview-filter-legend .legend-filter-muted {
    opacity: .42 !important;
}

.ship-overview-filter-legend .legend-dot.cargo-grid {
    background: #18d6ff !important;
    color: #18d6ff !important;
}

.ship-room-label-layer-v28,
.ship-room-label-svg-v28,
.ship-room-label-layer-v35,
.ship-room-label-svg-v35 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.ship-room-label-layer-v36,
.ship-room-label-svg-v36 {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none !important;
}

.ship-room-label-text-v36 {
    position: absolute !important;
    transform: translate(-50%, 0) !important;
    color: #f1f4f6 !important;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: calc(var(--map-label-font-px, 11) * 1px) !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.96), 0 0 4px rgba(0,0,0,.92), 0 0 8px rgba(0,0,0,.74) !important;
}

.ship-room-label-text-v36.top { margin-top: -1px !important; }
.ship-room-label-text-v36.bottom { margin-top: 1px !important; }
.ship-room-label-line-halo-v36 { stroke-width: 1.1 !important; opacity: .92 !important; }
.ship-room-label-line-contrast-v36 { stroke-width: .74 !important; opacity: .88 !important; }
.ship-room-label-line-v36 { stroke-width: .46 !important; opacity: .96 !important; filter: drop-shadow(0 0 4px rgba(255,162,0,.35)); }

@media (max-width: 1400px) {
    .ship-overview-map-wrap {
        grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) minmax(190px, 230px) !important;
        gap: 14px !important;
    }
}

@media (max-width: 1180px) {
    .ship-overview-map-wrap {
        grid-template-columns: 1fr !important;
    }
    .ship-overview-filter-legend,
    .ship-overview-map-wrap .ship-overview-stage,
    .ship-overview-legend {
        grid-column: 1 !important;
        max-width: none !important;
        position: relative !important;
        top: auto !important;
    }
}


/* ship-overview-filter-layout-v41-recover
   Korrektur: Legende links, Steuerung rechts, Schiff nutzt die verfügbare Mitte.
*/
.ship-overview-map-wrap.ship-overview-filter-layout-v41-recover-active,
.ship-overview-map-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: clamp(620px, 57vw, 980px) !important;
    padding:
        clamp(96px, 7.5vw, 142px)
        clamp(276px, 15.8vw, 318px)
        clamp(126px, 8.5vw, 178px) !important;
    overflow: visible !important;
}

.ship-overview-filter-legend,
.ship-overview-legend {
    position: absolute !important;
    top: 34px !important;
    width: clamp(224px, 13vw, 262px) !important;
    max-width: clamp(224px, 13vw, 262px) !important;
    max-height: calc(100% - 68px) !important;
    overflow: auto !important;
    z-index: 45 !important;
    margin: 0 !important;
}

.ship-overview-filter-legend {
    left: 18px !important;
    right: auto !important;
}

.ship-overview-legend {
    right: 18px !important;
    left: auto !important;
}

.ship-overview-map-wrap .ship-overview-stage,
.ship-overview-map-wrap .ship-overview-stage.ship-overview-fixed-frame-v29,
.ship-overview-stage {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    justify-self: stretch !important;
    grid-column: auto !important;
}

.ship-overview-filter-legend > summary,
.ship-overview-legend > summary {
    color: #f1f4f6 !important;
    font-family: "Zero Prime", "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: 14px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 8px rgba(255,255,255,.22), 0 0 16px rgba(255,255,255,.10) !important;
}

.ship-overview-filter-legend .legend-label-tools {
    display: none !important;
}

.ship-overview-legend [data-marker-toggle],
.ship-overview-legend .legend-room-toggle,
.ship-overview-legend .legend-cargo-grid-toggle,
.ship-overview-legend .legend-component-subfilters {
    display: none !important;
}

.ship-overview-filter-legend .legend-filter-item,
.ship-overview-filter-legend .legend-room-toggle,
.ship-overview-filter-legend .legend-cargo-grid-toggle,
.ship-overview-filter-legend .legend-component-subfilter {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 30px !important;
    color: rgba(241,244,246,.92) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 4px 0 !important;
    cursor: pointer !important;
    font-size: 12px !important;
}

.ship-overview-filter-legend .legend-component-subfilters {
    margin: 0 0 8px 26px !important;
    padding: 6px 0 4px 12px !important;
    border-left: 1px solid rgba(168,117,255,.34) !important;
}

.ship-overview-filter-legend .legend-component-subfilters > summary {
    color: rgba(241,244,246,.88) !important;
    cursor: pointer !important;
    font-family: "Zero Prime", "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: 10px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.ship-overview-filter-legend .legend-component-subfilter-list {
    display: grid !important;
    gap: 3px !important;
    margin-top: 7px !important;
}

.ship-overview-filter-legend .legend-component-subfilter input,
.ship-overview-filter-legend .legend-room-toggle input,
.ship-overview-filter-legend .legend-cargo-grid-toggle input {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.ship-overview-filter-legend .legend-component-subfilter::before {
    content: '' !important;
    display: inline-flex !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    background: #a875ff !important;
    color: #a875ff !important;
    box-shadow: 0 0 9px rgba(0,0,0,.75), 0 0 7px currentColor !important;
    flex: 0 0 18px !important;
}

.ship-overview-filter-legend .legend-filter-muted {
    opacity: .42 !important;
}

.ship-overview-filter-legend .legend-dot.cargo-grid {
    background: #18d6ff !important;
    color: #18d6ff !important;
}

.ship-room-label-layer-v28,
.ship-room-label-svg-v28,
.ship-room-label-layer-v35,
.ship-room-label-svg-v35,
.ship-room-label-layer-v36,
.ship-room-label-svg-v36 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.ship-room-label-layer-v37,
.ship-room-label-svg-v37 {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 24 !important;
}

.ship-room-label-text-v37 {
    position: absolute !important;
    display: block !important;
    min-width: 96px !important;
    max-width: 220px !important;
    color: rgba(246,251,255,.99) !important;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: calc(var(--map-label-font-px, 11) * 1px) !important;
    line-height: 1.1 !important;
    letter-spacing: .035em !important;
    white-space: normal !important;
    text-align: center !important;
    text-shadow:
        0 0 4px rgba(255,255,255,.30),
        0 1px 1px rgba(0,0,0,.99),
        0 0 7px rgba(0,0,0,.96),
        0 0 16px rgba(0,0,0,.86),
        0 0 26px rgba(0,0,0,.70) !important;
}

.ship-room-label-text-v37.top {
    transform: translate(-50%, -108%) !important;
}

.ship-room-label-text-v37.bottom {
    transform: translate(-50%, 8px) !important;
}

.ship-room-label-line-halo-v37 {
    stroke-width: 3.9 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: 1 !important;
}

.ship-room-label-line-contrast-v37 {
    stroke-width: 2.25 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: .94 !important;
}

.ship-room-label-line-v37 {
    stroke-width: 1.5 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: 1 !important;
    filter:
        drop-shadow(0 0 5px rgba(255,255,255,.72))
        drop-shadow(0 0 12px rgba(255,255,255,.36))
        drop-shadow(0 0 12px rgba(0,0,0,.92))
        drop-shadow(0 0 22px rgba(0,0,0,.78)) !important;
}

@media (min-width: 1900px) {
    .ship-overview-map-wrap.ship-overview-filter-layout-v41-recover-active,
    .ship-overview-map-wrap {
        padding-left: clamp(292px, 14.5vw, 338px) !important;
        padding-right: clamp(292px, 14.5vw, 338px) !important;
    }
}

@media (max-width: 1380px) {
    .ship-overview-map-wrap.ship-overview-filter-layout-v41-recover-active,
    .ship-overview-map-wrap {
        padding-left: 246px !important;
        padding-right: 246px !important;
    }

    .ship-overview-filter-legend,
    .ship-overview-legend {
        width: 214px !important;
        max-width: 214px !important;
    }
}

@media (max-width: 1120px) {
    .ship-overview-map-wrap.ship-overview-filter-layout-v41-recover-active,
    .ship-overview-map-wrap {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 18px !important;
    }

    .ship-overview-filter-legend,
    .ship-overview-legend,
    .ship-overview-map-wrap .ship-overview-stage {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        grid-column: 1 !important;
        width: 100% !important;
        max-width: none !important;
    }
}

/* ship-overview-filter-layout-v41-recover */


/* ship-overview-filter-layout-v41-recover
   Dynamisches Platzmodell:
   - linke Filterlegende und rechte Steuerung sitzen am Fenster-/Panelrand
   - beide reduzieren bei geöffnetem Zustand die verfügbare Schiffbreite
   - alle Filterzeilen nutzen denselben optischen Stil
*/
.ship-overview-map-wrap.ship-overview-filter-layout-v41-recover-active,
.ship-overview-map-wrap {
    --filter-legend-space: 74px;
    --control-legend-space: 74px;
    --side-gap: 18px;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: clamp(640px, 58vw, 1020px) !important;
    padding-top: clamp(100px, 7.5vw, 144px) !important;
    padding-bottom: clamp(130px, 8.5vw, 184px) !important;
    padding-left: calc(var(--filter-legend-space) + var(--side-gap)) !important;
    padding-right: calc(var(--control-legend-space) + var(--side-gap)) !important;
    overflow: visible !important;
}

.ship-overview-map-wrap.ship-overview-filter-legend-open {
    --filter-legend-space: clamp(262px, 15vw, 330px);
}

.ship-overview-map-wrap.ship-overview-control-legend-open {
    --control-legend-space: clamp(262px, 15vw, 330px);
}

.ship-overview-filter-legend,
.ship-overview-legend {
    position: absolute !important;
    top: 34px !important;
    width: clamp(224px, 13vw, 262px) !important;
    max-width: clamp(224px, 13vw, 262px) !important;
    max-height: calc(100% - 68px) !important;
    overflow: auto !important;
    z-index: 45 !important;
    margin: 0 !important;
}

.ship-overview-filter-legend:not([open]),
.ship-overview-legend:not([open]) {
    width: auto !important;
    max-width: 242px !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.ship-overview-filter-legend {
    left: 18px !important;
    right: auto !important;
}

.ship-overview-legend {
    right: 18px !important;
    left: auto !important;
}

.ship-overview-map-wrap .ship-overview-stage,
.ship-overview-map-wrap .ship-overview-stage.ship-overview-fixed-frame-v29,
.ship-overview-stage {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    justify-self: stretch !important;
    grid-column: auto !important;
}

.ship-overview-filter-legend > summary,
.ship-overview-legend > summary {
    color: #f1f4f6 !important;
    font-family: "Zero Prime", "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: 14px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 8px rgba(255,255,255,.22), 0 0 16px rgba(255,255,255,.10) !important;
}

.ship-overview-filter-legend .legend-label-tools {
    display: none !important;
}

.ship-overview-legend [data-marker-toggle],
.ship-overview-legend .legend-room-toggle,
.ship-overview-legend .legend-cargo-grid-toggle,
.ship-overview-legend .legend-component-subfilters {
    display: none !important;
}

.ship-overview-filter-legend .legend-filter-item,
.ship-overview-filter-legend .legend-room-toggle,
.ship-overview-filter-legend .legend-cargo-grid-toggle,
.ship-overview-filter-legend .legend-component-subfilter {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 36px !important;
    width: 100% !important;
    color: rgba(241,244,246,.92) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 4px 0 !important;
    cursor: pointer !important;
    font-family: "Zero Prime", "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    letter-spacing: .035em !important;
    text-align: left !important;
    text-transform: none !important;
}

.ship-overview-filter-legend .legend-component-subfilters {
    margin: 0 0 8px 26px !important;
    padding: 6px 0 4px 12px !important;
    border-left: 1px solid rgba(168,117,255,.34) !important;
}

.ship-overview-filter-legend .legend-component-subfilters > summary {
    color: rgba(241,244,246,.88) !important;
    cursor: pointer !important;
    font-family: "Zero Prime", "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: 10px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.ship-overview-filter-legend .legend-component-subfilter-list {
    display: grid !important;
    gap: 3px !important;
    margin-top: 7px !important;
}

.ship-overview-filter-legend .legend-component-subfilter input,
.ship-overview-filter-legend .legend-room-toggle input,
.ship-overview-filter-legend .legend-cargo-grid-toggle input {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.ship-overview-filter-legend .legend-component-subfilter::before {
    content: '' !important;
    display: inline-flex !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    background: #a875ff !important;
    color: #a875ff !important;
    box-shadow: 0 0 9px rgba(0,0,0,.75), 0 0 7px currentColor !important;
    flex: 0 0 20px !important;
}

.ship-overview-filter-legend .legend-filter-muted {
    opacity: .42 !important;
}

.ship-overview-filter-legend .legend-dot.cargo-grid {
    background: #18d6ff !important;
    color: #18d6ff !important;
}

.ship-room-label-layer-v28,
.ship-room-label-svg-v28,
.ship-room-label-layer-v35,
.ship-room-label-svg-v35,
.ship-room-label-layer-v36,
.ship-room-label-svg-v36,
.ship-room-label-layer-v37,
.ship-room-label-svg-v37 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.ship-room-label-layer-v38,
.ship-room-label-svg-v38 {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 24 !important;
}

.ship-room-label-text-v38 {
    position: absolute !important;
    display: block !important;
    min-width: 96px !important;
    max-width: 220px !important;
    color: rgba(246,251,255,.99) !important;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: calc(var(--map-label-font-px, 11) * 1px) !important;
    line-height: 1.1 !important;
    letter-spacing: .035em !important;
    white-space: normal !important;
    text-align: center !important;
    text-shadow:
        0 0 4px rgba(255,255,255,.30),
        0 1px 1px rgba(0,0,0,.99),
        0 0 7px rgba(0,0,0,.96),
        0 0 16px rgba(0,0,0,.86),
        0 0 26px rgba(0,0,0,.70) !important;
}

.ship-room-label-text-v38.top {
    transform: translate(-50%, -108%) !important;
}

.ship-room-label-text-v38.bottom {
    transform: translate(-50%, 8px) !important;
}

.ship-room-label-line-halo-v38 {
    stroke-width: 3.9 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: 1 !important;
}

.ship-room-label-line-contrast-v38 {
    stroke-width: 2.25 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: .94 !important;
}

.ship-room-label-line-v38 {
    stroke-width: 1.5 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: 1 !important;
    filter:
        drop-shadow(0 0 5px rgba(255,255,255,.72))
        drop-shadow(0 0 12px rgba(255,255,255,.36))
        drop-shadow(0 0 12px rgba(0,0,0,.92))
        drop-shadow(0 0 22px rgba(0,0,0,.78)) !important;
}

@media (min-width: 1900px) {
    .ship-overview-map-wrap.ship-overview-filter-legend-open {
        --filter-legend-space: clamp(292px, 14.5vw, 352px);
    }

    .ship-overview-map-wrap.ship-overview-control-legend-open {
        --control-legend-space: clamp(292px, 14.5vw, 352px);
    }
}

@media (max-width: 1380px) {
    .ship-overview-map-wrap.ship-overview-filter-legend-open {
        --filter-legend-space: 246px;
    }

    .ship-overview-map-wrap.ship-overview-control-legend-open {
        --control-legend-space: 246px;
    }

    .ship-overview-filter-legend,
    .ship-overview-legend {
        width: 214px !important;
        max-width: 214px !important;
    }
}

@media (max-width: 1120px) {
    .ship-overview-map-wrap.ship-overview-filter-layout-v41-recover-active,
    .ship-overview-map-wrap {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 18px !important;
    }

    .ship-overview-filter-legend,
    .ship-overview-legend,
    .ship-overview-map-wrap .ship-overview-stage {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        grid-column: 1 !important;
        width: 100% !important;
        max-width: none !important;
    }
}

/* ship-overview-filter-layout-v41-recover */


/* ship-overview-filter-layout-v41-recover */
.ship-overview-map-wrap.ship-overview-filter-layout-v41-recover-active,
.ship-overview-map-wrap {
    --filter-legend-space: 82px;
    --control-legend-space: 82px;
    --side-gap: 18px;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: clamp(640px, 58vw, 1020px) !important;
    padding-top: clamp(100px, 7.5vw, 144px) !important;
    padding-bottom: clamp(130px, 8.5vw, 184px) !important;
    padding-left: calc(var(--filter-legend-space) + var(--side-gap)) !important;
    padding-right: calc(var(--control-legend-space) + var(--side-gap)) !important;
    overflow: visible !important;
}

.ship-overview-map-wrap.ship-overview-filter-legend-open,
.ship-overview-map-wrap:has(.ship-overview-filter-legend[open]) {
    --filter-legend-space: clamp(296px, 17vw, 376px) !important;
}

.ship-overview-map-wrap.ship-overview-control-legend-open,
.ship-overview-map-wrap:has(.ship-overview-legend[open]) {
    --control-legend-space: clamp(276px, 15vw, 338px) !important;
}

.ship-overview-filter-legend,
.ship-overview-legend {
    position: absolute !important;
    top: 34px !important;
    width: clamp(248px, 14.2vw, 304px) !important;
    max-width: clamp(248px, 14.2vw, 304px) !important;
    max-height: calc(100% - 68px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 45 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.ship-overview-filter-legend {
    left: 18px !important;
    right: auto !important;
    padding-left: 28px !important;
    padding-right: 18px !important;
}

.ship-overview-legend {
    right: 18px !important;
    left: auto !important;
}

.ship-overview-filter-legend:not([open]),
.ship-overview-legend:not([open]) {
    width: auto !important;
    max-width: 250px !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.ship-overview-map-wrap .ship-overview-stage,
.ship-overview-map-wrap .ship-overview-stage.ship-overview-fixed-frame-v29,
.ship-overview-stage {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    justify-self: stretch !important;
    grid-column: auto !important;
}

.ship-overview-filter-legend > summary,
.ship-overview-legend > summary {
    color: #f1f4f6 !important;
    font-family: "Zero Prime", "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: 14px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 8px rgba(255,255,255,.22), 0 0 16px rgba(255,255,255,.10) !important;
}

.ship-overview-filter-legend .legend-label-tools {
    display: none !important;
}

.ship-overview-legend [data-marker-toggle],
.ship-overview-legend .legend-room-toggle,
.ship-overview-legend .legend-cargo-grid-toggle,
.ship-overview-legend .legend-component-subfilters {
    display: none !important;
}

.ship-overview-filter-legend .legend-filter-item,
.ship-overview-filter-legend .legend-room-toggle,
.ship-overview-filter-legend .legend-cargo-grid-toggle,
.ship-overview-filter-legend .legend-component-subfilter {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 36px !important;
    width: 100% !important;
    color: rgba(241,244,246,.92) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 4px 0 4px 8px !important;
    cursor: pointer !important;
    font-family: "Zero Prime", "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    letter-spacing: .035em !important;
    text-align: left !important;
    text-transform: none !important;
    box-sizing: border-box !important;
}

.ship-overview-filter-legend .legend-filter-item span:last-child,
.ship-overview-filter-legend .legend-room-toggle span:last-child,
.ship-overview-filter-legend .legend-cargo-grid-toggle span:last-child,
.ship-overview-filter-legend .legend-component-subfilter span:last-child {
    font-family: "Zero Prime", "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    letter-spacing: .035em !important;
    color: inherit !important;
    text-transform: none !important;
}

.ship-overview-filter-legend .legend-dot,
.ship-overview-filter-legend .legend-component-subfilter::before {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    border-radius: 50% !important;
    flex: 0 0 22px !important;
    margin-left: 0 !important;
}

.ship-overview-filter-legend .legend-component-subfilters {
    margin: 0 0 8px 34px !important;
    padding: 6px 0 4px 12px !important;
    border-left: 1px solid rgba(168,117,255,.34) !important;
}

.ship-overview-filter-legend .legend-component-subfilters > summary {
    color: rgba(241,244,246,.88) !important;
    cursor: pointer !important;
    font-family: "Zero Prime", "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: 10px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.ship-overview-filter-legend .legend-component-subfilter-list {
    display: grid !important;
    gap: 3px !important;
    margin-top: 7px !important;
}

.ship-overview-filter-legend .legend-component-subfilter input,
.ship-overview-filter-legend .legend-room-toggle input,
.ship-overview-filter-legend .legend-cargo-grid-toggle input {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.ship-overview-filter-legend .legend-component-subfilter::before {
    content: '' !important;
    display: inline-flex !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    background: #a875ff !important;
    color: #a875ff !important;
    box-shadow: 0 0 9px rgba(0,0,0,.75), 0 0 7px currentColor !important;
}

.ship-overview-filter-legend .legend-filter-muted {
    opacity: .42 !important;
}

.ship-overview-filter-legend .legend-dot.cargo-grid {
    background: #18d6ff !important;
    color: #18d6ff !important;
}

.ship-room-label-layer-v28,
.ship-room-label-svg-v28,
.ship-room-label-layer-v35,
.ship-room-label-svg-v35,
.ship-room-label-layer-v36,
.ship-room-label-svg-v36,
.ship-room-label-layer-v37,
.ship-room-label-svg-v37,
.ship-room-label-layer-v38,
.ship-room-label-svg-v38 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.ship-room-label-layer-v39,
.ship-room-label-svg-v39 {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 80 !important;
}

.ship-room-label-text-v39 {
    position: absolute !important;
    display: block !important;
    min-width: 96px !important;
    max-width: 220px !important;
    color: rgba(246,251,255,.99) !important;
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
    font-size: calc(var(--map-label-font-px, 11) * 1px) !important;
    line-height: 1.1 !important;
    letter-spacing: .035em !important;
    white-space: normal !important;
    text-align: center !important;
    text-shadow:
        0 0 4px rgba(255,255,255,.30),
        0 1px 1px rgba(0,0,0,.99),
        0 0 7px rgba(0,0,0,.96),
        0 0 16px rgba(0,0,0,.86),
        0 0 26px rgba(0,0,0,.70) !important;
}

.ship-room-label-text-v39.top { transform: translate(-50%, -108%) !important; }
.ship-room-label-text-v39.bottom { transform: translate(-50%, 8px) !important; }

.ship-room-label-line-halo-v39 {
    stroke-width: 3.9 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: 1 !important;
}

.ship-room-label-line-contrast-v39 {
    stroke-width: 2.25 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: .94 !important;
}

.ship-room-label-line-v39 {
    stroke-width: 1.5 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    opacity: 1 !important;
    filter:
        drop-shadow(0 0 5px rgba(255,255,255,.72))
        drop-shadow(0 0 12px rgba(255,255,255,.36))
        drop-shadow(0 0 12px rgba(0,0,0,.92))
        drop-shadow(0 0 22px rgba(0,0,0,.78)) !important;
}

@media (max-width: 1380px) {
    .ship-overview-map-wrap.ship-overview-filter-legend-open,
    .ship-overview-map-wrap:has(.ship-overview-filter-legend[open]) {
        --filter-legend-space: 278px !important;
    }
    .ship-overview-map-wrap.ship-overview-control-legend-open,
    .ship-overview-map-wrap:has(.ship-overview-legend[open]) {
        --control-legend-space: 246px !important;
    }
}

@media (max-width: 1120px) {
    .ship-overview-map-wrap.ship-overview-filter-layout-v41-recover-active,
    .ship-overview-map-wrap {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 18px !important;
    }

    .ship-overview-filter-legend,
    .ship-overview-legend,
    .ship-overview-map-wrap .ship-overview-stage {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        grid-column: 1 !important;
        width: 100% !important;
        max-width: none !important;
    }
}

/* ship-overview-filter-layout-v41-recover */


/* ship-overview-filter-layout-v41-recover
   Recovery aus v39: keine v40-Logik, nur Font-Korrektur für Filter.
*/
.ship-overview-filter-legend > summary,
.ship-overview-filter-legend .legend-filter-item,
.ship-overview-filter-legend .legend-room-toggle,
.ship-overview-filter-legend .legend-cargo-grid-toggle,
.ship-overview-filter-legend .legend-component-subfilter,
.ship-overview-filter-legend .legend-filter-item span:last-child,
.ship-overview-filter-legend .legend-room-toggle span:last-child,
.ship-overview-filter-legend .legend-cargo-grid-toggle span:last-child,
.ship-overview-filter-legend .legend-component-subfilter span:last-child,
.ship-overview-filter-legend .legend-component-subfilters > summary {
    font-family: "Electrolize", "Segoe UI", system-ui, sans-serif !important;
}

/* ship-overview-filter-layout-v41-recover */

/* calendar-patch-2-header-nav-fit
   Der Kalender ergänzt einen weiteren Hauptreiter. Der Header gibt der Navigation
   deshalb eine eigene volle Zeile, damit Tabs nicht unter der Profilkarte abgeschnitten werden. */
html body .site-header,
html body .admin-header.site-header {
    min-height: 214px;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
    grid-template-areas:
        "brand status"
        "nav nav";
    align-items: start;
}

html body .site-header .brand,
html body .admin-header.site-header .brand {
    min-width: 0;
}

html body .site-header .nav-tabs,
html body .admin-header.site-header .nav-tabs {
    min-width: 0;
    width: 100%;
    padding-left: 136px;
    overflow-x: visible;
    overflow-y: visible;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
}

html body .site-header .nav-tabs a,
html body .site-header .nav-tabs span,
html body .admin-header.site-header .nav-tabs a,
html body .admin-header.site-header .nav-tabs span {
    flex: 0 0 auto;
    min-width: 116px;
    padding: 13px 12px;
    white-space: nowrap;
    font-size: 12px;
    letter-spacing: .075em;
}

html body .site-header .nav-tabs a[href*="ship-overview"],
html body .admin-header.site-header .nav-tabs a[href*="ship-overview"],
html body .site-header .nav-tabs a[href*="communication"],
html body .admin-header.site-header .nav-tabs a[href*="communication"] {
    min-width: 150px;
}

@media (max-width: 1500px) {
    html body .site-header .nav-tabs,
    html body .admin-header.site-header .nav-tabs {
        padding-left: 0;
    }
}

@media (max-width: 980px) {
    html body .site-header,
    html body .admin-header.site-header {
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-areas:
            "brand"
            "nav"
            "status";
    }

    html body .site-header .nav-tabs a,
    html body .site-header .nav-tabs span,
    html body .admin-header.site-header .nav-tabs a,
    html body .admin-header.site-header .nav-tabs span {
        min-width: 112px;
    }
}


/* nav-patch-1-grouped-navigation */
html body .site-header,
html body .admin-header.site-header {
    overflow: visible;
    z-index: 20;
}

html body .site-header .nav-tabs.nav-tabs-grouped,
html body .admin-header.site-header .nav-tabs.nav-tabs-grouped {
    align-items: flex-start;
    gap: 10px;
    overflow: visible;
}

html body .nav-tabs.nav-tabs-grouped > a,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary {
    min-width: 116px;
    padding: 13px 12px;
    color: #aeb5bb;
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.20));
    border: 0;
    border-bottom: 2px solid rgba(255,255,255,.14);
    clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .075em;
    white-space: nowrap;
    cursor: pointer;
}

html body .nav-tabs.nav-tabs-grouped > .nav-dropdown {
    position: relative;
    min-width: 116px;
    color: #aeb5bb;
    z-index: 30;
}

html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary {
    display: block;
    list-style: none;
}

html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary::-webkit-details-marker {
    display: none;
}

html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary::after {
    content: ' ▼';
    font-size: .76em;
    color: rgba(255,255,255,.62);
}

html body .nav-tabs.nav-tabs-grouped > .nav-dropdown[open] > summary::after {
    content: ' ▲';
}

html body .nav-tabs.nav-tabs-grouped > a.active,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown.active > summary,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown[open] > summary {
    color: #fff;
    border-bottom-color: var(--red);
    box-shadow: inset 0 -3px 0 var(--red), 0 0 18px rgba(224,0,0,.40);
}

html body .nav-tabs.nav-tabs-grouped .nav-dropdown-menu {
    display: grid;
    gap: 6px;
    width: min(310px, calc(100vw - 40px));
    margin-top: 8px;
    padding: 10px;
    background:
        linear-gradient(150deg, rgba(15, 22, 27, .98), rgba(3, 5, 7, .95)),
        radial-gradient(circle at 10% 0%, rgba(33, 234, 255, .12), transparent 16rem);
    border: 1px solid rgba(255,255,255,.14);
    border-left: 3px solid rgba(224,0,0,.78);
    box-shadow: 0 18px 50px rgba(0,0,0,.42), 0 0 16px rgba(33,234,255,.08);
    clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%);
}

html body .nav-tabs.nav-tabs-grouped .nav-dropdown-menu a,
html body .nav-tabs.nav-tabs-grouped .nav-dropdown-menu span {
    min-width: 0;
    width: auto;
    padding: 10px 12px;
    clip-path: none;
    border: 1px solid rgba(255,255,255,.08);
    border-bottom-color: rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    color: #cbd2d8;
    text-align: left;
    text-transform: none;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .035em;
    white-space: normal;
    text-decoration: none;
}

html body .nav-tabs.nav-tabs-grouped .nav-dropdown-menu a.active,
html body .nav-tabs.nav-tabs-grouped .nav-dropdown-menu a:hover {
    color: #fff;
    border-color: rgba(224,0,0,.58);
    background: rgba(224,0,0,.14);
    box-shadow: inset 0 0 10px rgba(224,0,0,.16), 0 0 14px rgba(224,0,0,.18);
}

html body .nav-tabs.nav-tabs-grouped .nav-dropdown-menu .nav-disabled {
    color: rgba(174,181,187,.56);
    border-style: dashed;
    cursor: default;
}

.module-placeholder-panel {
    margin-top: 22px;
}

.module-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.module-placeholder-card {
    padding: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(0,0,0,.20));
    border: 1px solid rgba(255,255,255,.10);
    border-left: 3px solid rgba(33,234,255,.44);
}

.module-placeholder-card strong {
    display: block;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
}

.module-placeholder-card p {
    margin: 0;
    color: #c3c9cf;
    line-height: 1.55;
}

@media (max-width: 980px) {
    html body .nav-tabs.nav-tabs-grouped > a,
    html body .nav-tabs.nav-tabs-grouped > .nav-dropdown,
    html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary {
        min-width: 112px;
    }
}


/* nav-patch-2-overlay-dropdowns */
html body .site-header .nav-tabs.nav-tabs-grouped,
html body .admin-header.site-header .nav-tabs.nav-tabs-grouped {
    align-items: center;
}

html body .nav-tabs.nav-tabs-grouped > .nav-dropdown {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    min-width: 116px;
    width: auto;
    z-index: 70;
}

html body .nav-tabs.nav-tabs-grouped > .nav-dropdown[open] {
    z-index: 90;
}

html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary {
    box-sizing: border-box;
    min-width: 116px;
    width: 116px;
}

html body .nav-tabs.nav-tabs-grouped .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    margin-top: 0;
    z-index: 120;
}

html body .nav-tabs.nav-tabs-grouped > .nav-dropdown:last-of-type .nav-dropdown-menu {
    left: auto;
    right: 0;
}

html body .nav-tabs.nav-tabs-grouped > .nav-dropdown[open] > summary {
    position: relative;
    z-index: 121;
}

@media (max-width: 980px) {
    html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary {
        width: 112px;
    }
}

/* VerseDB Patch 1 */
.versedb-panel {
    display: grid;
    gap: 18px;
}

.versedb-title-row p {
    margin: 8px 0 0;
    max-width: 1120px;
    color: #c7ced4;
    line-height: 1.55;
}

.versedb-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.30);
}

.versedb-subnav a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 10px 14px;
    color: #adb7bd;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.20));
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 900;
    font-size: 12px;
}

.versedb-subnav a.active,
.versedb-subnav a:hover {
    color: #fff;
    border-color: rgba(224,0,0,.70);
    box-shadow: inset 0 -2px 0 var(--red), 0 0 16px rgba(224,0,0,.20);
}

.versedb-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 12px;
}

.versedb-stat,
.versedb-card,
.versedb-module-card {
    border: 1px solid rgba(255,255,255,.11);
    background: linear-gradient(135deg, rgba(12,16,19,.96), rgba(3,5,7,.86));
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.45), 0 18px 38px rgba(0,0,0,.22);
}

.versedb-stat {
    min-height: 92px;
    padding: 16px 18px;
    display: grid;
    align-content: center;
    gap: 8px;
}

.versedb-stat span {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 900;
}

.versedb-stat strong {
    color: var(--cyan);
    font-family: "Zero Prime", "Electrolize", sans-serif;
    font-size: 28px;
    letter-spacing: .07em;
    text-shadow: 0 0 16px rgba(33,234,255,.30);
}

.versedb-module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 14px;
}

.versedb-module-card {
    min-height: 164px;
    padding: 18px;
    color: var(--text);
    position: relative;
    overflow: hidden;
}

.versedb-module-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--red);
    opacity: .85;
}

.versedb-module-card span {
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 11px;
    font-weight: 900;
}

.versedb-module-card strong {
    display: block;
    margin-top: 10px;
    color: #fff;
    font-size: 20px;
    letter-spacing: .04em;
}

.versedb-module-card p {
    color: #aeb7bd;
    line-height: 1.5;
    margin: 12px 0 0;
}

.versedb-module-card:hover {
    border-color: rgba(224,0,0,.70);
    box-shadow: 0 0 24px rgba(224,0,0,.18);
}

.versedb-grid-two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.versedb-card {
    padding: 18px;
}

.versedb-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.versedb-card-title h2 {
    margin: 0;
    color: #fff;
    font-family: "Zero Prime", "Electrolize", sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 20px;
}

.versedb-card-title a,
.versedb-card-title span {
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .10em;
    font-size: 11px;
    font-weight: 900;
}

.versedb-muted,
.versedb-empty {
    color: #9aa4aa;
    line-height: 1.55;
}

.versedb-table-wrap {
    overflow-x: auto;
}

.versedb-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 7px;
}

.versedb-table th {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-align: left;
    padding: 0 11px 4px;
}

.versedb-table td {
    padding: 12px 11px;
    vertical-align: top;
    background: rgba(0,0,0,.36);
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #dce2e6;
}

.versedb-table td:first-child {
    border-left: 1px solid rgba(255,255,255,.08);
}

.versedb-table td:last-child {
    border-right: 1px solid rgba(255,255,255,.08);
}

.versedb-table strong {
    display: block;
    color: #fff;
}

.versedb-table small {
    display: block;
    color: #8f989e;
    margin-top: 4px;
    max-width: 520px;
}

.versedb-filterbar {
    display: grid;
    grid-template-columns: minmax(260px, 1.2fr) minmax(160px, .5fr) minmax(160px, .5fr) auto auto;
    gap: 10px;
    align-items: stretch;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.30);
}

.versedb-filterbar input,
.versedb-filterbar select,
.versedb-form-grid input,
.versedb-form-grid select,
.versedb-form-grid textarea {
    width: 100%;
    min-height: 42px;
    color: #f1f4f6;
    background: rgba(0,0,0,.44);
    border: 1px solid rgba(255,255,255,.16);
    padding: 10px 12px;
    font-family: inherit;
}

.versedb-filterbar button,
.versedb-form-grid button {
    min-height: 42px;
    padding: 0 18px;
    color: #fff;
    background: linear-gradient(180deg, rgba(224,0,0,.42), rgba(90,0,0,.70));
    border: 1px solid rgba(224,0,0,.76);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer;
}

.versedb-filterbar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    color: #aeb7bd;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.035);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
    font-weight: 900;
}

.versedb-roadmap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.versedb-roadmap div {
    padding: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.28);
}

.versedb-roadmap strong {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--cyan);
    border: 1px solid rgba(33,234,255,.38);
    margin-bottom: 10px;
}

.versedb-roadmap span {
    display: block;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.versedb-roadmap p {
    color: #aeb7bd;
    line-height: 1.5;
    margin: 8px 0 0;
}

.versedb-details summary,
.versedb-source-item summary {
    cursor: pointer;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.versedb-details summary {
    margin-bottom: 14px;
}

.versedb-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.versedb-form-grid.compact {
    margin-top: 14px;
}

.versedb-form-grid label {
    display: grid;
    gap: 6px;
}

.versedb-form-grid label span {
    color: var(--muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .11em;
    font-weight: 900;
}

.versedb-form-grid .wide {
    grid-column: 1 / -1;
}

.versedb-checkbox {
    align-content: center;
    grid-template-columns: auto 1fr;
    align-items: center;
}

.versedb-checkbox input {
    width: auto;
    min-height: auto;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
}

.versedb-source-list {
    display: grid;
    gap: 10px;
}

.versedb-source-item {
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.26);
}

.versedb-source-item summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
}

.versedb-source-item summary span {
    color: var(--muted);
    font-size: 12px;
}

.versedb-source-body {
    padding: 0 14px 14px;
    color: #c9d0d5;
}

.versedb-source-body p {
    margin: 8px 0;
    line-height: 1.5;
}

.versedb-source-body p span {
    color: var(--cyan);
    font-weight: 900;
}

.versedb-pagination {
    margin-top: 12px;
    color: var(--muted);
}

@media (max-width: 1180px) {
    .versedb-stats-grid,
    .versedb-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .versedb-grid-two,
    .versedb-roadmap {
        grid-template-columns: 1fr;
    }

    .versedb-filterbar,
    .versedb-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .versedb-stats-grid,
    .versedb-module-grid,
    .versedb-filterbar,
    .versedb-form-grid {
        grid-template-columns: 1fr;
    }

    .versedb-source-item summary {
        display: grid;
    }
}

.flash-message {
    margin: 14px 0;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.50);
    font-weight: 900;
    letter-spacing: .04em;
}
.flash-success { color: #77ff46; border-color: rgba(119,255,70,.35); }
.flash-error { color: #ffb1b1; border-color: rgba(224,0,0,.58); }

/* VerseDB Patch 2 */
.versedb-source-admin-grid {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.versedb-mini-panel {
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.22);
    padding: 12px;
}

.versedb-mini-panel summary {
    cursor: pointer;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 10px;
}

.versedb-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid rgba(33,234,255,.32);
    color: var(--cyan);
    background: rgba(33,234,255,.06);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
    font-weight: 900;
}

.versedb-badge.status-success {
    border-color: rgba(76,255,85,.36);
    color: #7dff68;
    background: rgba(76,255,85,.06);
}

.versedb-badge.status-failed {
    border-color: rgba(255,60,60,.50);
    color: #ff6b6b;
    background: rgba(255,0,0,.08);
}

.versedb-badge.status-running {
    border-color: rgba(255,210,80,.40);
    color: #ffd66f;
    background: rgba(255,210,80,.07);
}

.versedb-raw-details summary {
    cursor: pointer;
}

.versedb-raw-details pre {
    max-height: 360px;
    max-width: min(900px, 76vw);
    overflow: auto;
    margin: 12px 0 0;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.58);
    color: #cfe7ee;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.versedb-filterbar.raw-filter {
    grid-template-columns: minmax(220px, 1.1fr) minmax(160px, .45fr) minmax(150px, .4fr) minmax(150px, .4fr) auto auto;
}

.versedb-table code {
    color: #cfe7ee;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

@media (max-width: 1180px) {
    .versedb-filterbar.raw-filter {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .versedb-filterbar.raw-filter {
        grid-template-columns: 1fr;
    }
}

/* VerseDB Patch 4 */
.versedb-row-link {
    color: #fff;
    text-decoration: none;
}

.versedb-row-link:hover {
    color: var(--cyan);
    text-shadow: 0 0 14px rgba(33,234,255,.35);
}

.versedb-alert-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 206, 72, .34);
    background: linear-gradient(135deg, rgba(44, 32, 5, .62), rgba(0,0,0,.34));
    color: #e8d9a9;
    box-shadow: 0 0 22px rgba(255, 206, 72, .08);
}

.versedb-alert-panel strong {
    color: #ffe07e;
}

.versedb-alert-panel a,
.versedb-detail-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 12px;
    color: #fff;
    border: 1px solid rgba(33,234,255,.28);
    background: rgba(33,234,255,.07);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.versedb-alert-panel a:hover,
.versedb-detail-actions a:hover {
    border-color: rgba(33,234,255,.60);
    box-shadow: 0 0 16px rgba(33,234,255,.18);
}

.versedb-badge.status-warning {
    margin-left: 8px;
    border-color: rgba(255,210,80,.42);
    color: #ffd76f;
    background: rgba(255,210,80,.07);
}

.versedb-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.versedb-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 12px;
}

.versedb-detail-grid > div {
    padding: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.26);
}

.versedb-detail-grid span {
    display: block;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .11em;
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 7px;
}

.versedb-detail-grid strong {
    display: block;
    color: #fff;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.versedb-table.compact th,
.versedb-table.compact td {
    padding: 9px 10px;
}

.versedb-description {
    margin: 16px 0 0;
    color: #c7ced4;
    line-height: 1.6;
}

.versedb-filterbar-ships {
    grid-template-columns: minmax(220px, 1.1fr) minmax(170px, .65fr) minmax(140px, .45fr) minmax(150px, .45fr) auto auto;
}

@media (max-width: 1180px) {
    .versedb-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .versedb-filterbar-ships {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .versedb-alert-panel {
        align-items: stretch;
        display: grid;
    }

    .versedb-detail-grid,
    .versedb-filterbar-ships {
        grid-template-columns: 1fr;
    }
}

/* nav-hotfix-after-versedb-4
   VerseDB Patch 4 brachte erneut eine CSS-Fassung ohne finalen Header-Overlay-Fix mit.
   Der echte Header darf Dropdowns nicht beschneiden; die sichtbare Header-Form wird ueber ::before gezeichnet. */
html body .site-header,
html body .admin-header.site-header {
    position: relative !important;
    z-index: 5000 !important;
    overflow: visible !important;
    clip-path: none !important;
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    isolation: isolate;
}

html body .site-header::before,
html body .admin-header.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-bottom: 3px solid var(--red);
    background:
        linear-gradient(120deg, rgba(14, 20, 24, .94), rgba(3, 5, 7, .70)),
        radial-gradient(circle at 70% 42%, rgba(33, 234, 255, .10), transparent 20rem),
        linear-gradient(90deg, rgba(255,255,255,.055), transparent 42%);
    clip-path: polygon(0 0, 100% 0, 100% 78%, 73% 78%, 70% 100%, 0 100%);
    box-shadow: 0 18px 60px rgba(0,0,0,.42);
}

html body .site-header > *,
html body .admin-header.site-header > * {
    position: relative;
    z-index: 2;
}

html body .site-header .nav-tabs.nav-tabs-grouped,
html body .admin-header.site-header .nav-tabs.nav-tabs-grouped {
    position: relative;
    z-index: 5500 !important;
    overflow: visible !important;
}

html body .nav-tabs.nav-tabs-grouped > .nav-dropdown {
    position: relative !important;
    z-index: 5600 !important;
    flex: 0 0 auto !important;
}

html body .nav-tabs.nav-tabs-grouped > .nav-dropdown[open] {
    z-index: 5700 !important;
}

html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary {
    width: auto !important;
    white-space: nowrap !important;
}

html body .nav-tabs.nav-tabs-grouped .nav-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    min-width: 260px !important;
    width: max-content !important;
    max-width: min(420px, 90vw) !important;
    z-index: 5800 !important;
    overflow: visible !important;
}

html body .nav-tabs.nav-tabs-grouped > .nav-dropdown:last-of-type .nav-dropdown-menu {
    left: auto !important;
    right: 0 !important;
}

main,
.page-shell,
.content-shell,
.panel,
.admin-shell,
.calendar-shell,
.versedb-shell {
    position: relative;
    z-index: 1;
}

@media (max-width: 980px) {
    html body .site-header::before,
    html body .admin-header.site-header::before {
        clip-path: none;
    }

    html body .nav-tabs.nav-tabs-grouped .nav-dropdown-menu {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}

/* VerseDB Patch 5: Duplikat-Bereinigung */
.versedb-merge-form {
    display: grid;
    gap: 12px;
}

.versedb-radio-master {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: rgba(232, 246, 255, 0.82);
    white-space: nowrap;
}

.versedb-radio-master input {
    accent-color: #18d6ff;
}

.versedb-merge-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(24, 214, 255, 0.18);
    background: rgba(5, 19, 31, 0.52);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.versedb-merge-actions button {
    min-width: 220px;
}

/* VerseDB Patch 6: Item-/Komponentenfilter */
.versedb-item-groups {
    margin-bottom: 18px;
}
.versedb-module-card.active {
    border-color: rgba(255, 216, 118, 0.72);
    box-shadow: 0 0 22px rgba(255, 216, 118, 0.18), inset 0 0 18px rgba(255, 216, 118, 0.06);
}
.versedb-filterbar-items {
    grid-template-columns: minmax(260px, 1.35fr) repeat(6, minmax(130px, 0.7fr)) auto auto;
}
.versedb-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px 14px;
    align-items: center;
}
.versedb-stat-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.versedb-stat-card {
    border: 1px solid rgba(116, 236, 255, 0.18);
    background: linear-gradient(145deg, rgba(12, 24, 36, 0.92), rgba(4, 9, 16, 0.86));
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: inset 0 0 18px rgba(24, 214, 255, 0.045);
}
.versedb-stat-card span {
    display: block;
    color: rgba(213, 236, 255, 0.68);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.versedb-stat-card strong {
    color: #fff3c2;
    font-size: 1.05rem;
    text-shadow: 0 0 12px rgba(255, 226, 147, 0.22);
}
@media (max-width: 1400px) {
    .versedb-filterbar-items {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

/* nav-dropdown-zindex-hotfix-14i
   Header-Dropdowns muessen ueber Admin-/Karten-/Content-Panels liegen. */
html body .app-shell,
html body .admin-shell,
html body .calendar-shell,
html body .page-shell,
html body .content-shell {
    overflow: visible !important;
}

html body .site-header,
html body .admin-header.site-header {
    position: relative !important;
    z-index: 200000 !important;
    overflow: visible !important;
    clip-path: none !important;
    isolation: auto !important;
}

html body .site-header .nav-tabs.nav-tabs-grouped,
html body .admin-header.site-header .nav-tabs.nav-tabs-grouped {
    position: relative !important;
    z-index: 200100 !important;
    overflow: visible !important;
}

html body .nav-tabs.nav-tabs-grouped > .nav-dropdown,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown[open] {
    position: relative !important;
    z-index: 200150 !important;
}

html body .nav-tabs.nav-tabs-grouped .nav-dropdown-menu {
    z-index: 200200 !important;
    filter: drop-shadow(0 20px 42px rgba(0,0,0,.50));
}

html body .panel,
html body main,
html body .admin-grid,
html body .admin-section-layout,
html body .calendar-page,
html body .navlab-panel {
    z-index: auto;
}

/* global-header-dropdown-depth-14j
   Globaler Sicherheits-Layer fuer Hauptnavigation. Admin-spezifische Overrides stehen in vcg-admin.css. */
html body .site-header {
    position: relative !important;
    z-index: 800000 !important;
    overflow: visible !important;
}
html body .site-header .nav-tabs.nav-tabs-grouped {
    position: relative !important;
    z-index: 800100 !important;
    overflow: visible !important;
}
html body .site-header .nav-tabs.nav-tabs-grouped > .nav-dropdown,
html body .site-header .nav-tabs.nav-tabs-grouped > .nav-dropdown[open] {
    position: relative !important;
    z-index: 800200 !important;
}
html body .site-header .nav-tabs.nav-tabs-grouped .nav-dropdown-menu {
    z-index: 800300 !important;
}

/* Codex design unification 2026-07-09:
   45-degree corners stay as visual accents, while UI boxes no longer clip their content. */
:root {
    --vcg-angle-sm: 8px;
    --vcg-angle-md: 12px;
    --vcg-angle-lg: 18px;
    --vcg-angle-line: rgba(224, 0, 0, .72);
    --vcg-angle-line-soft: rgba(224, 0, 0, .26);
    --vcg-angle-glow: rgba(224, 0, 0, .18);
}

html body :is(
    .site-header,
    .admin-header,
    .panel,
    .panel-title,
    .field,
    .hint,
    .active-role,
    .loadout-card,
    .loadout-stat,
    .loadout-fact,
    .ship-link-card,
    .ship-link-stat,
    .ship-link-fact,
    .ship-link-manual,
    .slot-family,
    .slot-tree-node,
    .slot-row,
    .summary-stat-box,
    .ship-thruster-box,
    .calendar-month-panel,
    .calendar-event-card,
    .calendar-create-panel,
    .calendar-empty,
    .calendar-hero-body,
    .versedb-merge-actions,
    .versedb-stat-card,
    .versedb-module-card,
    .communication-card,
    .equipment-card,
    .mission-card,
    .overview-card,
    .profile-card,
    .document-card
) {
    clip-path: none !important;
    border-radius: 0 !important;
    position: relative;
}

html body :is(
    .panel,
    .panel-title,
    .loadout-card,
    .ship-link-card,
    .slot-family,
    .slot-tree-node,
    .calendar-month-panel,
    .calendar-event-card,
    .calendar-create-panel,
    .calendar-empty,
    .calendar-hero-body,
    .versedb-module-card,
    .versedb-stat-card,
    .communication-card,
    .equipment-card,
    .mission-card,
    .overview-card,
    .profile-card,
    .document-card
) {
    overflow: visible !important;
}

html body :is(
    button,
    .button,
    .nav-tabs span,
    .nav-tabs a,
    .nav-dropdown-summary,
    .nav-dropdown-menu a,
    .loadout-tabs a,
    .loadout-actions a,
    .loadout-actions button,
    .loadout-form button,
    .slot-form button,
    .slot-choice-button,
    .slot-option-panel button,
    .ship-link-form button,
    .ship-link-filters button,
    .ship-link-filters a,
    .calendar-filter-row a,
    .calendar-month-actions a,
    .admin-header-actions a,
    .admin-link,
    .admin-form button,
    .mission-toolbar button,
    .mission-toolbar a,
    .ship-selector-trigger,
    .ship-selector-menu button
) {
    clip-path: none !important;
    border-radius: 0 !important;
    position: relative;
    overflow: visible;
}

html body :is(
    input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .matrix-input,
    .matrix-select,
    .compact-select
) {
    clip-path: none !important;
    border-radius: 0 !important;
}

html body :is(
    .panel,
    .panel-title,
    .field,
    .loadout-card,
    .ship-link-card,
    .slot-family,
    .slot-tree-node,
    .slot-row,
    .calendar-month-panel,
    .calendar-event-card,
    .calendar-create-panel,
    .calendar-empty,
    .calendar-hero-body,
    .versedb-merge-actions,
    .versedb-stat-card,
    .versedb-module-card,
    .communication-card,
    .equipment-card,
    .mission-card,
    .overview-card,
    .profile-card,
    .document-card
)::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    padding: 1px;
    background: linear-gradient(135deg, var(--vcg-angle-line), var(--vcg-angle-line-soft)) border-box;
    clip-path: polygon(var(--vcg-angle-lg) 0, 100% 0, 100% calc(100% - var(--vcg-angle-lg)), calc(100% - var(--vcg-angle-lg)) 100%, 0 100%, 0 var(--vcg-angle-lg));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

html body :is(
    button,
    .button,
    .nav-tabs span,
    .nav-tabs a,
    .nav-dropdown-summary,
    .nav-dropdown-menu a,
    .loadout-tabs a,
    .loadout-actions a,
    .loadout-actions button,
    .loadout-form button,
    .slot-form button,
    .slot-choice-button,
    .slot-option-panel button,
    .ship-link-form button,
    .ship-link-filters button,
    .ship-link-filters a,
    .calendar-filter-row a,
    .calendar-month-actions a,
    .admin-header-actions a,
    .admin-link,
    .admin-form button,
    .mission-toolbar button,
    .mission-toolbar a,
    .ship-selector-trigger,
    .ship-selector-menu button
)::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    padding: 1px;
    background: linear-gradient(135deg, var(--vcg-angle-line-soft), rgba(224, 0, 0, .50)) border-box;
    clip-path: polygon(var(--vcg-angle-sm) 0, 100% 0, 100% calc(100% - var(--vcg-angle-sm)), calc(100% - var(--vcg-angle-sm)) 100%, 0 100%, 0 var(--vcg-angle-sm));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

html body :is(
    .loadout-badge,
    .slot-pill,
    .ship-link-badge,
    .versedb-radio-master,
    .status-pill,
    .flash-message
) {
    clip-path: none !important;
    border-radius: 0 !important;
}

html body :is(
    .admin-panel,
    .admin-current-ship-strip,
    .overview-category-manager,
    .admin-section-sidebar,
    .admin-section-sidebar a,
    .marker-type-section,
    .calendar-recurrence-picker,
    .calendar-digest-panel,
    .mission-legend-bar,
    .mission-cursor,
    .mission-canvas-shell,
    .ship-overview-map-panel,
    .ship-overview-filter-legend,
    .ship-overview-legend,
    .clean-control-card,
    .clean-v45-status-panel,
    .vcg-ship-selector__menu,
    .vcg-ship-selector__class,
    .vcg-ship-selector__ship,
    .vcg-ship-selector-portal-v50
) {
    clip-path: none !important;
    border-radius: 0 !important;
    position: relative;
}

html body :is(
    .admin-panel,
    .admin-current-ship-strip,
    .overview-category-manager,
    .admin-section-sidebar,
    .calendar-recurrence-picker,
    .calendar-digest-panel,
    .mission-legend-bar,
    .mission-cursor,
    .mission-canvas-shell,
    .ship-overview-map-panel,
    .ship-overview-filter-legend,
    .ship-overview-legend,
    .clean-control-card,
    .clean-v45-status-panel,
    .vcg-ship-selector__menu,
    .vcg-ship-selector-portal-v50
)::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    padding: 1px;
    background: linear-gradient(135deg, var(--vcg-angle-line), var(--vcg-angle-line-soft)) border-box;
    clip-path: polygon(var(--vcg-angle-md) 0, 100% 0, 100% calc(100% - var(--vcg-angle-md)), calc(100% - var(--vcg-angle-md)) 100%, 0 100%, 0 var(--vcg-angle-md));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Codex nav refit 2026-07-10:
   Use the reference cut-corner shape for the main menu instead of skewed tabs. */
html body .site-header .nav-tabs.nav-tabs-grouped,
html body .admin-header.site-header .nav-tabs.nav-tabs-grouped {
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    padding-left: 0 !important;
}

html body .nav-tabs.nav-tabs-grouped > a,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown {
    flex: 1 1 0 !important;
    min-width: 124px !important;
    max-width: 180px !important;
}

html body .nav-tabs.nav-tabs-grouped > a,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary {
    --nav-cut: 10px;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    color: #b6bec4 !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(0,0,0,.22)),
        rgba(8, 12, 14, .88) !important;
    border: 0 !important;
    border-bottom: 2px solid rgba(255,255,255,.13) !important;
    clip-path: polygon(
        var(--nav-cut) 0,
        100% 0,
        100% calc(100% - var(--nav-cut)),
        calc(100% - var(--nav-cut)) 100%,
        0 100%,
        0 var(--nav-cut)
    ) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.075),
        inset 0 -2px 0 rgba(255,255,255,.05) !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html body .nav-tabs.nav-tabs-grouped > a::after {
    content: none !important;
    display: none !important;
}

html body .nav-tabs.nav-tabs-grouped > a:hover,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary:hover {
    color: #fff !important;
    border-bottom-color: rgba(224,0,0,.72) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.09), rgba(224,0,0,.09)),
        rgba(10, 14, 16, .92) !important;
    box-shadow:
        inset 0 0 0 1px rgba(224,0,0,.34),
        inset 0 -3px 0 rgba(224,0,0,.72),
        0 0 16px rgba(224,0,0,.18) !important;
}

html body .nav-tabs.nav-tabs-grouped > a.active,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown.active > summary {
    color: #fff !important;
    border-bottom-color: var(--red) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.11), rgba(224,0,0,.12)),
        rgba(11, 15, 17, .95) !important;
    box-shadow:
        inset 0 0 0 1px rgba(224,0,0,.42),
        inset 0 -5px 0 var(--red),
        0 0 18px rgba(224,0,0,.22) !important;
}

html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary::after {
    position: static !important;
    display: inline-block !important;
    margin-left: 4px !important;
    color: rgba(255,255,255,.66) !important;
    font-size: .74em !important;
}

@media (max-width: 1280px) {
    html body .nav-tabs.nav-tabs-grouped > a,
    html body .nav-tabs.nav-tabs-grouped > .nav-dropdown {
        min-width: 112px !important;
    }

    html body .nav-tabs.nav-tabs-grouped > a,
    html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary {
        padding-left: 12px !important;
        padding-right: 12px !important;
        font-size: 11px !important;
    }
}

/* Codex corner cleanup 2026-07-10:
   Use one clean cut-corner frame per window and let the active tab underline
   share the same clipped geometry. */
html body .nav-tabs.nav-tabs-grouped > a,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary {
    position: relative !important;
}

html body .nav-tabs.nav-tabs-grouped > a::before,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--nav-cut)) 100%, 0 100%) !important;
}

html body .nav-tabs.nav-tabs-grouped > a:hover::before,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary:hover::before {
    height: 3px !important;
    background: rgba(224, 0, 0, .72) !important;
}

html body .nav-tabs.nav-tabs-grouped > a:hover,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary:hover {
    border-bottom-color: transparent !important;
    box-shadow:
        inset 0 0 0 1px rgba(224,0,0,.34),
        0 0 16px rgba(224,0,0,.18) !important;
}

html body .nav-tabs.nav-tabs-grouped > a.active,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown.active > summary {
    border-bottom-color: transparent !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.11), rgba(224,0,0,.12)),
        rgba(11, 15, 17, .95) !important;
    box-shadow:
        inset 0 0 0 1px rgba(224,0,0,.42),
        0 0 18px rgba(224,0,0,.22) !important;
}

html body .nav-tabs.nav-tabs-grouped > a.active::before,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown.active > summary::before {
    height: 6px !important;
    background: var(--red) !important;
}

html body .panel-corner {
    display: none !important;
}

html body :is(
    .panel,
    .field,
    .loadout-card,
    .ship-link-card,
    .calendar-month-panel,
    .calendar-event-card,
    .calendar-create-panel,
    .calendar-empty,
    .calendar-hero-body,
    .versedb-merge-actions,
    .versedb-stat-card,
    .versedb-module-card,
    .communication-card,
    .equipment-card,
    .mission-card,
    .overview-card,
    .profile-card,
    .document-card,
    .admin-panel,
    .admin-current-ship-strip,
    .overview-category-manager,
    .calendar-recurrence-picker,
    .calendar-digest-panel,
    .mission-legend-bar,
    .mission-canvas-shell,
    .ship-overview-map-panel,
    .ship-overview-filter-legend,
    .ship-overview-legend,
    .clean-control-card,
    .clean-v45-status-panel
) {
    --vcg-window-cut: 18px;
    border-color: transparent !important;
    border-radius: 0 !important;
    clip-path: polygon(
        var(--vcg-window-cut) 0,
        100% 0,
        100% calc(100% - var(--vcg-window-cut)),
        calc(100% - var(--vcg-window-cut)) 100%,
        0 100%,
        0 var(--vcg-window-cut)
    ) !important;
    overflow: hidden !important;
}

html body :is(
    .field,
    .legend-card,
    .role-info-card,
    .link-card,
    .loadout-stat,
    .loadout-fact,
    .ship-link-stat,
    .ship-link-fact,
    .ship-link-manual,
    .summary-stat-box,
    .ship-thruster-box,
    .calendar-event-card,
    .admin-current-ship-strip,
    .calendar-recurrence-picker,
    .calendar-digest-panel,
    .ship-overview-filter-legend,
    .ship-overview-legend,
    .clean-control-card,
    .clean-v45-status-panel
) {
    --vcg-window-cut: 12px;
}

html body :is(
    .legend-card,
    .role-info-card,
    .link-card,
    .loadout-stat,
    .loadout-fact,
    .ship-link-stat,
    .ship-link-fact,
    .ship-link-manual,
    .summary-stat-box,
    .ship-thruster-box
) {
    border-color: transparent !important;
    border-radius: 0 !important;
    clip-path: polygon(
        var(--vcg-window-cut) 0,
        100% 0,
        100% calc(100% - var(--vcg-window-cut)),
        calc(100% - var(--vcg-window-cut)) 100%,
        0 100%,
        0 var(--vcg-window-cut)
    ) !important;
    overflow: hidden !important;
    position: relative;
}

html body :is(
    .panel-title,
    .slot-family,
    .slot-tree-node,
    .slot-row,
    .admin-section-sidebar,
    .admin-section-sidebar a,
    .vcg-ship-selector__menu,
    .vcg-ship-selector__class,
    .vcg-ship-selector__ship,
    .vcg-ship-selector-portal-v50
) {
    clip-path: none !important;
    overflow: visible !important;
}

html body :is(
    .panel-title,
    .slot-family,
    .slot-tree-node,
    .slot-row,
    .admin-section-sidebar,
    .admin-section-sidebar a,
    .vcg-ship-selector__menu,
    .vcg-ship-selector__class,
    .vcg-ship-selector__ship,
    .vcg-ship-selector-portal-v50
)::after {
    content: none !important;
    display: none !important;
}

/* Codex red frame tuning 2026-07-10 */
html body :is(
    .panel,
    .field,
    .legend-card,
    .role-info-card,
    .link-card,
    .loadout-card,
    .loadout-stat,
    .loadout-fact,
    .ship-link-card,
    .ship-link-stat,
    .ship-link-fact,
    .ship-link-manual,
    .summary-stat-box,
    .ship-thruster-box,
    .calendar-month-panel,
    .calendar-event-card,
    .calendar-create-panel,
    .calendar-empty,
    .calendar-hero-body,
    .versedb-merge-actions,
    .versedb-stat-card,
    .versedb-module-card,
    .communication-card,
    .equipment-card,
    .mission-card,
    .overview-card,
    .profile-card,
    .document-card,
    .admin-panel,
    .admin-current-ship-strip,
    .overview-category-manager,
    .calendar-recurrence-picker,
    .calendar-digest-panel,
    .mission-legend-bar,
    .mission-canvas-shell,
    .ship-overview-map-panel,
    .ship-overview-filter-legend,
    .ship-overview-legend,
    .clean-control-card,
    .clean-v45-status-panel
)::after {
    --vcg-frame-line: rgba(255, 28, 28, .86);
    --vcg-frame-soft: rgba(224, 0, 0, .34);
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;
    padding: 0 !important;
    clip-path: polygon(
        var(--vcg-window-cut) 0,
        100% 0,
        100% calc(100% - var(--vcg-window-cut)),
        calc(100% - var(--vcg-window-cut)) 100%,
        0 100%,
        0 var(--vcg-window-cut)
    ) !important;
    background:
        linear-gradient(var(--vcg-frame-line), var(--vcg-frame-line)) left var(--vcg-window-cut) top 0 / calc(100% - var(--vcg-window-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-frame-soft), var(--vcg-frame-soft)) right 0 top 0 / 1px calc(100% - var(--vcg-window-cut)) no-repeat,
        linear-gradient(var(--vcg-frame-line), var(--vcg-frame-line)) left 0 bottom 0 / calc(100% - var(--vcg-window-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-frame-soft), var(--vcg-frame-soft)) left 0 top var(--vcg-window-cut) / 1px calc(100% - var(--vcg-window-cut)) no-repeat,
        linear-gradient(135deg, transparent calc(50% - .8px), var(--vcg-frame-line) calc(50% - .8px), var(--vcg-frame-line) calc(50% + .8px), transparent calc(50% + .8px)) left 0 top 0 / var(--vcg-window-cut) var(--vcg-window-cut) no-repeat,
        linear-gradient(135deg, transparent calc(50% - .8px), var(--vcg-frame-line) calc(50% - .8px), var(--vcg-frame-line) calc(50% + .8px), transparent calc(50% + .8px)) right 0 bottom 0 / var(--vcg-window-cut) var(--vcg-window-cut) no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-composite: source-over !important;
    mask-composite: add !important;
}

/* Codex tab frame completion 2026-07-10 */
html body .nav-tabs.nav-tabs-grouped > a,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary {
    --vcg-nav-frame-cut: var(--nav-cut, 10px);
    isolation: isolate;
}

html body .nav-tabs.nav-tabs-grouped > a::before,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary::before {
    --vcg-frame-line: rgba(255, 28, 28, .72);
    --vcg-frame-soft: rgba(224, 0, 0, .28);
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    height: auto !important;
    z-index: 3 !important;
    pointer-events: none !important;
    clip-path: none !important;
    background:
        linear-gradient(var(--vcg-frame-line), var(--vcg-frame-line)) left var(--vcg-nav-frame-cut) top 0 / calc(100% - var(--vcg-nav-frame-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-frame-soft), var(--vcg-frame-soft)) right 0 top 0 / 1px calc(100% - var(--vcg-nav-frame-cut)) no-repeat,
        linear-gradient(var(--vcg-frame-soft), var(--vcg-frame-soft)) left 0 bottom 0 / calc(100% - var(--vcg-nav-frame-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-frame-soft), var(--vcg-frame-soft)) left 0 top var(--vcg-nav-frame-cut) / 1px calc(100% - var(--vcg-nav-frame-cut)) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 1px), var(--vcg-frame-line) calc(50% - 1px), var(--vcg-frame-line) calc(50% + 1px), transparent calc(50% + 1px)) left 0 top 0 / var(--vcg-nav-frame-cut) var(--vcg-nav-frame-cut) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 1px), var(--vcg-frame-line) calc(50% - 1px), var(--vcg-frame-line) calc(50% + 1px), transparent calc(50% + 1px)) right 0 bottom 0 / var(--vcg-nav-frame-cut) var(--vcg-nav-frame-cut) no-repeat !important;
}

html body .nav-tabs.nav-tabs-grouped > a:hover::before,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary:hover::before {
    --vcg-frame-line: rgba(255, 34, 34, .86);
    --vcg-frame-soft: rgba(224, 0, 0, .42);
    background:
        linear-gradient(rgba(224, 0, 0, .76), rgba(224, 0, 0, .76)) left 0 bottom 0 / calc(100% - var(--vcg-nav-frame-cut)) 3px no-repeat,
        linear-gradient(var(--vcg-frame-line), var(--vcg-frame-line)) left var(--vcg-nav-frame-cut) top 0 / calc(100% - var(--vcg-nav-frame-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-frame-soft), var(--vcg-frame-soft)) right 0 top 0 / 1px calc(100% - var(--vcg-nav-frame-cut)) no-repeat,
        linear-gradient(var(--vcg-frame-soft), var(--vcg-frame-soft)) left 0 bottom 0 / calc(100% - var(--vcg-nav-frame-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-frame-soft), var(--vcg-frame-soft)) left 0 top var(--vcg-nav-frame-cut) / 1px calc(100% - var(--vcg-nav-frame-cut)) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 1px), var(--vcg-frame-line) calc(50% - 1px), var(--vcg-frame-line) calc(50% + 1px), transparent calc(50% + 1px)) left 0 top 0 / var(--vcg-nav-frame-cut) var(--vcg-nav-frame-cut) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 1px), var(--vcg-frame-line) calc(50% - 1px), var(--vcg-frame-line) calc(50% + 1px), transparent calc(50% + 1px)) right 0 bottom 0 / var(--vcg-nav-frame-cut) var(--vcg-nav-frame-cut) no-repeat !important;
}

html body .nav-tabs.nav-tabs-grouped > a.active::before,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown.active > summary::before {
    --vcg-frame-line: rgba(255, 36, 36, .94);
    --vcg-frame-soft: rgba(224, 0, 0, .54);
    background:
        linear-gradient(var(--red), var(--red)) left 0 bottom 0 / calc(100% - var(--vcg-nav-frame-cut)) 6px no-repeat,
        linear-gradient(var(--vcg-frame-line), var(--vcg-frame-line)) left var(--vcg-nav-frame-cut) top 0 / calc(100% - var(--vcg-nav-frame-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-frame-soft), var(--vcg-frame-soft)) right 0 top 0 / 1px calc(100% - var(--vcg-nav-frame-cut)) no-repeat,
        linear-gradient(var(--vcg-frame-line), var(--vcg-frame-line)) left 0 bottom 0 / calc(100% - var(--vcg-nav-frame-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-frame-soft), var(--vcg-frame-soft)) left 0 top var(--vcg-nav-frame-cut) / 1px calc(100% - var(--vcg-nav-frame-cut)) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 1px), var(--vcg-frame-line) calc(50% - 1px), var(--vcg-frame-line) calc(50% + 1px), transparent calc(50% + 1px)) left 0 top 0 / var(--vcg-nav-frame-cut) var(--vcg-nav-frame-cut) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 1px), var(--vcg-frame-line) calc(50% - 1px), var(--vcg-frame-line) calc(50% + 1px), transparent calc(50% + 1px)) right 0 bottom 0 / var(--vcg-nav-frame-cut) var(--vcg-nav-frame-cut) no-repeat !important;
}

/* Codex reverse cut frame 2026-07-10 */
html body :is(
    .member-card,
    .equipment-profile-admin-card,
    .equipment-profile-public-card,
    .equipment-profile-roster-card
) {
    --vcg-window-cut: 14px;
    border-color: transparent !important;
    border-radius: 0 !important;
    clip-path: polygon(
        0 0,
        calc(100% - var(--vcg-window-cut)) 0,
        100% var(--vcg-window-cut),
        100% 100%,
        var(--vcg-window-cut) 100%,
        0 calc(100% - var(--vcg-window-cut))
    ) !important;
    overflow: hidden !important;
    position: relative;
}

html body :is(
    .member-card,
    .equipment-profile-admin-card,
    .equipment-profile-public-card,
    .equipment-profile-roster-card
)::after {
    --vcg-frame-line: rgba(255, 28, 28, .78);
    --vcg-frame-soft: rgba(224, 0, 0, .30);
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background:
        linear-gradient(var(--vcg-frame-line), var(--vcg-frame-line)) left 0 top 0 / calc(100% - var(--vcg-window-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-frame-soft), var(--vcg-frame-soft)) right 0 top var(--vcg-window-cut) / 1px calc(100% - var(--vcg-window-cut)) no-repeat,
        linear-gradient(var(--vcg-frame-line), var(--vcg-frame-line)) left var(--vcg-window-cut) bottom 0 / calc(100% - var(--vcg-window-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-frame-soft), var(--vcg-frame-soft)) left 0 top 0 / 1px calc(100% - var(--vcg-window-cut)) no-repeat,
        linear-gradient(45deg, transparent calc(50% - 1px), var(--vcg-frame-line) calc(50% - 1px), var(--vcg-frame-line) calc(50% + 1px), transparent calc(50% + 1px)) right 0 top 0 / var(--vcg-window-cut) var(--vcg-window-cut) no-repeat,
        linear-gradient(45deg, transparent calc(50% - 1px), var(--vcg-frame-line) calc(50% - 1px), var(--vcg-frame-line) calc(50% + 1px), transparent calc(50% + 1px)) left 0 bottom 0 / var(--vcg-window-cut) var(--vcg-window-cut) no-repeat !important;
}

/* Codex legend filter cleanup 2026-07-10:
   The legend panel keeps the cut frame; individual filter rows stay unboxed. */
html body :is(
    .legend-filter-item,
    .clean-filter-row,
    .ship-overview-filter-legend .legend-room-toggle,
    .ship-overview-filter-legend .legend-cargo-grid-toggle,
    .ship-overview-filter-legend .legend-component-subfilter
) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    clip-path: none !important;
    overflow: visible !important;
}

html body :is(
    .legend-filter-item,
    .clean-filter-row,
    .ship-overview-filter-legend .legend-room-toggle,
    .ship-overview-filter-legend .legend-cargo-grid-toggle
)::before,
html body :is(
    .legend-filter-item,
    .clean-filter-row,
    .ship-overview-filter-legend .legend-room-toggle,
    .ship-overview-filter-legend .legend-cargo-grid-toggle,
    .ship-overview-filter-legend .legend-component-subfilter
)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}

html body :is(.legend-filter-card, .ship-overview-filter-legend, .ship-overview-legend) > summary::before,
html body :is(.legend-filter-card, .ship-overview-filter-legend, .ship-overview-legend) > summary::after {
    content: none !important;
    display: none !important;
}

html body :is(
    .legend-filter-card,
    .ship-overview-filter-legend,
    .ship-overview-legend
) :is(
    .legend-filter-item,
    .clean-filter-row,
    .legend-room-toggle,
    .legend-cargo-grid-toggle,
    .legend-component-subfilter
) {
    outline: 0 !important;
    border: 0 !important;
    border-inline: 0 !important;
    border-block: 0 !important;
    box-shadow: none !important;
}

/* Codex dropdown frame completion 2026-07-10:
   Dropdown panels keep one exact 45-degree lower-right corner. */
html body .site-header .nav-tabs.nav-tabs-grouped .nav-dropdown-menu {
    --vcg-dropdown-cut: 10px;
    position: absolute !important;
    isolation: isolate;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--vcg-dropdown-cut)),
        calc(100% - var(--vcg-dropdown-cut)) 100%,
        0 100%
    ) !important;
    overflow: hidden !important;
}

html body .site-header .nav-tabs.nav-tabs-grouped .nav-dropdown-menu::after {
    --vcg-dropdown-line: rgba(255, 28, 28, .82);
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background:
        linear-gradient(var(--vcg-dropdown-line), var(--vcg-dropdown-line)) left top / 100% 1px no-repeat,
        linear-gradient(var(--vcg-dropdown-line), var(--vcg-dropdown-line)) right top / 1px calc(100% - var(--vcg-dropdown-cut)) no-repeat,
        linear-gradient(var(--vcg-dropdown-line), var(--vcg-dropdown-line)) left bottom / calc(100% - var(--vcg-dropdown-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-dropdown-line), var(--vcg-dropdown-line)) left top / 1px 100% no-repeat,
        linear-gradient(135deg, transparent calc(50% - .8px), var(--vcg-dropdown-line) calc(50% - .8px), var(--vcg-dropdown-line) calc(50% + .8px), transparent calc(50% + .8px)) right bottom / var(--vcg-dropdown-cut) var(--vcg-dropdown-cut) no-repeat !important;
}

/* Codex visual hierarchy and spacing 2026-07-10. */
:root {
    --vcg-inner-frame-line: rgba(172, 184, 192, .62);
    --vcg-inner-frame-soft: rgba(172, 184, 192, .42);
}

/* Keep the full tab frame alive in interactive states. The red state bar is
   already drawn at background-position bottom by the frame rules above. */
html body .nav-tabs.nav-tabs-grouped > a:hover::before,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary:hover::before,
html body .nav-tabs.nav-tabs-grouped > a.active::before,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown.active > summary::before {
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: auto !important;
    clip-path: none !important;
}

/* Match the 22px separation used by the Verbande page. */
html body .app-shell > .site-header + :is(
    main,
    .subbar,
    .calendar-page,
    .mission-page,
    .admin-grid
) {
    margin-top: 22px !important;
}

html body .app-shell > .site-header + .ship-overview-controlbar + .clean-v45-status-panel {
    margin-top: 22px !important;
}

/* Interior controls use a neutral metal line; red remains reserved for the
   enclosing window and active states. */
html body :is(
    .field,
    .link-card,
    .loadout-stat,
    .loadout-fact,
    .ship-link-stat,
    .ship-link-fact,
    .ship-link-manual,
    .summary-stat-box,
    .ship-thruster-box,
    .versedb-stat-card,
    .versedb-module-card
)::after {
    --vcg-frame-line: var(--vcg-inner-frame-line) !important;
    --vcg-frame-soft: var(--vcg-inner-frame-soft) !important;
}

html body .field {
    background: rgba(3, 7, 9, .72) !important;
}

html body .field:focus-within::after,
html body .overview-link-section .link-card:hover::after {
    --vcg-frame-line: rgba(224, 0, 0, .66) !important;
    --vcg-frame-soft: rgba(224, 0, 0, .46) !important;
}

/* Keep thin neutral diagonals inside the clipped area. A centered 1px stripe
   is otherwise consumed by the parent's polygon antialiasing. */
html body :is(
    .field,
    .link-card,
    .loadout-stat,
    .loadout-fact,
    .ship-link-stat,
    .ship-link-fact,
    .ship-link-manual,
    .summary-stat-box,
    .ship-thruster-box,
    .versedb-stat-card,
    .versedb-module-card
)::after {
    background:
        linear-gradient(var(--vcg-frame-line), var(--vcg-frame-line)) left var(--vcg-window-cut) top 0 / calc(100% - var(--vcg-window-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-frame-soft), var(--vcg-frame-soft)) right 0 top 0 / 1px calc(100% - var(--vcg-window-cut)) no-repeat,
        linear-gradient(var(--vcg-frame-line), var(--vcg-frame-line)) left 0 bottom 0 / calc(100% - var(--vcg-window-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-frame-soft), var(--vcg-frame-soft)) left 0 top var(--vcg-window-cut) / 1px calc(100% - var(--vcg-window-cut)) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 2px), var(--vcg-frame-line) calc(50% - 2px), var(--vcg-frame-line) calc(50% + 2px), transparent calc(50% + 2px)) left 0 top 0 / var(--vcg-window-cut) var(--vcg-window-cut) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 2px), var(--vcg-frame-line) calc(50% - 2px), var(--vcg-frame-line) calc(50% + 2px), transparent calc(50% + 2px)) right 0 bottom 0 / var(--vcg-window-cut) var(--vcg-window-cut) no-repeat !important;
}

/* Dropdown entries are interior controls: neutral complete frames with the
   same physical 45-degree cuts as the rest of the application. */
html body .site-header .nav-tabs.nav-tabs-grouped .nav-dropdown-menu > :is(a, span) {
    --vcg-dropdown-item-cut: 8px;
    position: relative !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: polygon(
        var(--vcg-dropdown-item-cut) 0,
        100% 0,
        100% calc(100% - var(--vcg-dropdown-item-cut)),
        calc(100% - var(--vcg-dropdown-item-cut)) 100%,
        0 100%,
        0 var(--vcg-dropdown-item-cut)
    ) !important;
    overflow: hidden !important;
}

html body .site-header .nav-tabs.nav-tabs-grouped .nav-dropdown-menu > :is(a, span)::after {
    --vcg-dropdown-item-line: rgba(172, 184, 192, .56);
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    pointer-events: none !important;
    padding: 0 !important;
    clip-path: none !important;
    background:
        linear-gradient(var(--vcg-dropdown-item-line), var(--vcg-dropdown-item-line)) left var(--vcg-dropdown-item-cut) top / calc(100% - var(--vcg-dropdown-item-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-dropdown-item-line), var(--vcg-dropdown-item-line)) right top / 1px calc(100% - var(--vcg-dropdown-item-cut)) no-repeat,
        linear-gradient(var(--vcg-dropdown-item-line), var(--vcg-dropdown-item-line)) left bottom / calc(100% - var(--vcg-dropdown-item-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-dropdown-item-line), var(--vcg-dropdown-item-line)) left 0 top var(--vcg-dropdown-item-cut) / 1px calc(100% - var(--vcg-dropdown-item-cut)) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 2px), var(--vcg-dropdown-item-line) calc(50% - 2px), var(--vcg-dropdown-item-line) calc(50% + 2px), transparent calc(50% + 2px)) left top / var(--vcg-dropdown-item-cut) var(--vcg-dropdown-item-cut) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 2px), var(--vcg-dropdown-item-line) calc(50% - 2px), var(--vcg-dropdown-item-line) calc(50% + 2px), transparent calc(50% + 2px)) right bottom / var(--vcg-dropdown-item-cut) var(--vcg-dropdown-item-cut) no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
}

html body .site-header .nav-tabs.nav-tabs-grouped .nav-dropdown-menu > a:is(:hover, .active)::after {
    --vcg-dropdown-item-line: rgba(224, 0, 0, .72);
}

html body .site-header .nav-tabs.nav-tabs-grouped .nav-dropdown-menu::after {
    background:
        linear-gradient(var(--vcg-dropdown-line), var(--vcg-dropdown-line)) left top / 100% 1px no-repeat,
        linear-gradient(var(--vcg-dropdown-line), var(--vcg-dropdown-line)) right top / 1px calc(100% - var(--vcg-dropdown-cut)) no-repeat,
        linear-gradient(var(--vcg-dropdown-line), var(--vcg-dropdown-line)) left bottom / calc(100% - var(--vcg-dropdown-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-dropdown-line), var(--vcg-dropdown-line)) left top / 1px 100% no-repeat,
        linear-gradient(135deg, transparent calc(50% - 2px), var(--vcg-dropdown-line) calc(50% - 2px), var(--vcg-dropdown-line) calc(50% + 2px), transparent calc(50% + 2px)) right bottom / var(--vcg-dropdown-cut) var(--vcg-dropdown-cut) no-repeat !important;
}

/* Restore the physical cut on cards whose page-local compatibility rules only
   removed clipping. This also removes the square corner behind the red line. */
html body .ships-panel .ship-link-card,
html body .loadout-panel .loadout-card {
    --vcg-window-cut: 18px;
    border-radius: 0 !important;
    clip-path: polygon(
        var(--vcg-window-cut) 0,
        100% 0,
        100% calc(100% - var(--vcg-window-cut)),
        calc(100% - var(--vcg-window-cut)) 100%,
        0 100%,
        0 var(--vcg-window-cut)
    ) !important;
    overflow: hidden !important;
}

html body .ships-panel :is(.ship-link-stat, .ship-link-fact, .ship-link-manual),
html body .loadout-panel :is(
    .loadout-stat,
    .loadout-fact,
    .summary-stat-box,
    .ship-thruster-box
) {
    --vcg-window-cut: 12px;
    border-radius: 0 !important;
    clip-path: polygon(
        var(--vcg-window-cut) 0,
        100% 0,
        100% calc(100% - var(--vcg-window-cut)),
        calc(100% - var(--vcg-window-cut)) 100%,
        0 100%,
        0 var(--vcg-window-cut)
    ) !important;
    overflow: hidden !important;
}

html body .page-panel .overview-link-section .link-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 360px)) !important;
    justify-content: start !important;
    align-items: stretch !important;
}

/* Quality pass 2026-08: shared compact header and accessible mobile navigation. */
.site-nav-toggle {
    display: none;
}

@media (max-width: 980px) {
    html body .site-header,
    html body .admin-header.site-header {
        min-height: 0 !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        grid-template-areas:
            "brand toggle"
            "status status"
            "nav nav" !important;
        gap: 8px 12px !important;
        padding: 10px 12px !important;
        overflow: visible !important;
        clip-path: none !important;
    }

    html body .site-header .brand,
    html body .admin-header.site-header .brand {
        grid-area: brand !important;
        min-width: 0 !important;
        gap: 10px !important;
        align-items: center !important;
    }

    html body .site-header .crest-img,
    html body .admin-header.site-header .crest-img {
        width: 50px !important;
        height: 50px !important;
        flex: 0 0 50px !important;
    }

    html body .site-header .brand-title,
    html body .admin-header.site-header .brand-title {
        font-size: clamp(17px, 5vw, 24px) !important;
        line-height: 1 !important;
        letter-spacing: .04em !important;
        overflow-wrap: anywhere;
    }

    html body .site-header .brand-subtitle,
    html body .admin-header.site-header .brand-subtitle {
        margin-top: 4px !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
        letter-spacing: .07em !important;
    }

    .site-nav-toggle {
        grid-area: toggle;
        display: grid;
        width: 44px;
        height: 44px;
        min-width: 44px;
        place-items: center;
        align-self: center;
        padding: 5px;
        border: 1px solid rgba(224, 0, 0, .62);
        border-radius: 0;
        background: rgba(4, 8, 11, .88);
        color: #eef3f5;
        cursor: pointer;
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    }

    .site-nav-toggle > span:last-child {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .site-nav-toggle-icon {
        display: grid;
        width: 22px;
        gap: 4px;
    }

    .site-nav-toggle-icon i {
        display: block;
        height: 2px;
        background: currentColor;
        transition: transform .16s ease, opacity .16s ease;
    }

    .site-header.is-nav-open .site-nav-toggle-icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .site-header.is-nav-open .site-nav-toggle-icon i:nth-child(2) { opacity: 0; }
    .site-header.is-nav-open .site-nav-toggle-icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    html body .site-header .member-card,
    html body .admin-header.site-header .member-card {
        grid-area: status !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        grid-template-columns: 34px minmax(0, 1fr) auto !important;
        gap: 8px !important;
        padding: 6px 8px !important;
    }

    html body .site-header .member-avatar,
    html body .admin-header.site-header .member-avatar {
        width: 34px !important;
        height: 34px !important;
    }

    html body .site-header .member-meta,
    html body .admin-header.site-header .member-meta {
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: baseline !important;
        gap: 2px 7px !important;
    }

    html body .site-header .member-meta > span,
    html body .site-header .member-meta > small,
    html body .site-header .member-link-row,
    html body .site-header .runtime-versions,
    html body .admin-header.site-header .member-meta > span,
    html body .admin-header.site-header .member-meta > small,
    html body .admin-header.site-header .member-link-row,
    html body .admin-header.site-header .runtime-versions {
        display: none !important;
    }

    html body .site-header .member-meta strong,
    html body .admin-header.site-header .member-meta strong {
        grid-column: 1 / -1;
        font-size: 12px !important;
    }

    html body .site-header .member-logout-btn,
    html body .admin-header.site-header .member-logout-btn {
        min-width: 66px !important;
        min-height: 30px !important;
        padding: 5px 8px !important;
        font-size: 10px !important;
    }

    html body .site-header .nav-tabs.nav-tabs-grouped,
    html body .admin-header.site-header .nav-tabs.nav-tabs-grouped {
        grid-area: nav !important;
        display: none !important;
        width: 100% !important;
        max-height: calc(100dvh - 145px);
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding: 6px 0 2px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    html body .site-header.is-nav-open .nav-tabs.nav-tabs-grouped,
    html body .admin-header.site-header.is-nav-open .nav-tabs.nav-tabs-grouped {
        display: grid !important;
    }

    html body .site-header .nav-tabs.nav-tabs-grouped > a,
    html body .site-header .nav-tabs.nav-tabs-grouped > .nav-dropdown,
    html body .site-header .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary,
    html body .admin-header.site-header .nav-tabs.nav-tabs-grouped > a,
    html body .admin-header.site-header .nav-tabs.nav-tabs-grouped > .nav-dropdown,
    html body .admin-header.site-header .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    html body .site-header .nav-tabs.nav-tabs-grouped > a,
    html body .site-header .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary,
    html body .admin-header.site-header .nav-tabs.nav-tabs-grouped > a,
    html body .admin-header.site-header .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary {
        min-height: 40px !important;
        padding: 10px 14px !important;
        font-size: 11px !important;
        white-space: normal !important;
    }

    html body .site-header .nav-tabs.nav-tabs-grouped .nav-dropdown-menu,
    html body .admin-header.site-header .nav-tabs.nav-tabs-grouped .nav-dropdown-menu {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-top: 4px !important;
        padding: 5px !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html body .site-header .nav-tabs.nav-tabs-grouped .nav-dropdown-menu > :is(a, span),
    html body .admin-header.site-header .nav-tabs.nav-tabs-grouped .nav-dropdown-menu > :is(a, span) {
        min-width: 0 !important;
        min-height: 36px !important;
        padding: 9px 12px !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}

@media (max-width: 520px) {
    html body .site-header .brand-subtitle,
    html body .admin-header.site-header .brand-subtitle {
        display: none !important;
    }
}

html body .page-panel .overview-link-section .link-card {
    width: 100% !important;
    max-width: 360px !important;
}

html body .overview-link-section .link-card:hover {
    border-color: transparent !important;
    box-shadow: 0 0 20px rgba(224, 0, 0, .12) !important;
}

html body .legend-filter-card > summary {
    color: rgba(235, 239, 242, .92) !important;
    text-shadow: none !important;
}

html body .legend-filter-card > summary:hover {
    color: #fff !important;
}

@media (max-width: 520px) {
    html body .page-panel .overview-link-section .link-grid {
        grid-template-columns: 1fr !important;
    }

    html body .page-panel .overview-link-section .link-card {
        max-width: none !important;
    }
}

/* Keep the primary navigation compact and give every entry the same footprint. */
@media (min-width: 981px) {
    html body .site-header .nav-tabs.nav-tabs-grouped {
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    html body .site-header .nav-tabs.nav-tabs-grouped > a,
    html body .site-header .nav-tabs.nav-tabs-grouped > .nav-dropdown {
        flex: 0 0 148px !important;
        width: 148px !important;
        min-width: 148px !important;
        max-width: 148px !important;
    }

    html body .site-header .nav-tabs.nav-tabs-grouped > a,
    html body .site-header .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary {
        padding-inline: 14px !important;
    }

    html body .site-header {
        min-height: 0 !important;
        align-content: start !important;
        gap: 10px 22px !important;
        padding: 16px 28px 12px !important;
    }

    html body .site-header .crest-img {
        width: 96px !important;
        height: 96px !important;
    }

    html body .site-header .brand-title {
        font-size: clamp(30px, 3vw, 50px) !important;
    }
}

html body .site-header > .site-skip-link {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 1000000 !important;
    transform: translateY(-180%) !important;
}

html body .site-header > .site-skip-link:focus-visible {
    transform: translateY(0) !important;
}

/* Unified VCG dropdown surface. Page-local rules may size controls, while palette and state stay global. */
html body select:not([multiple]) {
    color-scheme: dark !important;
    appearance: none !important;
    min-height: 36px;
    padding: 6px 36px 6px 10px !important;
    border: 1px solid rgba(139, 150, 157, .42) !important;
    border-radius: 0 !important;
    background-color: #05090b !important;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(235, 240, 243, .88) 50%),
        linear-gradient(135deg, rgba(235, 240, 243, .88) 50%, transparent 50%) !important;
    background-position:
        calc(100% - 15px) 50%,
        calc(100% - 10px) 50% !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    box-shadow: inset 0 0 8px rgba(224, 0, 0, .07), 0 0 7px rgba(224, 0, 0, .04) !important;
    color: #e7ecef !important;
}

html body select:not([multiple]):hover {
    border-color: rgba(224, 0, 0, .68) !important;
    box-shadow: inset 0 0 10px rgba(224, 0, 0, .13), 0 0 12px rgba(224, 0, 0, .14) !important;
}

html body select:not([multiple]):focus,
html body select:not([multiple]):focus-visible {
    outline: 2px solid rgba(255, 72, 82, .82) !important;
    outline-offset: 2px !important;
    border-color: #e00000 !important;
    box-shadow: inset 0 0 12px rgba(224, 0, 0, .15), 0 0 0 3px rgba(224, 0, 0, .14), 0 0 14px rgba(224, 0, 0, .14) !important;
}

html body select[multiple] {
    color-scheme: dark !important;
    border: 1px solid rgba(139, 150, 157, .42) !important;
    border-radius: 0 !important;
    background: #05090b !important;
    box-shadow: inset 0 0 8px rgba(224, 0, 0, .07), 0 0 7px rgba(224, 0, 0, .04) !important;
    color: #e7ecef !important;
}

html body select option,
html body select optgroup {
    color-scheme: dark !important;
    background: #05090b !important;
    color: #e7ecef !important;
}

html body select optgroup {
    color: #df646b !important;
}

html body select option:checked {
    background: #05090b !important;
    color: #e7ecef !important;
}

html body select:disabled {
    border-color: rgba(112, 123, 130, .22) !important;
    background-color: #090c0e !important;
    color: #717b82 !important;
    opacity: .76;
}

/* corner-integrity-v1: fixed-size 45-degree avatar frame. */
html body .member-avatar-frame {
    --member-avatar-cut: 7px;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    padding: 1px;
    background: rgba(33, 234, 255, .48);
    box-shadow: 0 0 16px rgba(33, 234, 255, .14);
    clip-path: polygon(
        var(--member-avatar-cut) 0,
        100% 0,
        100% calc(100% - var(--member-avatar-cut)),
        calc(100% - var(--member-avatar-cut)) 100%,
        0 100%,
        0 var(--member-avatar-cut)
    );
}

html body .member-avatar-frame .member-avatar {
    width: 100%;
    height: 100%;
    border: 0;
    box-shadow: none;
    clip-path: polygon(
        calc(var(--member-avatar-cut) - 1px) 0,
        100% 0,
        100% calc(100% - var(--member-avatar-cut) + 1px),
        calc(100% - var(--member-avatar-cut) + 1px) 100%,
        0 100%,
        0 calc(var(--member-avatar-cut) - 1px)
    );
}

/* corner-integrity-v2: canonical menu frame independent of page-local header
   class names. This keeps opened menus on every module physically identical. */
html body .nav-tabs.nav-tabs-grouped .nav-dropdown-menu {
    --vcg-dropdown-cut: 10px;
    position: absolute !important;
    isolation: isolate;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--vcg-dropdown-cut)),
        calc(100% - var(--vcg-dropdown-cut)) 100%,
        0 100%
    ) !important;
    overflow: hidden !important;
}

html body .nav-tabs.nav-tabs-grouped .nav-dropdown-menu::after {
    --vcg-dropdown-line: rgba(255, 28, 28, .82);
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background:
        linear-gradient(var(--vcg-dropdown-line), var(--vcg-dropdown-line)) left top / 100% 1px no-repeat,
        linear-gradient(var(--vcg-dropdown-line), var(--vcg-dropdown-line)) right top / 1px calc(100% - var(--vcg-dropdown-cut)) no-repeat,
        linear-gradient(var(--vcg-dropdown-line), var(--vcg-dropdown-line)) left bottom / calc(100% - var(--vcg-dropdown-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-dropdown-line), var(--vcg-dropdown-line)) left top / 1px 100% no-repeat,
        linear-gradient(135deg, transparent calc(50% - 1px), var(--vcg-dropdown-line) calc(50% - 1px), var(--vcg-dropdown-line) calc(50% + 1px), transparent calc(50% + 1px)) right bottom / var(--vcg-dropdown-cut) var(--vcg-dropdown-cut) no-repeat !important;
}

@media (max-width: 980px) {
    html body .nav-tabs.nav-tabs-grouped .nav-dropdown-menu {
        position: static !important;
    }

    html body .member-avatar-frame {
        --member-avatar-cut: 5px;
        width: 34px;
        height: 34px;
    }

    html body .site-nav-toggle {
        --site-toggle-cut: 8px;
        position: relative;
        isolation: isolate;
        border: 0;
    }

    html body .site-nav-toggle::before {
        --site-toggle-line: rgba(224, 0, 0, .72);
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background:
            linear-gradient(var(--site-toggle-line), var(--site-toggle-line)) left var(--site-toggle-cut) top / calc(100% - var(--site-toggle-cut)) 1px no-repeat,
            linear-gradient(var(--site-toggle-line), var(--site-toggle-line)) right top / 1px calc(100% - var(--site-toggle-cut)) no-repeat,
            linear-gradient(var(--site-toggle-line), var(--site-toggle-line)) left bottom / calc(100% - var(--site-toggle-cut)) 1px no-repeat,
            linear-gradient(var(--site-toggle-line), var(--site-toggle-line)) left top var(--site-toggle-cut) / 1px calc(100% - var(--site-toggle-cut)) no-repeat,
            linear-gradient(135deg, transparent calc(50% - 1px), var(--site-toggle-line) calc(50% - 1px), var(--site-toggle-line) calc(50% + 1px), transparent calc(50% + 1px)) left top / var(--site-toggle-cut) var(--site-toggle-cut) no-repeat,
            linear-gradient(135deg, transparent calc(50% - 1px), var(--site-toggle-line) calc(50% - 1px), var(--site-toggle-line) calc(50% + 1px), transparent calc(50% + 1px)) right bottom / var(--site-toggle-cut) var(--site-toggle-cut) no-repeat;
    }

    html body .site-nav-toggle > * {
        position: relative;
        z-index: 3;
    }
}

/* vcg-module-corner-integrity-v1
 * Secondary workspace modules use a restrained neutral frame. Red stays
 * reserved for outer windows and active states. */
html body :is(
    .component-category-card,
    .component-catalog-summary,
    .cluster-card,
    .shopping-section,
    .shopping-heading,
    .shopping-workspace-head,
    .equipment-filterbar,
    .versedb-card,
    .documents-toolbar,
    .documents-notice,
    .profile-overlay-switches,
    .profile-radio-priority-mode,
    .profile-radio-priority-actions,
    .calendar-ship-picker,
    .calendar-attendance-box,
    .calendar-edit-details,
    .calendar-reminder-settings,
    .workshop-cockpit-section,
    .analysis-card,
    .comparison-context,
    .analysis-scenario-bar,
    .radar-sensor-summary,
    .loadout-component-toolbar,
    .defense-fallback-values,
    .formation-index,
    .formation-layout-workspace,
    .formation-layout-inspector,
    .formation-preset-manager,
    .formation-readiness,
    .formation-member-settings,
    .mission-navigation-points,
    .mission-layer-filter-bar,
    .route-library,
    .route-shopping-list,
    .route-simulation-controls,
    .radio-audio-strip,
    .radio-net-card,
    .radio-console-help,
    .radio-role-editor,
    .radio-role-personal,
    .radio-dispatch-composer,
    .radio-dispatch-current,
    .radio-voice-diagnostics,
    .radio-infrastructure-health
) {
    --vcg-module-cut: 10px;
    --vcg-module-line: rgba(168, 181, 188, .52);
    --vcg-module-soft: rgba(168, 181, 188, .28);
    position: relative !important;
    isolation: isolate;
    border-color: transparent !important;
    border-radius: 0 !important;
    clip-path: polygon(
        var(--vcg-module-cut) 0,
        100% 0,
        100% calc(100% - var(--vcg-module-cut)),
        calc(100% - var(--vcg-module-cut)) 100%,
        0 100%,
        0 var(--vcg-module-cut)
    ) !important;
}

html body :is(
    .component-category-card,
    .component-catalog-summary,
    .cluster-card,
    .shopping-section,
    .shopping-heading,
    .shopping-workspace-head,
    .equipment-filterbar,
    .versedb-card,
    .documents-toolbar,
    .documents-notice,
    .profile-overlay-switches,
    .profile-radio-priority-mode,
    .profile-radio-priority-actions,
    .calendar-ship-picker,
    .calendar-attendance-box,
    .calendar-edit-details,
    .calendar-reminder-settings,
    .workshop-cockpit-section,
    .analysis-card,
    .comparison-context,
    .analysis-scenario-bar,
    .radar-sensor-summary,
    .loadout-component-toolbar,
    .defense-fallback-values,
    .formation-index,
    .formation-layout-workspace,
    .formation-layout-inspector,
    .formation-preset-manager,
    .formation-readiness,
    .formation-member-settings,
    .mission-navigation-points,
    .mission-layer-filter-bar,
    .route-library,
    .route-shopping-list,
    .route-simulation-controls,
    .radio-audio-strip,
    .radio-net-card,
    .radio-console-help,
    .radio-role-editor,
    .radio-role-personal,
    .radio-dispatch-composer,
    .radio-dispatch-current,
    .radio-voice-diagnostics,
    .radio-infrastructure-health
)::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 8 !important;
    padding: 0 !important;
    pointer-events: none !important;
    clip-path: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    background:
        linear-gradient(var(--vcg-module-line), var(--vcg-module-line)) left var(--vcg-module-cut) top / calc(100% - var(--vcg-module-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-module-soft), var(--vcg-module-soft)) right top / 1px calc(100% - var(--vcg-module-cut)) no-repeat,
        linear-gradient(var(--vcg-module-line), var(--vcg-module-line)) left bottom / calc(100% - var(--vcg-module-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-module-soft), var(--vcg-module-soft)) left top var(--vcg-module-cut) / 1px calc(100% - var(--vcg-module-cut)) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 1px), var(--vcg-module-line) calc(50% - 1px), var(--vcg-module-line) calc(50% + 1px), transparent calc(50% + 1px)) left top / var(--vcg-module-cut) var(--vcg-module-cut) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 1px), var(--vcg-module-line) calc(50% - 1px), var(--vcg-module-line) calc(50% + 1px), transparent calc(50% + 1px)) right bottom / var(--vcg-module-cut) var(--vcg-module-cut) no-repeat !important;
}

html body :is(
    .component-category-card:hover,
    .cluster-card:hover,
    .calendar-ship-picker[open],
    .calendar-edit-details[open],
    .formation-member-settings[open],
    .route-library[open],
    .route-shopping-list[open],
    .radio-net-card.is-transmitting,
    .radio-net-card.is-priority,
    .radio-voice-diagnostics[open]
) {
    --vcg-module-line: rgba(224, 0, 0, .76);
    --vcg-module-soft: rgba(224, 0, 0, .38);
}

@media (max-width: 700px) {
    html body :is(
        .component-category-card,
        .cluster-card,
        .shopping-section,
        .versedb-card,
        .analysis-card,
        .formation-index,
        .formation-layout-workspace,
        .formation-layout-inspector,
        .radio-net-card
    ) {
        --vcg-module-cut: 8px;
    }
}

/* main-navigation-state-integrity-v2
 * Every state uses one uniform six-segment outline. Active and hover states
 * are distinguished by colour and a restrained inner glow, not a second bar. */
html body .nav-tabs.nav-tabs-grouped > a,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary {
    --vcg-nav-state-cut: var(--nav-cut, 10px);
    --vcg-nav-state-line: rgba(166, 178, 185, .62);
    position: relative !important;
    isolation: isolate !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: polygon(
        var(--vcg-nav-state-cut) 0,
        100% 0,
        100% calc(100% - var(--vcg-nav-state-cut)),
        calc(100% - var(--vcg-nav-state-cut)) 100%,
        0 100%,
        0 var(--vcg-nav-state-cut)
    ) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(0, 0, 0, .22)),
        rgba(8, 12, 14, .90) !important;
    box-shadow:
        inset 0 0 14px rgba(166, 178, 185, .025),
        0 6px 12px rgba(0, 0, 0, .22) !important;
    transition:
        color .16s ease,
        background .16s ease,
        box-shadow .16s ease !important;
}

html body .nav-tabs.nav-tabs-grouped > a::before,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 3 !important;
    pointer-events: none !important;
    clip-path: polygon(
        var(--vcg-nav-state-cut) 0,
        100% 0,
        100% calc(100% - var(--vcg-nav-state-cut)),
        calc(100% - var(--vcg-nav-state-cut)) 100%,
        0 100%,
        0 var(--vcg-nav-state-cut)
    ) !important;
    background:
        linear-gradient(var(--vcg-nav-state-line), var(--vcg-nav-state-line)) left var(--vcg-nav-state-cut) top / calc(100% - var(--vcg-nav-state-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-nav-state-line), var(--vcg-nav-state-line)) right top / 1px calc(100% - var(--vcg-nav-state-cut)) no-repeat,
        linear-gradient(var(--vcg-nav-state-line), var(--vcg-nav-state-line)) left bottom / calc(100% - var(--vcg-nav-state-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-nav-state-line), var(--vcg-nav-state-line)) left top var(--vcg-nav-state-cut) / 1px calc(100% - var(--vcg-nav-state-cut)) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 1px), var(--vcg-nav-state-line) calc(50% - 1px), var(--vcg-nav-state-line) calc(50% + 1px), transparent calc(50% + 1px)) left top / var(--vcg-nav-state-cut) var(--vcg-nav-state-cut) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 1px), var(--vcg-nav-state-line) calc(50% - 1px), var(--vcg-nav-state-line) calc(50% + 1px), transparent calc(50% + 1px)) right bottom / var(--vcg-nav-state-cut) var(--vcg-nav-state-cut) no-repeat !important;
}

html body .nav-tabs.nav-tabs-grouped > a:hover::before,
html body .nav-tabs.nav-tabs-grouped > a.active::before,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary:hover::before,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown.active > summary::before,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown[open] > summary::before {
    background:
        linear-gradient(var(--vcg-nav-state-line), var(--vcg-nav-state-line)) left var(--vcg-nav-state-cut) top / calc(100% - var(--vcg-nav-state-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-nav-state-line), var(--vcg-nav-state-line)) right top / 1px calc(100% - var(--vcg-nav-state-cut)) no-repeat,
        linear-gradient(var(--vcg-nav-state-line), var(--vcg-nav-state-line)) left bottom / calc(100% - var(--vcg-nav-state-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-nav-state-line), var(--vcg-nav-state-line)) left top var(--vcg-nav-state-cut) / 1px calc(100% - var(--vcg-nav-state-cut)) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 1px), var(--vcg-nav-state-line) calc(50% - 1px), var(--vcg-nav-state-line) calc(50% + 1px), transparent calc(50% + 1px)) left top / var(--vcg-nav-state-cut) var(--vcg-nav-state-cut) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 1px), var(--vcg-nav-state-line) calc(50% - 1px), var(--vcg-nav-state-line) calc(50% + 1px), transparent calc(50% + 1px)) right bottom / var(--vcg-nav-state-cut) var(--vcg-nav-state-cut) no-repeat !important;
}

html body .nav-tabs.nav-tabs-grouped > a:hover,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary:hover {
    --vcg-nav-state-line: rgba(245, 49, 54, .88);
    color: #fff !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(224, 0, 0, .075)),
        rgba(9, 13, 15, .94) !important;
    box-shadow:
        inset 0 0 16px rgba(224, 0, 0, .08),
        0 0 14px rgba(224, 0, 0, .13) !important;
}

html body .nav-tabs.nav-tabs-grouped > a.active,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown.active > summary,
html body .nav-tabs.nav-tabs-grouped > .nav-dropdown[open] > summary {
    --vcg-nav-state-line: rgba(255, 47, 52, .98);
    color: #fff !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(224, 0, 0, .13)),
        rgba(10, 13, 15, .96) !important;
    box-shadow:
        inset 0 0 18px rgba(224, 0, 0, .12),
        0 0 16px rgba(224, 0, 0, .20) !important;
}

@media (prefers-reduced-motion: reduce) {
    html body .nav-tabs.nav-tabs-grouped > a,
    html body .nav-tabs.nav-tabs-grouped > .nav-dropdown > summary {
        transition: none !important;
    }
}

/* overview-and-account-command-surface-v2 */
.overview-command-page {
    width: min(1560px, calc(100% - 32px));
    margin: 18px auto 48px;
    padding: 0;
    border: 0;
    background: transparent;
}

.overview-command-header {
    --cut: 16px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px 18px 30px;
    border: 0;
    background: transparent;
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

.overview-command-header::before,
.overview-command-header::after {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    content: "";
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

.overview-command-header::before {
    inset: 0;
    background: linear-gradient(90deg, rgba(224, 0, 0, .88), rgba(224, 0, 0, .48) 42%, rgba(224, 0, 0, .88));
}

.overview-command-header::after {
    --cut: 15px;
    inset: 1px;
    background: linear-gradient(180deg, rgba(18, 23, 27, .98), rgba(7, 10, 12, .98));
}

.overview-command-header > * {
    position: relative;
    z-index: 1;
}

.overview-command-kicker,
.overview-link-section-head span {
    color: #c34d53;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.overview-command-header h1 {
    margin: 4px 0 0;
    color: #f0f2f3;
    font-size: clamp(24px, 3vw, 40px);
    letter-spacing: 0;
    text-transform: uppercase;
}

.overview-command-header p {
    margin: 5px 0 0;
    color: #889299;
    font-size: 13px;
}

.overview-command-state {
    display: grid;
    justify-items: end;
    gap: 5px;
    min-width: 150px;
}

.overview-command-state span {
    color: #d7dcde;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.overview-command-state i,
.member-card-command .member-meta small i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    background: #58d978;
    box-shadow: 0 0 9px rgba(88, 217, 120, .72);
}

.overview-command-state small {
    color: #68737a;
    font-size: 10px;
}

.overview-link-section {
    margin-top: 18px !important;
    border-top: 1px solid rgba(164, 173, 179, .30);
    background: rgba(5, 8, 10, .84);
}

.overview-link-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 46px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(164, 173, 179, .16);
}

.overview-link-section-head h2 {
    margin: 0;
    color: #dce1e3;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.overview-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1px;
    padding: 1px;
    background: rgba(148, 159, 166, .10);
}

.overview-link-card {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: 12px 14px;
    color: #dfe3e5;
    background: #070b0d;
    text-decoration: none;
    transition: background .16s ease, box-shadow .16s ease;
}

.overview-link-card:hover {
    background: rgba(12, 16, 19, .98);
    box-shadow: inset 0 0 11px rgba(224, 0, 0, .14), 0 0 12px rgba(224, 0, 0, .1);
}

.overview-link-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border: 1px solid rgba(188, 196, 201, .34);
    background: #0b1013;
}

.overview-link-icon img {
    position: relative;
    z-index: 2;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.overview-link-icon b {
    position: absolute;
    color: #bfc6ca;
    font-size: 11px;
}

.overview-link-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.overview-link-copy strong {
    overflow: hidden;
    color: #e7eaec;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-link-copy small,
.overview-link-copy em {
    overflow: hidden;
    color: #7f898f;
    font-size: 10px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-link-copy em {
    color: #a4494f;
    font-size: 8px;
    text-transform: uppercase;
}

.overview-link-open {
    color: #8d979d;
    font-size: 17px;
}

.member-card.member-card-command {
    --card-cut: 12px;
    grid-template-columns: 54px minmax(0, 1fr) 36px;
    gap: 14px;
    width: 390px;
    min-width: 390px;
    max-width: 390px;
    min-height: 76px;
    padding: 10px 11px;
    border: 0;
    background: linear-gradient(105deg, rgba(11, 15, 18, .98), rgba(20, 9, 11, .94));
    clip-path: polygon(var(--card-cut) 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% 100%, var(--card-cut) 100%, 0 calc(100% - var(--card-cut)), 0 var(--card-cut));
    box-shadow: inset 0 0 0 1px rgba(224, 0, 0, .48), 0 0 16px rgba(0, 0, 0, .32);
}

.member-card-command .member-avatar,
.member-card-command .member-avatar-fallback {
    width: 42px;
    height: 50px;
    border-color: rgba(224, 0, 0, .50);
    box-shadow: 0 0 12px rgba(224, 0, 0, .12);
}

.member-card-command .member-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
}

.member-card-command .member-meta > span {
    color: #a34c52;
    font-size: 8px;
}

.member-card-command .member-meta > strong {
    font-size: 13px;
}

.member-card-command .member-meta > small {
    color: #7e898f;
    font-size: 8px;
}

.member-card-command .member-meta small i {
    width: 5px;
    height: 5px;
    margin-right: 5px;
}

.member-card-command .member-link-row {
    display: flex;
    gap: 10px;
    margin-top: 3px;
}

.member-card-command .member-meta a {
    color: #cbd1d4;
    font-size: 8px;
}

.member-card-command .member-meta a:hover {
    color: #ff6a71;
    text-shadow: none;
}

.member-card-command .runtime-versions {
    margin-top: 2px;
    font-size: 7px;
}

.member-card-command .member-logout-btn {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    color: #cb555b;
    font-size: 18px;
}

@media (max-width: 760px) {
    .overview-command-page { width: calc(100% - 16px); }
    .overview-command-header { display: grid; padding: 18px; }
    .overview-command-state { justify-items: start; }
    .overview-link-grid { grid-template-columns: 1fr; }
    .member-card.member-card-command { width: 100%; min-width: 0; max-width: none; }
}

/* command-surface-consistency-v3
 * Shared density, typography and framing for the overview and member areas. */
:is(
    .overview-command-header,
    .member-directory-heading,
    .profile-workspace-heading,
    .member-profile-hero,
    .member-profile-section,
    .member-directory-card,
    .member-wishlist-list-index,
    .member-wishlist-table-wrap
) {
    font-family: var(--font-ui);
}

:is(
    .overview-command-header h1,
    .member-directory-heading h1,
    .profile-workspace-heading h1,
    .member-profile-title h1,
    .profile-edit-preview h2
) {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

.overview-command-page {
    width: min(1880px, calc(100% - 34px));
    margin-top: 20px;
}

.overview-command-header {
    min-height: 92px;
    padding: 18px 22px 17px 26px;
}

.overview-command-header h1 {
    margin-top: 5px;
    font-size: clamp(25px, 2.25vw, 36px);
}

.overview-command-header p {
    font-size: 12px;
}

.overview-link-section {
    --overview-cut: 10px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 0;
    background: transparent;
    clip-path: polygon(var(--overview-cut) 0, 100% 0, 100% calc(100% - var(--overview-cut)), calc(100% - var(--overview-cut)) 100%, 0 100%, 0 var(--overview-cut));
    box-shadow: none;
}

.overview-link-section::before,
.overview-link-section::after {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    content: "";
    clip-path: polygon(var(--overview-cut) 0, 100% 0, 100% calc(100% - var(--overview-cut)), calc(100% - var(--overview-cut)) 100%, 0 100%, 0 var(--overview-cut));
}

.overview-link-section::before {
    inset: 0;
    background: linear-gradient(90deg, rgba(224, 0, 0, .72), rgba(151, 163, 169, .38) 68%, rgba(224, 0, 0, .62));
}

.overview-link-section::after {
    --overview-cut: 9px;
    inset: 1px;
    background: rgba(4, 8, 10, .96);
}

.overview-link-section > * {
    position: relative;
    z-index: 1;
}

.overview-link-section-head {
    min-height: 42px;
    padding: 0 16px 0 20px;
    border-bottom-color: rgba(151, 163, 169, .18);
}

.overview-link-section-head h2 {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 400;
}

.overview-link-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 8px;
    padding: 10px 12px 13px;
    background: transparent;
}

.overview-link-card {
    --overview-card-cut: 8px;
    isolation: isolate;
    overflow: hidden;
    min-height: 72px;
    border: 0;
    background: transparent;
    clip-path: polygon(var(--overview-card-cut) 0, 100% 0, 100% calc(100% - var(--overview-card-cut)), calc(100% - var(--overview-card-cut)) 100%, 0 100%, 0 var(--overview-card-cut));
}

.overview-link-card::before,
.overview-link-card::after {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    content: "";
    clip-path: polygon(var(--overview-card-cut) 0, 100% 0, 100% calc(100% - var(--overview-card-cut)), calc(100% - var(--overview-card-cut)) 100%, 0 100%, 0 var(--overview-card-cut));
}

.overview-link-card::before {
    inset: 0;
    background: linear-gradient(90deg, rgba(224, 0, 0, .78), rgba(151, 163, 169, .34) 28%, rgba(151, 163, 169, .34));
    transition: background .16s ease, filter .16s ease;
}

.overview-link-card::after {
    --overview-card-cut: 7px;
    inset: 1px;
    background: rgba(7, 11, 13, .98);
    transition: background .16s ease;
}

.overview-link-card > * {
    position: relative;
    z-index: 1;
}

.overview-link-card:hover {
    background: transparent;
    box-shadow: 0 0 14px rgba(224, 0, 0, .16);
}

.overview-link-card:hover::before {
    background: rgba(245, 49, 54, .88);
    filter: drop-shadow(0 0 5px rgba(224, 0, 0, .30));
}

.overview-link-card:hover::after {
    background: linear-gradient(90deg, rgba(40, 8, 11, .98), rgba(12, 16, 19, .99) 52%);
}

.member-directory-heading,
.profile-workspace-heading {
    min-height: 96px;
    padding: 18px 22px 19px 26px;
}

.member-directory-heading h1,
.profile-workspace-heading h1 {
    font-size: clamp(25px, 2.4vw, 38px);
}

.member-directory-heading p,
.profile-workspace-heading p {
    margin-top: 5px;
    font-size: 13px;
}

.member-directory-filter {
    margin: 12px 0;
    padding: 12px 15px;
}

.member-directory-summary {
    margin-bottom: 11px;
}

.member-directory-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 10px;
}

.member-directory-card {
    min-height: 158px;
}

.member-directory-primary {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 10px 13px;
    padding: 16px 16px 10px;
}

.member-directory-profile-actions {
    padding: 0 16px 14px;
}

.member-directory-avatar {
    width: 68px;
    height: 68px;
    font-family: var(--font-display);
    font-size: 20px;
}

.member-directory-identity > strong {
    font-size: 16px;
}

.member-profile-hero,
.profile-edit-preview {
    grid-template-columns: 112px minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    min-height: 184px;
    padding: 24px 28px;
}

.member-profile-avatar {
    width: 112px;
    height: 112px;
    font-family: var(--font-display);
    font-size: 30px;
}

.member-profile-title h1,
.profile-edit-preview h2 {
    font-size: clamp(27px, 3vw, 43px);
}

.member-profile-title p,
.profile-edit-preview p {
    font-size: 13px;
}

.member-profile-live-state span,
.member-profile-live-state a {
    min-width: 144px;
    padding: 6px 9px;
    font-size: 10px;
}

.member-profile-layout {
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.member-profile-sidebar,
.member-profile-content {
    gap: 12px;
}

.member-profile-section {
    padding: 16px 18px;
}

.member-profile-section h2 {
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 400;
}

.member-profile-facts dt,
.member-profile-facts dd {
    padding: 7px 0;
}

.member-wishlist-overview {
    gap: 12px;
}

.member-wishlist-list-index,
.member-wishlist-table-wrap {
    border-color: rgba(151, 163, 169, .28);
    background: rgba(5, 9, 11, .92);
}

@media (max-width: 900px) {
    .member-profile-hero,
    .profile-edit-preview {
        grid-template-columns: 92px minmax(0, 1fr);
        min-height: 0;
        padding: 20px;
    }

    .member-profile-avatar {
        width: 92px;
        height: 92px;
    }

    .member-profile-live-state {
        grid-column: 1 / -1;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        justify-items: stretch;
    }

    .member-profile-live-state span,
    .member-profile-live-state a {
        min-width: 0;
        text-align: left;
    }

    .member-profile-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .overview-command-header,
    .member-directory-heading,
    .profile-workspace-heading {
        align-items: start;
        padding: 16px;
    }

    .member-directory-filter {
        grid-template-columns: 1fr;
    }

    .member-profile-hero,
    .profile-edit-preview {
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 13px;
        padding: 16px;
    }

    .member-profile-avatar {
        width: 74px;
        height: 74px;
    }

    .member-profile-title h1,
    .profile-edit-preview h2 {
        font-size: clamp(22px, 8vw, 30px);
    }
}

/* Compact owner actions on the public member profile. */
.member-profile-hero-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 3px;
}

.member-profile-live-state .member-profile-icon-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    overflow: hidden;
    border: 0;
    color: #b8c0c4;
    background: rgba(115, 126, 132, .72);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    transition: color .16s ease, filter .16s ease;
}

.member-profile-live-state .member-profile-icon-action::before {
    content: '';
    position: absolute;
    inset: 1px;
    background: rgba(5, 8, 10, .96);
    clip-path: inherit;
}

.member-profile-live-state .member-profile-icon-action.is-primary {
    color: #ff6975;
    background: #e00018;
}

.member-profile-live-state .member-profile-icon-action:hover,
.member-profile-live-state .member-profile-icon-action:focus-visible {
    color: #fff;
    filter: drop-shadow(0 0 7px rgba(255, 35, 55, .58));
    outline: none;
}

.member-profile-live-state .member-profile-icon-action svg {
    position: relative;
    z-index: 1;
    width: 19px;
    height: 19px;
    stroke: currentColor;
}

@media (max-width: 900px) {
    .member-profile-hero-actions {
        justify-content: flex-start;
    }
}

/* member-corners-2
 * Complete segmented outlines for the clipped member and wishlist surfaces. */
:is(
    .member-action-button,
    .member-directory-filter,
    .member-profile-hero,
    .profile-edit-preview,
    .member-profile-section,
    .member-wishlist-create-panel,
    .member-wishlist-list-index,
    .member-wishlist-table-wrap,
    .member-public-wishlists details,
    .profile-edit-section,
    .profile-wishlist-index > a,
    .profile-wishlist-create,
    .profile-wishlist-item-list article,
    .member-directory-avatar,
    .member-profile-avatar
) {
    --vcg-member-shape-cut: 10px;
    --vcg-member-shape-line: rgba(154, 166, 173, .48);
    position: relative;
    border: 0;
    clip-path: polygon(
        var(--vcg-member-shape-cut) 0,
        100% 0,
        100% calc(100% - var(--vcg-member-shape-cut)),
        calc(100% - var(--vcg-member-shape-cut)) 100%,
        0 100%,
        0 var(--vcg-member-shape-cut)
    );
}

:is(
    .member-action-button,
    .member-directory-filter,
    .member-profile-hero,
    .profile-edit-preview,
    .member-profile-section,
    .member-wishlist-create-panel,
    .member-wishlist-list-index,
    .member-wishlist-table-wrap,
    .member-public-wishlists details,
    .profile-edit-section,
    .profile-wishlist-index > a,
    .profile-wishlist-create,
    .profile-wishlist-item-list article,
    .member-directory-avatar,
    .member-profile-avatar
)::after {
    content: '';
    position: absolute;
    z-index: 8;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(var(--vcg-member-shape-line), var(--vcg-member-shape-line)) left var(--vcg-member-shape-cut) top / calc(100% - var(--vcg-member-shape-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-member-shape-line), var(--vcg-member-shape-line)) right top / 1px calc(100% - var(--vcg-member-shape-cut)) no-repeat,
        linear-gradient(var(--vcg-member-shape-line), var(--vcg-member-shape-line)) left bottom / calc(100% - var(--vcg-member-shape-cut)) 1px no-repeat,
        linear-gradient(var(--vcg-member-shape-line), var(--vcg-member-shape-line)) left top var(--vcg-member-shape-cut) / 1px calc(100% - var(--vcg-member-shape-cut)) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 1px), var(--vcg-member-shape-line) calc(50% - 1px), var(--vcg-member-shape-line) calc(50% + 1px), transparent calc(50% + 1px)) left top / var(--vcg-member-shape-cut) var(--vcg-member-shape-cut) no-repeat,
        linear-gradient(135deg, transparent calc(50% - 1px), var(--vcg-member-shape-line) calc(50% - 1px), var(--vcg-member-shape-line) calc(50% + 1px), transparent calc(50% + 1px)) right bottom / var(--vcg-member-shape-cut) var(--vcg-member-shape-cut) no-repeat;
}

.member-action-button {
    --vcg-member-shape-cut: 7px;
}

.member-action-button:hover,
.member-action-button.is-primary,
.member-directory-filter,
.member-wishlist-create-panel {
    --vcg-member-shape-line: rgba(224, 0, 0, .88);
}

.member-profile-hero,
.profile-edit-preview {
    --vcg-member-shape-cut: 18px;
    --vcg-member-shape-line: rgba(224, 0, 0, .84);
}

.member-profile-section {
    --vcg-member-shape-line: rgba(224, 0, 0, .58);
}

.profile-edit-section[open],
.profile-wishlist-index > a.is-active {
    --vcg-member-shape-line: rgba(224, 0, 0, .82);
}

.member-directory-avatar,
.member-profile-avatar {
    --vcg-member-shape-cut: 10px;
    --vcg-member-shape-line: rgba(224, 0, 0, .82);
}

.member-wishlist-create-panel {
    margin: 12px 0 0;
    background: rgba(5, 9, 11, .94);
    box-shadow: inset 0 0 11px rgba(224, 0, 0, .07), 0 0 10px rgba(224, 0, 0, .05);
}

.member-wishlist-create-panel > summary {
    display: grid;
    grid-template-columns: 30px auto minmax(180px, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 9px 16px 9px 18px;
    cursor: pointer;
    list-style: none;
}

.member-wishlist-create-panel > summary::-webkit-details-marker {
    display: none;
}

.member-wishlist-create-panel > summary > span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(224, 0, 0, .76);
    color: #ff5e66;
    font-size: 20px;
    line-height: 1;
}

.member-wishlist-create-panel > summary strong {
    color: #e8edef;
    font-family: var(--font-tech, sans-serif);
    font-size: 13px;
    text-transform: uppercase;
}

.member-wishlist-create-panel > summary small {
    color: #768187;
    font-size: 11px;
}

.member-wishlist-create-panel > form {
    display: grid;
    grid-template-columns: minmax(220px, .65fr) minmax(280px, 1fr) auto auto;
    align-items: end;
    gap: 9px;
    padding: 12px 16px 15px 18px;
    border-top: 1px solid rgba(151, 162, 168, .18);
}

.member-wishlist-create-panel > form > label:not(.member-wishlist-public-toggle) {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.member-wishlist-create-panel > form > label > span {
    color: #8d989e;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.member-wishlist-public-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 9px;
    white-space: nowrap;
}

.vcg-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
}

.vcg-checkbox__input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.vcg-checkbox .vcg-checkbox__mark {
    position: relative;
    display: block;
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    background: #94131a;
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
    transition: background-color .16s ease, filter .16s ease;
}

.vcg-checkbox .vcg-checkbox__mark::before {
    content: "";
    position: absolute;
    inset: 1px;
    background: #05090b;
    clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
    transition: background-color .16s ease;
}

.vcg-checkbox .vcg-checkbox__mark::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 3px;
    left: 7px;
    width: 4px;
    height: 8px;
    border: solid #f5f7f8;
    border-width: 0 2px 2px 0;
    opacity: 0;
    transform: rotate(45deg) scale(.65);
    transition: opacity .16s ease, transform .16s ease;
}

.vcg-checkbox:hover .vcg-checkbox__mark {
    background: #ef202a;
    filter: drop-shadow(0 0 5px rgba(224, 0, 0, .38));
}

.vcg-checkbox__input:checked + .vcg-checkbox__mark {
    background: #ff1b25;
    filter: drop-shadow(0 0 7px rgba(224, 0, 0, .48));
}

.vcg-checkbox__input:checked + .vcg-checkbox__mark::before {
    background: linear-gradient(145deg, #7e1017, #36070a);
}

.vcg-checkbox__input:checked + .vcg-checkbox__mark::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.vcg-checkbox__input:focus-visible + .vcg-checkbox__mark {
    outline: 2px solid #f1b94a;
    outline-offset: 3px;
}

.vcg-checkbox__input:disabled ~ .vcg-checkbox__mark,
.vcg-checkbox__input:disabled ~ .vcg-checkbox__label {
    cursor: not-allowed;
    opacity: .45;
}

.profile-overlay-switch.vcg-checkbox {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
}

.member-wishlist-form-error,
.member-wishlist-status {
    margin: 0;
    padding: 8px 18px 11px;
    color: #ff767c;
    font-size: 11px;
}

.member-wishlist-status {
    margin-top: 8px;
    padding: 8px 12px;
    border-left: 2px solid #4ed982;
    background: rgba(78, 217, 130, .06);
    color: #80e8a6;
}

.member-wishlist-list-index {
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 15px;
}

.member-wishlist-index-group {
    display: grid;
    align-content: start;
}

.member-wishlist-index-group + .member-wishlist-index-group {
    padding-top: 14px;
    border-top: 1px solid rgba(151, 162, 168, .18);
}

.member-wishlist-index-group h2 {
    margin: 0 0 8px;
    color: #e5e9eb;
    font-family: var(--font-tech, sans-serif);
    font-size: 14px;
    text-transform: uppercase;
}

.member-wishlist-index-group > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 8px;
    border-top: 1px solid rgba(139, 150, 157, .16);
    color: inherit;
    text-decoration: none;
}

.member-wishlist-index-group > a:hover {
    background: rgba(224, 0, 0, .08);
}

.member-wishlist-index-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    border-top: 1px solid rgba(139, 150, 157, .16);
}

.member-wishlist-index-entry > a {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 8px;
    color: inherit;
    text-decoration: none;
}

.member-wishlist-index-entry > a:hover {
    background: rgba(224, 0, 0, .08);
}

.member-wishlist-index-entry > a span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.member-wishlist-index-entry form {
    display: flex;
    align-items: center;
    padding-left: 6px;
}

.member-wishlist-index-entry button {
    min-height: 32px;
    padding: 6px 8px;
    border: 1px solid rgba(224, 0, 0, .48);
    background: rgba(224, 0, 0, .06);
    color: #b9c1c5;
    font-family: var(--font-tech, sans-serif);
    font-size: 9px;
    text-transform: uppercase;
    cursor: pointer;
}

.member-wishlist-index-entry button:hover {
    border-color: #e00000;
    color: #fff;
}

.member-wishlist-index-group > a span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.member-wishlist-index-group strong {
    overflow: hidden;
    color: #d9dfe1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-wishlist-index-group small,
.member-wishlist-index-group > p {
    color: #78838a;
}

.member-wishlist-index-group > p {
    margin: 4px 0 0;
    font-size: 11px;
}

.member-wishlist-index-group b {
    color: #d6ae4e;
}

.member-wishlist-table-wrap {
    overflow: hidden;
}

.member-wishlist-table-scroll {
    width: 100%;
    overflow-x: auto;
}

@media (max-width: 900px) {
    .member-wishlist-create-panel > form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .member-wishlist-create-panel > summary {
        grid-template-columns: 30px 1fr;
    }

    .member-wishlist-create-panel > summary small {
        grid-column: 2;
    }

    .member-wishlist-create-panel > form {
        grid-template-columns: 1fr;
    }

    .member-wishlist-public-toggle {
        padding-inline: 0;
    }
}

/* profile-palette-v1
 * Keep profile editing interactions in the shared red, graphite and gold palette. */
.profile-workspace :is(input, select, textarea):focus,
.profile-workspace :is(input, select, textarea):focus-visible {
    border-color: #e00000;
    box-shadow: 0 0 0 2px rgba(224, 0, 0, .20);
    outline: 0;
}

.profile-workspace button:hover,
.profile-workspace button:focus-visible {
    border-color: #ff313b;
    color: #fff;
    box-shadow: 0 0 14px rgba(224, 0, 0, .18);
}

/* wishlist-detail-page-v1
 * Wunschlisten are edited on a dedicated workspace instead of inside profiles. */
.member-wishlist-detail-page .member-directory-heading h1 {
    overflow-wrap: anywhere;
}

.member-wishlist-editor-surface,
.member-wishlist-public-detail {
    margin-top: 12px;
}

.member-wishlist-editor-surface {
    padding: 16px;
}

.member-wishlist-detail-page .profile-wishlist-detail > header {
    grid-template-columns: minmax(0, 1fr);
}

.member-wishlist-detail-page .profile-wishlist-actions {
    justify-content: flex-end;
}

.member-wishlist-detail-page .profile-wishlist-actions button {
    white-space: normal;
}

.member-wishlist-editor-index-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
    padding: 0 8px 7px;
    border-bottom: 1px solid rgba(151, 162, 168, .22);
    color: #8f999e;
    font-family: var(--font-tech, sans-serif);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.member-wishlist-editor-index-heading b {
    color: #d6ae4e;
}

.profile-wishlist-index > .member-wishlist-new-link {
    margin-top: 7px;
    border-color: rgba(224, 0, 0, .42);
}

.profile-wishlist-index > .member-wishlist-new-link:hover {
    border-color: #e00000;
    background: rgba(224, 0, 0, .08);
}

.member-wishlist-detail-page :is(input, select, textarea):focus,
.member-wishlist-detail-page :is(input, select, textarea):focus-visible {
    border-color: #e00000;
    box-shadow: 0 0 0 2px rgba(224, 0, 0, .20);
    outline: 0;
}

.member-wishlist-public-detail {
    padding: 17px 18px;
}

.member-wishlist-public-description {
    margin: 0 0 12px;
    color: #9ca6ab;
    line-height: 1.5;
}

.member-wishlist-copy-action {
    gap: 8px;
}

.member-wishlist-copy-action form {
    display: flex;
}

@media (max-width: 900px) {
    .member-wishlist-editor-surface {
        padding: 12px;
    }

    .member-wishlist-detail-page .profile-wishlist-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .member-wishlist-detail-page .profile-wishlist-actions form,
    .member-wishlist-detail-page .profile-wishlist-actions button {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .member-wishlist-detail-page .profile-wishlist-actions {
        grid-template-columns: 1fr;
    }
}