html,
body {
    min-height: 100%;
    margin: 0;
    background: #eef2f3;
    color: #1f2a25;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a,
.btn-link {
    color: #1e7b5b;
}

h1:focus {
    outline: none;
}

.btn {
    border-radius: 7px;
    font-weight: 700;
}

.btn-primary {
    color: #ffffff;
    background-color: #1e8a63;
    border-color: #1e8a63;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #176d50;
    border-color: #176d50;
}

.btn-success {
    background-color: #287d3c;
    border-color: #287d3c;
}

.btn-outline-light {
    color: #f8fbfa;
    border-color: rgba(248, 251, 250, 0.42);
}

.btn-outline-secondary {
    color: #4e5b55;
    border-color: #cbd5d1;
}

.btn-outline-danger {
    color: #a43d3d;
    border-color: #e0b8b8;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #1e8a63;
    box-shadow: 0 0 0 0.18rem rgba(30, 138, 99, 0.18);
}

.form-control,
.form-select {
    border-color: #cfd8d4;
    border-radius: 7px;
}

.content {
    padding-top: 0;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #287d3c;
}

.invalid {
    outline: 1px solid #b04444;
}

.validation-message {
    color: #b04444;
}

.blazor-error-boundary {
    background: #b04444;
    color: #ffffff;
    padding: 1rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
    border-color: #6f7b76;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}

.auth-card {
    width: min(100%, 420px);
    padding: 1.35rem;
    border: 1px solid #dce4e0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(30, 44, 37, 0.08);
}

.auth-brand {
    margin-bottom: 1.25rem;
}

.auth-brand h1 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.2;
}

.auth-brand p {
    margin: 0.15rem 0 0;
    color: #66736d;
    font-size: 0.86rem;
    font-weight: 700;
}

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

.auth-secondary-link {
    margin-top: 1rem;
    color: #66736d;
    font-size: 0.82rem;
    font-weight: 800;
    text-align: center;
}

.auth-secondary-link a {
    color: #176d50;
    text-decoration: none;
}

.auth-secondary-link a:hover,
.auth-secondary-link a:focus {
    text-decoration: underline;
}

.account-manage-page {
    height: calc(100vh - 2rem);
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.account-manage-header {
    flex: 0 0 auto;
    margin-bottom: 0;
}

.account-manage-content {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
}

.account-settings-page {
    display: grid;
    gap: 0.75rem;
    max-width: 640px;
    padding: 0;
}

.account-access-card,
.account-password-card {
    display: grid;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid #dfe7e3;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(36, 49, 44, 0.05);
}

.account-access-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid #dfe7e3;
    border-radius: 8px;
    background: #f8faf9;
}

.account-access-row span {
    color: #66736d;
    font-size: 0.76rem;
    font-weight: 850;
}

.account-access-row strong {
    color: #1f2a25;
    font-size: 0.88rem;
    font-weight: 850;
    text-align: right;
}

.account-password-title {
    min-width: 0;
    display: grid;
    gap: 0.1rem;
}

.account-password-title h2 {
    margin: 0;
    color: #1f2a25;
    font-size: 1.05rem;
    line-height: 1.15;
}

.account-password-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.account-form-field {
    min-width: 0;
    display: grid;
    gap: 0.28rem;
    color: #596761;
    font-size: 0.76rem;
    font-weight: 850;
}

.account-form-field > span {
    line-height: 1.15;
}

.account-form-field .form-control {
    min-height: 2.35rem;
    font-size: 0.86rem;
}

.account-submit-button {
    justify-self: end;
}

.account-redeem-field {
    min-width: 0;
    display: grid;
    gap: 0.28rem;
    color: #596761;
    font-size: 0.76rem;
    font-weight: 850;
}

.account-redeem-field > label {
    margin: 0;
    line-height: 1.15;
}

.account-redeem-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.35rem;
    gap: 0.55rem;
    align-items: stretch;
}

.account-redeem-control .form-control {
    min-width: 0;
    height: 2.35rem;
    min-height: 2.35rem;
    font-size: 0.86rem;
}

.account-redeem-button {
    width: 2.35rem;
    height: 2.35rem;
    min-height: 2.35rem;
}

.account-key-history {
    display: grid;
    gap: 0.55rem;
    padding-top: 0.7rem;
    border-top: 1px solid #e4ebe8;
}

.account-key-history h3 {
    margin: 0;
    color: #1f2a25;
    font-size: 0.9rem;
    line-height: 1.15;
}

.access-key-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
}

.access-key-code {
    display: inline-block;
    padding: 0.18rem 0.36rem;
    border: 1px solid #d9e4df;
    border-radius: 6px;
    background: #f5f8f6;
    color: #1f2a25;
    font-size: 0.8rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.redeemed-key-list,
.user-key-list {
    display: grid;
    gap: 0.45rem;
}

.redeemed-key-row,
.user-key-row {
    display: grid;
    grid-template-columns: minmax(8.5rem, auto) minmax(0, 1fr) auto auto;
    gap: 0.55rem;
    align-items: center;
    padding: 0.5rem 0.6rem;
    border: 1px solid #dfe7e3;
    border-radius: 8px;
    background: #f8faf9;
}

.redeemed-key-row span,
.user-key-row span {
    min-width: 0;
    overflow: hidden;
    color: #66736d;
    font-size: 0.78rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.redeemed-key-row strong,
.user-key-row strong {
    color: #1f2a25;
    font-size: 0.78rem;
    font-weight: 850;
    text-align: right;
    white-space: nowrap;
}

.page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 58px;
    margin-bottom: 0.75rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #d8e0dc;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(36, 49, 44, 0.05);
}

.page-header-title {
    min-width: 0;
    display: grid;
    gap: 0.05rem;
}

.page-header-title strong {
    color: #1f2a25;
    font-size: 1rem;
    line-height: 1.1;
}

.page-header-title h1 {
    margin: 0;
    color: #1f2a25;
    font-size: 1rem;
    line-height: 1.1;
}

.page-header-link {
    min-width: 0;
    max-width: min(680px, 55vw);
    overflow: hidden;
    color: #65716c;
    font-size: 0.78rem;
    font-weight: 700;
    text-overflow: ellipsis;
    text-decoration: none;
    white-space: nowrap;
}

.page-header-link:hover,
.page-header-link:focus {
    color: #1e8a63;
    text-decoration: none;
}

.map-page-header .page-header-title {
    gap: 0.1rem;
}

.map-page-header .page-header-title h1 {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.12;
}

.map-page-header {
    position: relative;
    z-index: 1300;
    overflow: visible;
}

.map-header-url {
    min-width: 0;
    max-width: min(760px, 58vw);
    overflow: hidden;
    color: #66736d;
    font-size: 0.84rem;
    font-weight: 700;
    text-overflow: ellipsis;
    text-decoration: none;
    white-space: nowrap;
}

.map-header-url:hover,
.map-header-url:focus {
    color: #66736d;
    text-decoration: none;
}

.page-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
}

.page-header-metrics {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0.45rem;
}

.page-header-metric {
    min-width: 4.4rem;
    flex: 0 0 auto;
    display: grid;
    gap: 0.05rem;
    padding: 0.38rem 0.55rem;
    border: 1px solid #dce4e0;
    border-radius: 8px;
    background: #f6f8f7;
}

.page-header-metric-anchor {
    position: relative;
    flex: 0 0 auto;
}

.page-header-metric-button {
    width: 100%;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.page-header-metric-button:hover,
.page-header-metric-button:focus-visible,
.tick-help-anchor:hover .page-header-metric-button,
.tick-help-anchor:focus-within .page-header-metric-button {
    border-color: #9fcfba;
    background: #eff8f3;
    outline: none;
}

.page-header-metric strong {
    color: #1f2a25;
    font-size: 0.98rem;
    line-height: 1;
}

.page-header-metric span {
    color: #66736d;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
}

.map-page {
    min-height: 0;
    display: grid;
    gap: 0.75rem;
}

.map-page > .page-header {
    margin-bottom: 0;
}

.monitor-shell {
    height: calc(100vh - 98px);
    min-height: 520px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: stretch;
    gap: 0.75rem;
}

.map-workspace {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0.65rem;
    padding: 0.7rem;
    border: 1px solid #d8e0dc;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(36, 49, 44, 0.06);
}

.button-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.toggle-control {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #41504a;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.toggle-control input {
    accent-color: #1e8a63;
}

.map-stage {
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #202422;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        #1b201d;
    background-size: 44px 44px;
}

.map-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.map-frame {
    background: #151917;
}

.map-track-window {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.18rem;
    min-height: 2.98rem;
    padding: 0 0.05rem 0.24rem;
}

.map-track-window-header {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    color: #66736d;
    font-size: 0.7rem;
    font-weight: 850;
    line-height: 1;
}

.map-track-window-header strong {
    min-width: 0;
    overflow: hidden;
    color: #1f2a25;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-track-window-header-actions {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.map-heatmap-toggle {
    width: 1.55rem;
    height: 1.55rem;
    flex: 0 0 auto;
}

.map-heatmap-menu-host {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.map-heatmap-dismiss-layer {
    position: fixed;
    z-index: 1070;
    inset: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
}

.map-heatmap-popover {
    position: absolute;
    z-index: 1080;
    right: 0;
    bottom: calc(100% + 0.52rem);
    width: min(19.5rem, calc(100vw - 1.2rem));
    max-width: calc(100vw - 1.2rem);
    box-sizing: border-box;
    display: grid;
    gap: 0.42rem;
    padding: 0.58rem;
    border: 1px solid rgba(31, 42, 37, 0.14);
    border-radius: 8px;
    color: #24322c;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(31, 42, 37, 0.22);
    overflow: visible;
}

.map-heatmap-popover::before,
.map-heatmap-popover::after {
    content: "";
    display: var(--heatmap-popover-arrow-display, block);
    position: absolute;
    left: var(--heatmap-popover-arrow-left, calc(100% - 0.82rem));
    width: 0;
    height: 0;
    border-right: 0.48rem solid transparent;
    border-left: 0.48rem solid transparent;
    pointer-events: none;
    transform: translateX(-50%);
}

.map-heatmap-popover::before {
    top: var(--heatmap-popover-arrow-outer-top, auto);
    bottom: var(--heatmap-popover-arrow-outer-bottom, -0.48rem);
    border-top: var(--heatmap-popover-arrow-outer-border-top, 0.48rem solid rgba(31, 42, 37, 0.14));
    border-bottom: var(--heatmap-popover-arrow-outer-border-bottom, 0);
}

.map-heatmap-popover::after {
    top: var(--heatmap-popover-arrow-inner-top, auto);
    bottom: var(--heatmap-popover-arrow-inner-bottom, -0.39rem);
    border-right-width: 0.39rem;
    border-left-width: 0.39rem;
    border-top: var(--heatmap-popover-arrow-inner-border-top, 0.39rem solid #ffffff);
    border-bottom: var(--heatmap-popover-arrow-inner-border-bottom, 0);
}

.map-heatmap-popover-header {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.map-heatmap-popover-header strong {
    color: #1f2a25;
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1.1;
    text-align: left;
}

.map-heatmap-popover-header span {
    overflow: hidden;
    color: #66736d;
    font-size: 0.62rem;
    font-weight: 850;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-heatmap-progress-popover {
    width: min(12.5rem, calc(100vw - 1.2rem));
    max-height: none;
    gap: 0.46rem;
    overflow: visible;
}

.map-heatmap-progress-popover .map-heatmap-popover-header strong {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.map-heatmap-progress-bar {
    position: relative;
    height: 0.42rem;
    overflow: hidden;
    border-radius: 999px;
    background: #dce7e2;
}

.map-heatmap-progress-bar span {
    position: absolute;
    inset: 0 auto 0 0;
    min-width: 0.18rem;
    max-width: 100%;
    border-radius: inherit;
    background: #1e8a63;
    transition: width 160ms ease;
}

.map-heatmap-option,
.map-heatmap-primary,
.map-heatmap-secondary {
    min-height: 1.9rem;
    border: 1px solid #d8e0dc;
    border-radius: 7px;
    font-weight: 900;
}

.map-heatmap-option {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0 0.52rem;
    color: #35433c;
    background: #ffffff;
    font-size: 0.72rem;
    text-align: left;
}

.map-heatmap-option .action-icon {
    width: 0.95rem;
    height: 0.95rem;
}

.map-heatmap-option:hover,
.map-heatmap-option:focus-visible {
    border-color: #1e8a63;
    background: #f1faf6;
}

.map-heatmap-option.is-active {
    border-color: #1e8a63;
    color: #0f6a4a;
    background: #e3f4ec;
}

.map-heatmap-range-picker {
    display: grid;
    gap: 0.36rem;
    padding: 0.48rem;
    border: 1px solid #d8e0dc;
    border-radius: 7px;
    background: #f8fbfa;
}

.map-heatmap-range-picker.is-active {
    border-color: #1e8a63;
    background: #eef8f3;
}

.map-heatmap-range-title {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    color: #35433c;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
}

.map-heatmap-range-title .action-icon {
    width: 0.9rem;
    height: 0.9rem;
}

.map-heatmap-field {
    min-width: 0;
    display: grid;
    gap: 0.15rem;
    color: #66736d;
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1;
}

.map-heatmap-field .form-control {
    min-height: 1.85rem;
    padding: 0.28rem 0.42rem;
    font-size: 0.68rem;
    font-weight: 800;
}

.map-heatmap-error {
    margin: 0;
    color: #a13a2b;
    font-size: 0.66rem;
    font-weight: 850;
    line-height: 1.2;
}

.map-heatmap-primary,
.map-heatmap-secondary {
    width: 100%;
    padding: 0 0.55rem;
    font-size: 0.72rem;
}

.map-heatmap-primary {
    color: #ffffff;
    border-color: #1e8a63;
    background: #1e8a63;
}

.map-heatmap-primary:hover,
.map-heatmap-primary:focus-visible {
    background: #166e4e;
}

.map-heatmap-secondary {
    color: #35433c;
    background: #ffffff;
}

.map-heatmap-secondary:hover,
.map-heatmap-secondary:focus-visible {
    border-color: #a13a2b;
    color: #8a2d21;
    background: #fff7f5;
}

.map-track-range-control {
    position: relative;
    height: 1.16rem;
    display: grid;
    align-items: center;
}

.map-track-range-control::before,
.map-track-range-fill {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 0.32rem;
    border-radius: 999px;
}

.map-track-range-control::before {
    background: #cfdbd5;
}

.map-track-range-fill {
    left: var(--track-range-left, 0%);
    right: calc(100% - var(--track-range-right, 25%));
    background: #1e8a63;
}

.map-track-window-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 1.16rem;
    margin: 0;
    appearance: none;
    background: transparent;
    pointer-events: none;
}

.map-track-window-slider::-webkit-slider-runnable-track {
    height: 0.32rem;
    background: transparent;
}

.map-track-window-slider::-webkit-slider-thumb {
    width: 0.96rem;
    height: 0.96rem;
    margin-top: -0.32rem;
    appearance: none;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #1e8a63;
    box-shadow: 0 1px 4px rgba(31, 42, 37, 0.28);
    pointer-events: auto;
}

.map-track-window-slider::-moz-range-track {
    height: 0.32rem;
    background: transparent;
}

.map-track-window-slider::-moz-range-thumb {
    width: 0.86rem;
    height: 0.86rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #1e8a63;
    box-shadow: 0 1px 4px rgba(31, 42, 37, 0.28);
    pointer-events: auto;
}

.map-track-window-slider-to {
    z-index: 2;
}

.map-track-window-slider-from {
    z-index: 3;
}

.map-track-window-slider:focus-visible::-webkit-slider-thumb {
    outline: 2px solid rgba(30, 138, 99, 0.34);
    outline-offset: 2px;
}

.map-track-window-slider:focus-visible::-moz-range-thumb {
    outline: 2px solid rgba(30, 138, 99, 0.34);
    outline-offset: 2px;
}

.map-track-bound-tooltip {
    position: absolute;
    z-index: 1080;
    bottom: calc(100% + 0.42rem);
    width: max-content;
    max-width: min(10rem, calc(100vw - 1.5rem));
    display: grid;
    gap: 0.08rem;
    padding: 0.48rem 0.58rem;
    border: 1px solid rgba(31, 42, 37, 0.14);
    border-radius: 7px;
    color: #f8fbfa;
    background: rgba(31, 42, 37, 0.96);
    box-shadow: 0 14px 34px rgba(31, 42, 37, 0.22);
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 0.25rem);
    transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

.map-track-bound-tooltip-to {
    left: var(--track-range-to-position, 0%);
}

.map-track-bound-tooltip-from {
    left: var(--track-range-from-position, 25%);
}

.map-track-bound-tooltip span {
    color: #b8c8c0;
    font-size: 0.62rem;
    line-height: 1;
    text-transform: uppercase;
}

.map-track-bound-tooltip strong {
    color: #ffffff;
    font-size: 0.75rem;
    line-height: 1.05;
}

.map-track-bound-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0.55rem;
    height: 0.55rem;
    background: rgba(31, 42, 37, 0.96);
    transform: translate(-50%, -50%) rotate(45deg);
}

.map-track-range-control:hover .map-track-bound-tooltip,
.map-track-range-control:focus-within .map-track-bound-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.map-event-tooltip {
    position: fixed;
    z-index: 1080;
    width: max-content;
    max-width: min(20rem, calc(100vw - 1.5rem));
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(31, 42, 37, 0.14);
    border-radius: 7px;
    color: #f8fbfa;
    background: rgba(31, 42, 37, 0.96);
    box-shadow: 0 14px 34px rgba(31, 42, 37, 0.22);
    pointer-events: none;
}

.map-event-tooltip[hidden] {
    display: none;
}

.map-event-tooltip-title {
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 900;
    line-height: 1.25;
}

.map-event-tooltip-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.45rem;
    margin-top: 0.24rem;
    color: #dce8e4;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
}

.map-event-tooltip-key {
    color: #9ee6b7;
    font-weight: 900;
}

.empty-map-state,
.map-unavailable-state {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    color: #dbe5e1;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 800;
}

.map-unavailable-state {
    background: rgba(20, 24, 22, 0.72);
}

.map-unavailable-content {
    display: grid;
    gap: 0.35rem;
    max-width: 28rem;
}

.map-unavailable-content strong {
    color: #fee2e2;
    font-size: 1.05rem;
    font-weight: 900;
}

.map-unavailable-content span {
    color: #d7e3df;
    font-size: 0.9rem;
    line-height: 1.35;
}

.monitor-panel {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1.05fr) minmax(0, 0.8fr) minmax(0, 1fr);
    align-content: stretch;
    gap: 0.65rem;
}

.panel-section,
.admin-panel {
    min-height: 0;
    padding: 0.75rem;
    border: 1px solid #d8e0dc;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(36, 49, 44, 0.05);
}

.players-panel,
.zones-panel,
.map-events-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.players-panel > .scroll-list,
.zones-panel > .scroll-list,
.map-events-panel > .scroll-list {
    flex: 1;
    min-height: 0;
    height: 100%;
    max-height: none;
}

.relationship-type-close-pair {
    --relationship-type-color: #11845b;
    --relationship-type-bg: #e8f7ef;
}

.relationship-type-repeated-copresence {
    --relationship-type-color: #0f9f8e;
    --relationship-type-bg: #e8fbf7;
}

.relationship-type-all {
    --relationship-type-color: #1f2a25;
    --relationship-type-bg: #f7faf8;
}

.relationship-type-single-meetup {
    --relationship-type-color: #d97706;
    --relationship-type-bg: #fff6e6;
}

.relationship-type-zone-overlap {
    --relationship-type-color: #8b5cf6;
    --relationship-type-bg: #f3efff;
}

.relationship-type-chat-contact {
    --relationship-type-color: #db2777;
    --relationship-type-bg: #fff0f7;
}

.relationship-type-same-route {
    --relationship-type-color: #475569;
    --relationship-type-bg: #f1f5f9;
}

.relationship-type-weak-proximity,
.relationship-type-weak-signal {
    --relationship-type-color: #66736d;
    --relationship-type-bg: #f4f7f5;
}

.relationship-type-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 1.25rem;
    gap: 0.28rem;
    padding: 0 0.42rem;
    border: 1px solid color-mix(in srgb, var(--relationship-type-color) 42%, white);
    border-radius: 999px;
    color: var(--relationship-type-color);
    background: var(--relationship-type-bg);
    font-size: 0.66rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.editor-panel {
    display: grid;
    gap: 0.55rem;
}

.zone-editor-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.zone-editor-button {
    width: 100%;
    min-height: 2.4rem;
    font-weight: 900;
}

.zone-editor-primary {
    min-height: 2.75rem;
}

.zone-editor-card {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
    padding: 0.55rem;
    border: 1px solid #d8e0dc;
    border-radius: 8px;
    background: #f9fbfa;
}

.panel-section h2,
.admin-panel h1,
.admin-panel h2 {
    margin: 0 0 0.75rem;
    color: #1f2a25;
    font-size: 0.96rem;
    line-height: 1.2;
}

.panel-header,
.modal-titlebar {
    display: flex;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}

.panel-header {
    align-items: center;
}

.panel-header-note {
    color: #66736d;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.modal-titlebar {
    align-items: flex-start;
}

.modal-titlebar > :first-child {
    min-width: 0;
}

.panel-header-actions {
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.panel-header-actions > .icon-button,
.panel-header-actions > label {
    align-self: center;
}

.action-icon {
    width: 1.08rem;
    height: 1.08rem;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-button {
    width: 2rem;
    height: 2rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid #d7e0dc;
    border-radius: 7px;
    background: #ffffff;
    color: #52615a;
    line-height: 1;
}

.icon-button:hover,
.icon-button:focus-visible {
    border-color: #1e8a63;
    color: #176d50;
    background: #eff8f3;
}

.icon-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.icon-button.is-active {
    border-color: #9fcfba;
    color: #176d50;
    background: #e8f6ee;
}

.icon-button.is-active .action-icon {
    stroke-width: 2.25;
}

.icon-button.is-primary {
    border-color: #9fcfba;
    color: #176d50;
    background: #e8f6ee;
}

.icon-button.is-primary:hover,
.icon-button.is-primary:focus-visible {
    border-color: #1e8a63;
    color: #0f5138;
    background: #dcf2e6;
}

.icon-button.is-danger {
    border-color: #f0c0bb;
    color: #b42318;
    background: #fff8f7;
}

.icon-button.is-danger:hover,
.icon-button.is-danger:focus-visible {
    border-color: #d92d20;
    color: #8f1d14;
    background: #fff1ef;
}

.panel-header h2,
.modal-titlebar h2 {
    margin: 0;
}

.panel-search,
.modal-search {
    margin-bottom: 0.55rem;
}

.search-help-anchor {
    position: relative;
    min-width: 0;
    margin-bottom: 0.55rem;
}

.search-help-anchor > .panel-search,
.search-help-anchor > .modal-search,
.search-help-anchor > .map-events-command-input {
    margin-bottom: 0;
}

.search-help-tooltip {
    position: fixed;
    right: 1rem;
    top: 7rem;
    z-index: 90;
    width: min(25rem, 88vw);
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    padding: 0.68rem 0.72rem;
    display: grid;
    gap: 0.42rem;
    overflow: auto;
    color: #f7fbf9;
    background: rgba(24, 31, 28, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    box-shadow: 0 1rem 2.4rem rgba(16, 24, 20, 0.28);
    opacity: 0;
    transform: var(--search-help-hidden-transform, translateY(-0.18rem));
    pointer-events: none;
    visibility: hidden;
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.search-help-tooltip::before {
    content: none;
}

.search-help-anchor:hover .search-help-tooltip,
.search-help-anchor:focus-within .search-help-tooltip {
    opacity: 1;
    transform: var(--search-help-visible-transform, translateY(0));
    visibility: visible;
}

.search-help-tooltip strong {
    font-size: 0.78rem;
    letter-spacing: 0;
}

.search-help-tooltip span {
    color: #cfdbd6;
    font-size: 0.72rem;
    line-height: 1.35;
}

.search-help-grid {
    display: grid;
    grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
    gap: 0.28rem 0.55rem;
    align-items: start;
}

.search-help-grid code {
    min-width: 0;
    padding: 0.14rem 0.32rem;
    overflow-wrap: anywhere;
    color: #dff7ea;
    background: rgba(98, 171, 128, 0.18);
    border: 1px solid rgba(150, 217, 178, 0.18);
    border-radius: 0.32rem;
    font-size: 0.68rem;
    line-height: 1.35;
}

.search-help-note {
    padding-top: 0.1rem;
    color: #aac2b8 !important;
}

.search-help-tooltip-wide {
    width: min(30rem, 88vw);
}

.map-events-panel .search-help-tooltip {
    top: auto;
    bottom: 1rem;
}

.player-catalog-modal .search-help-tooltip {
    --search-help-hidden-transform: translate(-50%, -0.18rem);
    --search-help-visible-transform: translate(-50%, 0);
    left: 50%;
    right: auto;
    top: 4.75rem;
    width: min(25rem, calc(100vw - 2rem));
}

.tick-help-anchor {
    z-index: 1301;
    margin-bottom: 0;
    isolation: auto;
}

.tick-help-anchor:hover,
.tick-help-anchor:focus-within {
    z-index: 1400;
}

.tick-help-anchor .tick-popover {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    z-index: 1400;
    width: min(25rem, calc(100vw - 2rem));
    max-height: min(70vh, 32rem);
    pointer-events: auto;
}

.tick-popover-lines {
    display: grid;
    gap: 0.28rem;
}

.tick-popover-lines span {
    overflow-wrap: anywhere;
}

.admin-panel h1 {
    font-size: 1.28rem;
}

.editor-panel {
    background: #f9fbfa;
}

.field-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0.75fr auto;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.field-grid label,
.admin-form-grid label {
    display: grid;
    gap: 0.25rem;
    color: #596761;
    font-size: 0.77rem;
    font-weight: 800;
}

.form-control-color {
    width: 3rem;
}

.draft-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.6rem;
    color: #66736d;
    font-size: 0.78rem;
    font-weight: 700;
}

.scroll-list {
    display: grid;
    gap: 0.45rem;
    align-content: start;
    grid-auto-rows: max-content;
    max-height: 100%;
    overflow: auto;
    padding-right: 0.1rem;
}

.list-row,
.player-row,
.zone-row,
.visit-row {
    width: 100%;
    border: 1px solid #e0e7e4;
    border-radius: 8px;
    background: #ffffff;
}

.list-row {
    display: grid;
    gap: 0.12rem;
    padding: 0.55rem 0.65rem;
    text-align: left;
}

.player-row {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) auto auto auto;
    align-items: center;
    column-gap: 0.34rem;
    overflow: hidden;
    padding: 0.32rem 0.42rem 0.32rem 0.36rem;
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.player-row.is-selected {
    border-color: #1e8a63;
    box-shadow: inset 3px 0 0 #1e8a63;
}

.player-row.is-online {
    border-color: #bce5cc;
    background: #effaf4;
}

.player-row.is-online.is-selected {
    border-color: #1e8a63;
    background: #e2f6eb;
}

.player-row.is-afk,
.player-row.is-online.is-afk {
    border-color: #f1d06b;
    background: #fff8df;
}

.player-row.is-afk.is-selected,
.player-row.is-online.is-afk.is-selected {
    border-color: #d49b13;
    background: #fff0b8;
    box-shadow: inset 3px 0 0 #d49b13;
}

.player-row.is-favorite {
    border-color: #e0ad2f;
    box-shadow: inset 3px 0 0 #e0ad2f;
}

.player-row.is-favorite.is-selected {
    border-color: #1e8a63;
    box-shadow: inset 3px 0 0 #e0ad2f, 0 0 0 1px rgba(30, 138, 99, 0.18);
}

.player-row.is-world {
    border-color: #c4b5fd;
    background: #f5f3ff;
    box-shadow: inset 3px 0 0 #7c3aed;
}

.player-row.is-world.is-selected {
    border-color: #7c3aed;
    background: #ede9fe;
    box-shadow: inset 3px 0 0 #7c3aed, 0 0 0 1px rgba(124, 58, 237, 0.2);
}

.player-row.is-world .player-main:hover,
.player-row.is-world .player-main:focus-visible {
    background: rgba(124, 58, 237, 0.1);
}

.player-state-dot {
    width: 0.58rem;
    height: 0.58rem;
    display: inline-block;
    justify-self: center;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(102, 115, 109, 0.08);
}

.player-state-dot.is-online {
    background: #2f9e44;
}

.player-state-dot.is-afk {
    background: #f59f00;
}

.player-state-dot.is-offline {
    background: #9aa6a0;
}

.player-main {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
    padding: 0.22rem 0.25rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    text-align: left;
}

.player-main:hover,
.player-main:focus-visible {
    background: rgba(30, 138, 99, 0.08);
}

.player-row.is-favorite .player-main:hover,
.player-row.is-favorite .player-main:focus-visible {
    background: rgba(224, 173, 47, 0.1);
}

.player-name-line {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.26rem;
}

.player-name-line strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-main .player-favorite-crown {
    width: 1.05rem;
    height: 1.05rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: #d49b13;
}

.player-main .player-favorite-crown .action-icon {
    width: 1rem;
    height: 1rem;
    fill: #ffe08a;
    stroke: #a66b00;
    stroke-width: 1.9;
}

.player-path-color {
    width: 2rem;
    height: 2rem;
    display: block;
    padding: 0.16rem;
    border: 1px solid #d8e0dc;
    border-radius: 6px;
    background: #ffffff;
}

.player-detail-color {
    width: 2rem;
    height: 2rem;
    display: inline-grid;
    place-items: center;
    margin: 0;
}

.player-action {
    width: 2rem;
    height: 2rem;
}

.favorite-detail-toggle.is-active {
    border-color: #e0ad2f;
    color: #b77900;
    background: #fff8e5;
}

.favorite-detail-toggle.is-active .action-icon {
    fill: currentColor;
}

.list-row:hover,
.player-row:hover {
    border-color: #1e8a63;
}

.list-row strong,
.player-main strong,
.zone-row strong,
.visit-row strong {
    color: #202a25;
    font-size: 0.86rem;
}

.list-row span,
.player-main span,
.zone-row span,
.visit-row span,
.visit-row time {
    color: #66736d;
    font-size: 0.76rem;
}

.zone-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
    padding: 0.48rem;
    border-radius: 7px;
}

.zone-row:hover,
.zone-row:focus-within,
.zone-row.is-highlighted {
    background: #f5faf7;
}

.zone-row > div {
    min-width: 0;
    display: grid;
}

.zone-swatch {
    width: 0.85rem;
    height: 0.85rem;
    border: 1px solid rgba(31, 42, 37, 0.25);
    border-radius: 50%;
}

.map-events-controls {
    margin-bottom: 0.45rem;
}

.map-events-controls .search-help-anchor {
    margin-bottom: 0;
}

.map-events-command-input {
    min-width: 0;
    font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
    font-size: 0.75rem;
}

.map-events-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
    color: #66736d;
    font-size: 0.72rem;
    font-weight: 800;
}

.map-events-list {
    gap: 0.4rem;
}

.map-event-row {
    padding: 0.42rem 0.5rem;
}

.map-events-pagination {
    flex: 0 0 auto;
    margin-top: 0.45rem;
}

.visit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.12rem 0.5rem;
    padding: 0.5rem 0.6rem;
}

.visit-row span {
    grid-column: 1;
}

.visit-row time {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    white-space: nowrap;
}

.empty-state,
.admin-panel .muted {
    margin: 0;
    color: #66736d;
    font-size: 0.84rem;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: 0 0.45rem;
    border: 1px solid #d8e0dc;
    border-radius: 999px;
    color: #66736d;
    background: #f6f8f7;
    font-size: 0.7rem;
    font-weight: 800;
}

.status-pill.is-online {
    color: #176d50;
    border-color: #b8d8ca;
    background: #edf7f2;
}

.monitor-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(21, 28, 25, 0.42);
}

.monitor-modal-backdrop.is-stacked {
    z-index: 1060;
}

.monitor-modal {
    width: min(100%, 620px);
    max-height: min(82vh, 720px);
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem;
    overflow: hidden;
    border: 1px solid #d8e0dc;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 80px rgba(14, 22, 18, 0.22);
}

.player-catalog-modal {
    width: min(100%, 760px);
    max-height: min(88vh, 760px);
    grid-template-rows: auto auto minmax(0, 1fr);
}

.baritone-scan-modal {
    width: min(calc(100vw - 2rem), 820px);
    max-height: min(88vh, 780px);
    grid-template-rows: auto auto minmax(0, 1fr);
}

.player-details-modal {
    width: min(calc(100vw - 2rem), 1280px);
    height: min(calc(100vh - 2rem), 900px);
    max-height: none;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: stretch;
    overflow: hidden;
}

.player-details-modal > .modal-titlebar,
.player-details-modal > .player-summary-grid,
.player-details-modal > .empty-state {
    grid-column: 1 / -1;
}

.player-details-modal > .player-timeline-section {
    grid-column: 1;
    min-height: 0;
}

.player-details-modal > .player-events-section {
    grid-column: 2;
    min-height: 0;
}

.player-details-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.42rem;
}

.player-details-title > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-state-help-anchor {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.player-state-help-trigger {
    width: 1.28rem;
    height: 1.28rem;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: help;
}

.player-state-help-trigger:hover,
.player-state-help-trigger:focus-visible,
.player-state-help-anchor:focus-within .player-state-help-trigger {
    background: rgba(30, 138, 99, 0.08);
    outline: none;
}

.player-state-help-trigger:focus-visible {
    outline: 2px solid #1e8a63;
    outline-offset: 2px;
}

.player-details-state-dot {
    width: 0.72rem;
    height: 0.72rem;
    flex: 0 0 auto;
    justify-self: auto;
    box-shadow: 0 0 0 3px rgba(102, 115, 109, 0.1);
}

.player-details-state-dot:focus-visible {
    outline: 2px solid #1e8a63;
    outline-offset: 3px;
}

.player-state-help-tooltip {
    position: absolute;
    left: 0;
    top: calc(100% + 0.45rem);
    z-index: 1070;
    width: min(18rem, calc(100vw - 3rem));
    display: grid;
    gap: 0.48rem;
    padding: 0.62rem 0.68rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    color: #f7fbf9;
    background: rgba(24, 31, 28, 0.96);
    box-shadow: 0 1rem 2.4rem rgba(16, 24, 20, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.18rem);
    visibility: hidden;
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.player-state-help-anchor:hover .player-state-help-tooltip,
.player-state-help-anchor:focus-within .player-state-help-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
}

.player-state-help-tooltip strong {
    font-size: 0.78rem;
    line-height: 1.1;
}

.player-state-help-row {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.45rem;
    align-items: start;
    color: #cfdbd6;
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.35;
}

.player-state-help-row .player-state-dot {
    margin-top: 0.18rem;
    justify-self: start;
}

.player-state-help-row b {
    color: #f7fbf9;
    font-weight: 850;
}

.zone-details-modal {
    width: min(calc(100vw - 2rem), 980px);
    max-height: min(90vh, 860px);
    overflow: auto;
}

.zone-visitor-modal {
    width: min(calc(100vw - 2rem), 760px);
    max-height: min(88vh, 780px);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.confirm-modal {
    width: min(100%, 460px);
}

.confirm-copy {
    margin: 0;
    color: #45534d;
    font-size: 0.86rem;
    line-height: 1.45;
}

.modal-subtitle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.12rem;
    color: #66736d;
    font-size: 0.76rem;
    font-weight: 700;
}

.modal-subtitle-separator {
    color: #9aa6a0;
}

.modal-list {
    display: grid;
    gap: 0.45rem;
    align-content: start;
    grid-auto-rows: max-content;
    min-height: 0;
    overflow: auto;
}

.catalog-player-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    min-height: 3rem;
    overflow: hidden;
}

.player-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.player-details-tabs-section {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
    padding: 0.2rem;
    border: 1px solid #dfe7e3;
    border-radius: 8px;
    background: #f7faf8;
}

.player-details-tab {
    width: 100%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #66736d;
    text-align: left;
}

.player-details-tab:hover,
.player-details-tab:focus {
    border-color: #cdd8d2;
    background: #ffffff;
}

.player-details-tab.is-active {
    border-color: #b9c9c1;
    background: #ffffff;
    color: #202a25;
    box-shadow: 0 1px 2px rgba(31, 42, 37, 0.06);
}

.player-details-tab strong,
.player-details-tab span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-details-tab strong {
    font-size: 0.78rem;
    line-height: 1.15;
}

.player-details-tab span {
    color: #66736d;
    font-size: 0.72rem;
    font-weight: 750;
}

.player-details-section {
    display: grid;
    gap: 0.55rem;
    padding-top: 0.65rem;
    border-top: 1px solid #edf2ef;
}

.player-timeline-section {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.player-events-section {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.player-relationships-section {
    gap: 0.45rem;
}

.baritone-scan-progress {
    position: relative;
    width: 100%;
    height: 0.5rem;
    overflow: hidden;
    border: 1px solid #d8e0dc;
    border-radius: 999px;
    background: #eef4f1;
}

.baritone-scan-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #2f7d57;
    transition: width 180ms ease;
}

.baritone-scan-list {
    min-width: 0;
    display: grid;
    gap: 0.45rem;
    align-content: start;
    overflow: auto;
}

.baritone-scan-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 0.55rem;
    align-items: start;
    padding: 0.55rem 0.65rem;
    border: 1px solid #e2ebe6;
    border-radius: 7px;
    background: #fbfcfc;
}

.baritone-scan-row.is-medium-risk {
    border-color: #f3cf8d;
    background: #fff9ef;
}

.baritone-scan-row.is-high-risk {
    border-color: #eca5a5;
    background: #fff4f4;
}

.baritone-scan-player {
    min-width: 0;
    display: grid;
    gap: 0.1rem;
}

.baritone-scan-player strong {
    min-width: 0;
    overflow: hidden;
    color: #1f2a25;
    font-size: 0.84rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.baritone-scan-player span,
.baritone-scan-row p {
    color: #66736d;
    font-size: 0.7rem;
    font-weight: 780;
    line-height: 1.35;
}

.baritone-scan-metrics {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.baritone-scan-metrics span {
    display: inline-flex;
    align-items: center;
    min-height: 1.25rem;
    padding: 0 0.38rem;
    border: 1px solid #d8e0dc;
    border-radius: 999px;
    color: #53615c;
    background: #ffffff;
    font-size: 0.66rem;
    font-weight: 900;
}

.baritone-scan-row p {
    grid-column: 1 / -1;
    margin: 0;
}

.baritone-scan-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
}

.player-details-section h3 {
    margin: 0;
    color: #1f2a25;
    font-size: 0.92rem;
    line-height: 1.2;
}

.player-intersection-list {
    min-height: 0;
    max-height: none;
    overflow: auto;
}

.player-intersection-row {
    width: 100%;
    color: #26332d;
    cursor: pointer;
    outline: none;
    text-align: left;
}

.player-intersection-row:hover,
.player-intersection-row:focus-visible,
.player-intersection-row.is-highlighted {
    border-color: #b8c9c1;
    background: #f5faf7;
}

.player-intersection-row.is-pinned {
    border-color: #79ad95;
    background: #edf8f2;
    box-shadow: inset 3px 0 0 #2f8f68;
}

.player-intersection-row.is-preview:not(.is-pinned) {
    border-color: #9bcab8;
    background: #f2faf6;
    box-shadow: inset 3px 0 0 rgba(47, 143, 104, 0.45);
}

.player-intersection-row.is-loading {
    cursor: progress;
}

.relationship-main-line {
    align-items: center !important;
}

.intersection-player-action {
    flex: 0 0 auto;
    width: 1.58rem;
    height: 1.58rem;
}

.player-intersection-row .relationship-metrics {
    gap: 0.28rem;
}

.player-intersection-row .relationship-type-badge {
    border-color: color-mix(in srgb, var(--relationship-type-color) 38%, #d8e0dc);
    color: var(--relationship-type-color);
}

.relationship-list {
    min-width: 0;
    display: grid;
    gap: 0.38rem;
    align-content: start;
}

.relationship-row {
    min-width: 0;
    display: grid;
    gap: 0.28rem;
    padding: 0.48rem 0.55rem;
    border: 1px solid #e2ebe6;
    border-radius: 7px;
    background: #fbfcfc;
}

.relationship-row > div:first-child {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.55rem;
}

.relationship-row strong {
    min-width: 0;
    overflow: hidden;
    color: #1f2a25;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relationship-row span {
    color: #66736d;
    font-size: 0.7rem;
    font-weight: 800;
}

.relationship-description {
    margin: 0;
    color: #53615c;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.35;
}

.relationship-type-line {
    min-width: 0;
    display: flex;
    align-items: center;
}

.relationship-row .relationship-type-badge {
    color: var(--relationship-type-color);
    font-size: 0.66rem;
    font-weight: 900;
    line-height: 1;
}

.relationship-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.relationship-metrics span {
    display: inline-flex;
    align-items: center;
    min-height: 1.25rem;
    padding: 0 0.38rem;
    border: 1px solid #d8e0dc;
    border-radius: 999px;
    background: #ffffff;
}

.zone-overview-section {
    display: grid;
    gap: 0.55rem;
    padding-top: 0.65rem;
    border-top: 1px solid #edf2ef;
}

.zone-title-row {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
}

.zone-title-row h2 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-name-edit-button {
    width: 1.72rem;
    height: 1.72rem;
}

.zone-name-edit-button .action-icon {
    width: 0.92rem;
    height: 0.92rem;
}

.zone-name-input {
    width: min(24rem, 56vw);
    max-width: 100%;
    font-size: 0.96rem;
    font-weight: 800;
}

.zone-detail-color {
    flex: 0 0 auto;
}

.zone-metric-card strong,
.zone-insight-row strong {
    color: #202a25;
}

.zone-metric-card span,
.zone-insight-row span,
.zone-insight-row time {
    color: #66736d;
    font-size: 0.75rem;
    font-weight: 750;
}

.zone-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.45rem;
}

.zone-visitor-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    padding-top: 0.65rem;
    border-top: 1px solid #edf2ef;
}

.zone-visitor-search-progress {
    display: grid;
    gap: 0.46rem;
    padding: 0.58rem 0.65rem;
    border: 1px solid #d8e0dc;
    border-radius: 8px;
    color: #24322c;
    background: #f8fbfa;
}

.zone-visitor-search-progress strong {
    color: #1f2a25;
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.zone-visitor-list {
    min-height: 0;
    overflow: auto;
}

.zone-metric-card {
    min-width: 0;
    display: grid;
    gap: 0.16rem;
    padding: 0.58rem 0.65rem;
    border: 1px solid #e0e7e4;
    border-radius: 8px;
    background: #ffffff;
}

.zone-metric-card strong {
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-insight-section {
    gap: 0.45rem;
}

.zone-tabs-section {
    gap: 0.5rem;
}

.zone-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.25rem;
    border: 1px solid #dfe7e3;
    border-radius: 8px;
    background: #f7faf8;
}

.zone-tab-button {
    min-width: 0;
    display: grid;
    gap: 0.1rem;
    padding: 0.48rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #66736d;
    text-align: left;
}

.zone-tab-button:hover,
.zone-tab-button:focus {
    border-color: #cdd8d2;
    background: #ffffff;
}

.zone-tab-button.is-active {
    border-color: #b9c9c1;
    background: #ffffff;
    color: #202a25;
    box-shadow: 0 1px 2px rgba(31, 42, 37, 0.06);
}

.zone-tab-button strong,
.zone-tab-button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-tab-button strong {
    font-size: 0.82rem;
    line-height: 1.15;
}

.zone-tab-button span {
    color: #66736d;
    font-size: 0.72rem;
    font-weight: 750;
}

.zone-tab-panel {
    min-height: 10rem;
    display: grid;
    gap: 0.5rem;
}

.zone-tab-panel .player-event-row {
    height: 3.4rem;
    min-height: 3.4rem;
    box-sizing: border-box;
    overflow: hidden;
}

.zone-tab-panel .player-event-row > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-player-item {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.45rem 0.42rem 0.6rem;
}

.zone-player-item:hover,
.zone-player-item:focus-within {
    border-color: #1e8a63;
}

.zone-player-main {
    min-width: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.08rem 0.6rem;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}

.zone-player-main:focus {
    outline: none;
}

.zone-player-main:focus-visible {
    outline: 2px solid rgba(30, 138, 99, 0.32);
    outline-offset: 2px;
}

.zone-player-main > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-player-action {
    flex: 0 0 auto;
}

.zone-player-event-row {
    box-shadow: inset 3px 0 0 #64748b;
}

.zone-player-event-row.is-active {
    border-color: #b7e4c7;
    background: #f1fbf5;
    box-shadow: inset 3px 0 0 #16a34a;
}

.zone-insight-list {
    display: grid;
    gap: 0.38rem;
}

.zone-insight-row {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.08rem 0.65rem;
    align-items: center;
    padding: 0.5rem 0.6rem;
    border: 1px solid #e0e7e4;
    border-radius: 8px;
    background: #ffffff;
    text-align: left;
}

.zone-insight-row {
    border-left: 3px solid #16a34a;
}

.zone-insight-row:hover,
.zone-insight-row:focus {
    border-color: #1e8a63;
    border-left-color: #16a34a;
}

.zone-insight-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-insight-row time {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    white-space: nowrap;
}

.timeline-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem 0.55rem;
    color: #66736d;
    font-size: 0.76rem;
    font-weight: 800;
}

.timeline-control-group {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.timeline-control-group span {
    color: #66736d;
    font-size: 0.72rem;
    font-weight: 800;
}

.timeline-date-input {
    width: 9rem;
}

.player-events-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem 0.55rem;
}

.event-filter-menu {
    position: relative;
}

.event-filter-trigger {
    min-width: 0;
    height: 1.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0 0.55rem;
    border: 1px solid #d8e0dc;
    border-radius: 7px;
    color: #35433c;
    background: #ffffff;
    font-size: 0.72rem;
    font-weight: 850;
}

.event-filter-trigger:hover,
.event-filter-trigger:focus-visible {
    border-color: #1e8a63;
    background: #f8fbfa;
}

.event-filter-trigger .action-icon {
    width: 0.9rem;
    height: 0.9rem;
}

.event-filter-popover {
    position: absolute;
    z-index: 45;
    top: calc(100% + 0.35rem);
    right: 0;
    width: 11.5rem;
    display: grid;
    gap: 0.12rem;
    padding: 0.35rem;
    border: 1px solid rgba(31, 42, 37, 0.14);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(31, 42, 37, 0.18);
}

.event-filter-option {
    width: 100%;
    min-height: 1.65rem;
    padding: 0.28rem 0.45rem;
    border: 0;
    border-radius: 6px;
    color: #35433c;
    background: transparent;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 800;
}

.event-filter-option:hover,
.event-filter-option:focus-visible {
    background: #eef7f3;
}

.event-filter-option.is-active {
    color: #0f6a4a;
    background: #e3f4ec;
}

.activity-timeline {
    position: relative;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dce4e0;
    border-radius: 8px;
    background: #fbfcfc;
}

.timeline-viewport {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.timeline-viewport.is-dragging {
    cursor: grabbing;
}

.timeline-content {
    --timeline-edge-gutter: 0px;
    min-width: 100%;
    width: 100%;
    padding: 0.45rem calc(0.65rem + var(--timeline-edge-gutter)) 0.4rem;
}

.timeline-scaled-content {
    display: grid;
    gap: 0.22rem;
}

.timeline-day-row,
.timeline-axis-row {
    display: grid;
    grid-template-columns: 5.8rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: center;
}

.timeline-day-label {
    position: sticky;
    left: 0.65rem;
    z-index: 20;
    min-width: 0;
    display: grid;
    gap: 0.04rem;
    align-self: stretch;
    align-content: center;
    padding-right: 0.45rem;
    background: linear-gradient(90deg, #fbfcfc 0%, #fbfcfc 82%, rgba(251, 252, 252, 0));
}

.timeline-day-label strong {
    overflow: hidden;
    color: #1f2a25;
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-day-label span {
    color: #66736d;
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
}

.timeline-day-track {
    contain: layout paint;
    position: relative;
    height: 36px;
    overflow: hidden;
    border: 1px solid #edf2ef;
    border-radius: 5px;
    background: #ffffff;
}

.timeline-day-track::before,
.timeline-day-track::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.timeline-day-track::before {
    background-image: repeating-linear-gradient(
        to right,
        rgba(31, 42, 37, 0.16) 0 1px,
        transparent 1px calc(100% / 96)
    );
}

.timeline-day-track::after {
    opacity: 0;
    background-image: repeating-linear-gradient(
        to right,
        rgba(31, 42, 37, 0.12) 0 1px,
        transparent 1px calc(100% / 1440)
    );
    transition: opacity 120ms ease;
}

.timeline-viewport.is-minute-grid-visible .timeline-day-track::after {
    opacity: 1;
}

.timeline-hour-grid {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.timeline-hour-grid span {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #b8c7c1;
    transform: translateX(-1px);
}

.timeline-online-segment {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    border: 1px solid #b7e4c7;
    border-radius: 3px;
    background: #ddf6e6;
}

.timeline-online-segment::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: max(100%, 10px);
    transform: translateX(-50%);
}

.timeline-unavailable-segment {
    position: absolute;
    z-index: 6;
    top: 1px;
    bottom: 1px;
    border: 1px solid rgba(220, 38, 38, 0.62);
    border-radius: 3px;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(220, 38, 38, 0.28) 0 6px,
            rgba(255, 255, 255, 0.24) 6px 12px
        ),
        rgba(254, 226, 226, 0.5);
}

.timeline-unavailable-segment::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: max(100%, 10px);
    transform: translateX(-50%);
}

.timeline-intersection-segment {
    position: absolute;
    z-index: 7;
    top: 5px;
    bottom: 5px;
    border: 1px solid rgba(17, 132, 91, 0.72);
    border-radius: 4px;
    background:
        linear-gradient(90deg, rgba(17, 132, 91, 0.22), rgba(47, 128, 237, 0.26)),
        rgba(232, 247, 239, 0.78);
}

.timeline-intersection-segment::after {
    content: "";
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: 50%;
    width: max(100%, 10px);
    transform: translateX(-50%);
}

.timeline-afk-segment {
    position: absolute;
    z-index: 6;
    top: 12px;
    bottom: 12px;
    border: 1px solid #f59f00;
    border-radius: 3px;
    background: rgba(255, 212, 59, 0.82);
}

.timeline-afk-segment::after {
    content: "";
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: 50%;
    width: max(100%, 10px);
    transform: translateX(-50%);
}

.timeline-world-segment {
    position: absolute;
    z-index: 3;
    top: 4px;
    bottom: 4px;
    border: 1px solid #7c3aed;
    border-radius: 3px;
    background: rgba(167, 139, 250, 0.84);
}

.timeline-world-segment::after {
    content: "";
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: 50%;
    width: max(100%, 10px);
    transform: translateX(-50%);
}

.timeline-zone-segment {
    position: absolute;
    z-index: 4;
    top: 8px;
    bottom: 8px;
    border: 1px solid #f97316;
    border-radius: 3px;
    background: rgba(251, 146, 60, 0.84);
}

.timeline-zone-segment::after {
    content: "";
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: 50%;
    width: max(100%, 10px);
    transform: translateX(-50%);
}

.timeline-online-segment:focus-visible,
.timeline-unavailable-segment:focus-visible,
.timeline-intersection-segment:focus-visible,
.timeline-afk-segment:focus-visible,
.timeline-world-segment:focus-visible,
.timeline-zone-segment:focus-visible,
.timeline-now-line:focus-visible,
.timeline-marker:focus-visible {
    outline: 2px solid #1e8a63;
    outline-offset: 3px;
}

.timeline-now-line {
    position: absolute;
    z-index: 8;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #2563eb;
}

.timeline-hover-line {
    position: absolute;
    z-index: 9;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dc2626;
    pointer-events: none;
}

.timeline-seek-line {
    position: absolute;
    z-index: 12;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #111827;
    pointer-events: none;
}

.timeline-seek-label {
    position: absolute;
    z-index: 13;
    top: 0.35rem;
    padding: 0.14rem 0.28rem;
    border: 1px solid #cfd8d4;
    border-radius: 4px;
    color: #1f2a25;
    background: #ffffff;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    transform: translateX(-50%);
    pointer-events: none;
}

.timeline-tooltip {
    position: absolute;
    z-index: 40;
    width: max-content;
    max-width: 18rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(31, 42, 37, 0.14);
    border-radius: 7px;
    color: #f8fbfa;
    background: rgba(31, 42, 37, 0.96);
    pointer-events: none;
}

.timeline-tooltip[hidden] {
    display: none !important;
    box-shadow: none;
}

.timeline-seek-line[hidden],
.timeline-seek-label[hidden] {
    display: none !important;
}

.timeline-tooltip-title {
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 900;
    line-height: 1.25;
}

.timeline-tooltip-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.45rem;
}

.timeline-tooltip-row,
.timeline-tooltip-section {
    margin-top: 0.22rem;
    color: #dce8e4;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
}

.timeline-tooltip-section {
    margin-top: 0.45rem;
    color: #9ee6b7;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.timeline-tooltip-key {
    color: #9ee6b7;
    font-weight: 900;
}

.timeline-marker {
    position: absolute;
    z-index: 7;
    top: 50%;
    width: 0.8rem;
    height: 0.8rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    transform: translate(-50%, -50%);
}

.timeline-marker:hover .timeline-marker-dot,
.timeline-marker:focus .timeline-marker-dot {
    outline: 2px solid rgba(30, 138, 99, 0.42);
    outline-offset: 2px;
}

.timeline-marker.is-highlighted .timeline-marker-dot {
    outline: 2px solid rgba(220, 38, 38, 0.48);
    outline-offset: 2px;
}

.timeline-marker-dot {
    width: 0.72rem;
    height: 0.72rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

.timeline-marker-time {
    display: none;
}

.timeline-marker.is-server-enter .timeline-marker-dot {
    background: #16a34a;
}

.timeline-marker.is-server-leave .timeline-marker-dot {
    background: #16a34a;
}

.timeline-marker.is-zone-enter .timeline-marker-dot {
    background: #f97316;
}

.timeline-marker.is-zone-leave .timeline-marker-dot {
    background: #f97316;
}

.timeline-marker.is-world .timeline-marker-dot {
    background: #7c3aed;
}

.timeline-marker.is-teleport .timeline-marker-dot {
    background: #0891b2;
}

.timeline-marker.is-afk-enter .timeline-marker-dot {
    background: #eab308;
}

.timeline-marker.is-afk-leave .timeline-marker-dot {
    background: #eab308;
}

.timeline-marker.is-chat .timeline-marker-dot {
    background: #2563eb;
}

.timeline-marker.is-health-lost .timeline-marker-dot {
    background: #ef4444;
}

.timeline-marker.is-health-restored .timeline-marker-dot {
    background: #14b8a6;
}

.timeline-axis {
    position: relative;
    height: 1.1rem;
    color: #66736d;
    font-size: 0.68rem;
    font-weight: 800;
    pointer-events: none;
}

.timeline-axis span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}

.timeline-empty {
    padding: 0.7rem;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.8rem;
    color: #66736d;
    font-size: 0.72rem;
    font-weight: 800;
}

.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.chart-legend i {
    width: 0.55rem;
    height: 0.55rem;
    display: inline-block;
    border-radius: 50%;
}

.legend-online {
    border: 1px solid #b7e4c7;
    background: #ddf6e6;
}

.legend-unavailable {
    border: 1px solid rgba(220, 38, 38, 0.62);
    background:
        repeating-linear-gradient(
            135deg,
            rgba(220, 38, 38, 0.38) 0 3px,
            rgba(255, 255, 255, 0.32) 3px 6px
        ),
        rgba(254, 226, 226, 0.8);
}

.legend-intersection {
    border: 1px solid rgba(17, 132, 91, 0.72);
    background: linear-gradient(90deg, rgba(17, 132, 91, 0.38), rgba(47, 128, 237, 0.42));
}

.legend-afk {
    border: 1px solid #f59f00;
    background: #ffd43b;
}

.legend-world {
    border: 1px solid #7c3aed;
    background: #a78bfa;
}

.legend-now {
    width: 0.18rem;
    border-radius: 2px;
    background: #2563eb;
}

.legend-zone {
    background: #f08c00;
}

.player-events-list {
    display: grid;
    gap: 0.4rem;
    max-height: 290px;
    overflow: auto;
}

.player-details-modal .player-events-list {
    align-content: start;
    max-height: min(42rem, 48vh);
    overflow: auto;
    padding-right: 0.15rem;
}

.player-event-row {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.08rem 0.6rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid #e0e7e4;
    border-radius: 8px;
    background: #ffffff;
    text-align: left;
}

.player-event-row:hover,
.player-event-row:focus {
    border-color: #1e8a63;
}

.player-event-row.is-highlighted {
    border-color: #dc2626;
    background: #fff5f5;
}

.player-event-title {
    min-width: 0;
    display: block;
}

.player-event-row strong {
    display: block;
    overflow: hidden;
    color: #202a25;
    font-size: 0.84rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-event-location {
    color: #66736d;
    font-size: 0.75rem;
}

.player-event-row time {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: #66736d;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.player-event-row.is-server-enter {
    box-shadow: inset 3px 0 0 #16a34a;
}

.player-event-row.is-server-leave {
    box-shadow: inset 3px 0 0 #16a34a;
}

.player-event-row.is-zone-enter {
    box-shadow: inset 3px 0 0 #f97316;
}

.player-event-row.is-zone-leave {
    box-shadow: inset 3px 0 0 #f97316;
}

.player-event-row.is-world {
    box-shadow: inset 3px 0 0 #7c3aed;
}

.player-event-row.is-teleport {
    box-shadow: inset 3px 0 0 #0891b2;
}

.player-event-row.is-afk-enter {
    box-shadow: inset 3px 0 0 #eab308;
}

.player-event-row.is-afk-leave {
    box-shadow: inset 3px 0 0 #eab308;
}

.player-event-row.is-chat {
    box-shadow: inset 3px 0 0 #2563eb;
}

.player-event-row.is-health-lost {
    box-shadow: inset 3px 0 0 #ef4444;
}

.player-event-row.is-health-restored {
    box-shadow: inset 3px 0 0 #14b8a6;
}

.pagination-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    color: #66736d;
    font-size: 0.76rem;
    font-weight: 800;
}

.pagination-button {
    width: 1.8rem;
    height: 1.8rem;
}

.zone-save-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: end;
}

.zone-save-grid label {
    display: grid;
    gap: 0.25rem;
    color: #596761;
    font-size: 0.77rem;
    font-weight: 800;
}

.modal-actions {
    justify-content: flex-end;
}

.admin-page {
    height: calc(100vh - 2rem);
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.admin-page > .page-header,
.admin-page > .page-status {
    flex: 0 0 auto;
    margin-bottom: 0;
}

.admin-table-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.access-keys-page {
    grid-template-rows: auto auto minmax(0, 1fr);
}

.access-key-table-panel {
    min-height: 0;
}

.access-key-modal {
    width: min(100%, 720px);
    max-height: min(calc(100vh - 2rem), 520px);
    padding: 0;
    gap: 0;
    grid-template-rows: auto minmax(0, 1fr);
}

.access-key-modal .modal-titlebar {
    margin: 0;
    padding: 0.95rem 1rem;
    border-bottom: 1px solid #e1e8e5;
    background: #f8faf9;
}

.access-key-create-form > .alert {
    margin: 0.75rem 1rem 0;
}

.access-key-modal-grid {
    display: grid;
    grid-template-columns: minmax(12rem, 1.4fr) minmax(6rem, 0.65fr) minmax(7rem, 0.75fr) minmax(5.5rem, 0.6fr);
    gap: 0.65rem;
    align-items: end;
}

.admin-table-header {
    align-items: start;
}

.admin-table-metrics {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.admin-table-scroll {
    min-height: 0;
    overflow: auto;
    border: 1px solid #e0e7e4;
    border-radius: 8px;
    background: #ffffff;
}

.admin-data-table {
    min-width: 980px;
    table-layout: auto;
}

.admin-map-table {
    min-width: 860px;
}

.access-key-table {
    min-width: 940px;
}

.admin-data-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    border-bottom-color: #dce4e0;
    background: #f8faf9;
    white-space: nowrap;
}

.admin-data-table tbody tr.is-inactive {
    background: #fbfaf8;
}

.admin-data-table tbody tr.is-inactive td {
    color: #69756f;
}

.admin-data-table tbody td {
    vertical-align: middle;
}

.admin-data-table tbody td strong {
    color: #202a25;
    font-size: 0.88rem;
}

.admin-cell-link,
.admin-cell-muted {
    max-width: 28rem;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.admin-cell-link {
    color: #176d50;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.admin-cell-link:hover,
.admin-cell-link:focus {
    text-decoration: underline;
}

.admin-cell-muted {
    color: #66736d;
    font-size: 0.8rem;
    font-weight: 700;
}

.map-proxy-indicator {
    margin-left: 0.45rem;
}

.admin-actions-column {
    text-align: right;
}

.admin-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    white-space: nowrap;
}

.admin-table-check {
    min-height: 2rem;
}

.admin-table-input,
.admin-number-input,
.admin-table-textarea {
    font-size: 0.8rem;
}

.admin-table-input {
    min-width: 10rem;
}

.admin-url-input {
    min-width: 18rem;
}

.admin-mapids-input {
    min-width: 14rem;
}

.admin-number-input {
    width: 6.4rem;
}

.admin-table-textarea {
    width: 100%;
    min-width: 18rem;
    min-height: 3rem;
    max-height: 5.5rem;
    resize: vertical;
}

.admin-monitor-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 0.75rem;
    max-width: 1240px;
}

.admin-workspace {
    min-width: 0;
    display: grid;
    gap: 0.75rem;
}

.page-status {
    margin-bottom: 0.75rem;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
    gap: 0.45rem;
}

.summary-item {
    min-width: 0;
    display: grid;
    gap: 0.08rem;
    padding: 0.55rem;
    border: 1px solid #dce4e0;
    border-radius: 8px;
    background: #f6f8f7;
}

.summary-item strong {
    color: #1f2a25;
    font-size: 1rem;
    line-height: 1;
}

.summary-item span,
.map-summary-row span,
.user-card-meta span {
    color: #66736d;
    font-size: 0.74rem;
    font-weight: 700;
}

.user-card-list,
.map-summary-list {
    display: grid;
    gap: 0.5rem;
}

.user-card {
    display: grid;
    gap: 0.55rem;
    padding: 0.65rem;
    border: 1px solid #e0e7e4;
    border-radius: 8px;
    background: #ffffff;
}

.user-card.is-inactive {
    border-color: #e5dfd5;
    background: #fbfaf8;
}

.user-card-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.75rem;
}

.user-card-title {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.user-card-title strong {
    min-width: 0;
    overflow: hidden;
    color: #202a25;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-card-title span {
    min-width: 0;
    overflow: hidden;
    color: #66736d;
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
}

.user-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.user-access-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    padding-top: 0.55rem;
    border-top: 1px solid #edf2ef;
}

.map-summary-row {
    display: grid;
    gap: 0.1rem;
    padding: 0.55rem 0.6rem;
    border: 1px solid #e0e7e4;
    border-radius: 8px;
    background: #ffffff;
}

.map-summary-row strong {
    min-width: 0;
    overflow: hidden;
    color: #202a25;
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-modal {
    width: min(100%, 720px);
}

.user-editor-modal {
    width: min(100%, 780px);
    max-height: min(calc(100vh - 2rem), 720px);
    padding: 0;
    gap: 0;
    grid-template-rows: auto minmax(0, 1fr);
}

.user-editor-modal .modal-titlebar,
.map-editor-titlebar {
    margin: 0;
    padding: 0.95rem 1rem;
    border-bottom: 1px solid #e1e8e5;
    background: #f8faf9;
}

.user-editor-form {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.user-editor-form > .alert {
    margin: 0.75rem 1rem 0;
}

.user-editor-validation {
    margin: 0.75rem 1rem 0;
}

.user-editor-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    gap: 0.7rem;
    padding: 0.8rem 1rem;
    overflow: auto;
}

.user-modal-section {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid #dfe7e3;
    border-radius: 8px;
    background: #ffffff;
}

.user-modal-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.user-modal-section h3 {
    margin: 0;
    color: #1f2a25;
    font-size: 0.88rem;
    line-height: 1.2;
}

.user-modal-note {
    margin: 0;
    color: #66736d;
    font-size: 0.78rem;
    font-weight: 700;
}

.user-modal-toggle-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: end;
}

.user-editor-field,
.user-modal-toggle-grid > label:not(.compact-check) {
    display: grid;
    gap: 0.25rem;
    color: #596761;
    font-size: 0.77rem;
    font-weight: 800;
}

.user-editor-field > span {
    line-height: 1.15;
}

.user-editor-field .form-control,
.user-editor-field .form-select {
    min-height: 2.35rem;
    width: 100%;
    font-size: 0.84rem;
}

.user-expiration-control {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.35rem;
    gap: 0.45rem;
    align-items: center;
}

.datetime-picker24 {
    position: relative;
    min-width: 0;
}

.datetime-picker24-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.35rem;
    gap: 0.4rem;
    align-items: center;
}

.datetime-picker24-control .icon-button {
    width: 2.35rem;
    height: 2.35rem;
}

.datetime-picker24-input {
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.datetime-picker24-popover {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 30;
    width: min(20rem, calc(100vw - 2rem));
    display: grid;
    gap: 0.55rem;
    padding: 0.65rem;
    border: 1px solid #d6e0dc;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(31, 42, 37, 0.16);
}

.datetime-picker24-monthbar {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) 2rem;
    gap: 0.45rem;
    align-items: center;
}

.datetime-picker24-monthbar .icon-button {
    width: 2rem;
    height: 2rem;
}

.datetime-picker24-monthbar strong {
    overflow: hidden;
    color: #1f2a25;
    font-size: 0.86rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datetime-picker24-weekdays,
.datetime-picker24-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
}

.datetime-picker24-weekdays span {
    color: #718078;
    font-size: 0.68rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.datetime-picker24-day {
    min-width: 0;
    height: 2rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #26322d;
    font-size: 0.78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.datetime-picker24-day:hover,
.datetime-picker24-day:focus-visible {
    border-color: #bcd0c7;
    background: #eef5f2;
    outline: none;
}

.datetime-picker24-day.is-outside-month {
    color: #9aa7a1;
}

.datetime-picker24-day.is-today {
    border-color: #98b9aa;
}

.datetime-picker24-day.is-selected {
    border-color: #2d7c60;
    background: #2d7c60;
    color: #ffffff;
}

.datetime-picker24-time-field {
    display: grid;
    gap: 0.25rem;
}

.datetime-picker24-time-field span {
    color: #596761;
    font-size: 0.72rem;
    font-weight: 900;
}

.datetime-picker24-time-field input {
    font-variant-numeric: tabular-nums;
}

.datetime-picker24-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
}

.datetime-range-picker24 {
    position: relative;
    min-width: 0;
}

.datetime-range-picker24-trigger {
    min-height: 2rem;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
    padding: 0.35rem 0.5rem;
    color: #2f3c36;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 850;
}

.datetime-range-picker24-trigger span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datetime-range-picker24-trigger .action-icon {
    width: 0.9rem;
    height: 0.9rem;
}

.datetime-range-picker24-popover {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 1090;
    width: min(19.5rem, calc(100vw - 1.4rem));
    max-width: calc(100vw - 1.4rem);
    box-sizing: border-box;
    display: grid;
    gap: 0.55rem;
    padding: 0.62rem;
    border: 1px solid #d6e0dc;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(31, 42, 37, 0.18);
    overflow: visible;
}

.datetime-range-picker24-popover::before,
.datetime-range-picker24-popover::after {
    content: "";
    display: var(--datetime-range-popover-arrow-display, block);
    position: absolute;
    left: var(--datetime-range-popover-arrow-left, 1rem);
    width: 0;
    height: 0;
    border-right: 0.48rem solid transparent;
    border-left: 0.48rem solid transparent;
    pointer-events: none;
    transform: translateX(-50%);
}

.datetime-range-picker24-popover::before {
    top: var(--datetime-range-popover-arrow-outer-top, -0.48rem);
    bottom: var(--datetime-range-popover-arrow-outer-bottom, auto);
    border-top: var(--datetime-range-popover-arrow-outer-border-top, 0);
    border-bottom: var(--datetime-range-popover-arrow-outer-border-bottom, 0.48rem solid #d6e0dc);
}

.datetime-range-picker24-popover::after {
    top: var(--datetime-range-popover-arrow-inner-top, -0.39rem);
    bottom: var(--datetime-range-popover-arrow-inner-bottom, auto);
    border-right-width: 0.39rem;
    border-left-width: 0.39rem;
    border-top: var(--datetime-range-popover-arrow-inner-border-top, 0);
    border-bottom: var(--datetime-range-popover-arrow-inner-border-bottom, 0.39rem solid #ffffff);
}

.datetime-range-picker24-endpoints {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.38rem;
}

.datetime-range-picker24-endpoint {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
    padding: 0.42rem;
    border: 1px solid #d8e0dc;
    border-radius: 7px;
    background: #f8fbfa;
    text-align: left;
}

.datetime-range-picker24-endpoint span,
.datetime-range-picker24-times label > span {
    color: #66736d;
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1;
}

.datetime-range-picker24-endpoint strong {
    min-width: 0;
    overflow: hidden;
    color: #1f2a25;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datetime-range-picker24-endpoint:hover,
.datetime-range-picker24-endpoint:focus-visible,
.datetime-range-picker24-endpoint.is-active {
    border-color: #1e8a63;
    background: #eef8f3;
}

.datetime-range-picker24-monthbar {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) 2rem;
    gap: 0.42rem;
    align-items: center;
}

.datetime-range-picker24-monthbar .icon-button {
    width: 2rem;
    height: 2rem;
}

.datetime-range-picker24-monthbar strong {
    overflow: hidden;
    color: #1f2a25;
    font-size: 0.8rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datetime-range-picker24-weekdays,
.datetime-range-picker24-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.22rem;
}

.datetime-range-picker24-weekdays span {
    color: #718078;
    font-size: 0.62rem;
    font-weight: 900;
    text-align: center;
}

.datetime-range-picker24-day {
    min-width: 0;
    aspect-ratio: 1;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #2f3c36;
    background: #f8fbfa;
    font-size: 0.7rem;
    font-weight: 850;
}

.datetime-range-picker24-day:hover,
.datetime-range-picker24-day:focus-visible {
    border-color: #1e8a63;
    background: #eef8f3;
}

.datetime-range-picker24-day.is-outside-month {
    color: #a5b0ab;
    background: #fbfcfc;
}

.datetime-range-picker24-day.is-today {
    border-color: #8db8a7;
}

.datetime-range-picker24-day.is-in-range {
    color: #0f6a4a;
    background: #dff2e9;
}

.datetime-range-picker24-day.is-start,
.datetime-range-picker24-day.is-end {
    color: #ffffff;
    border-color: #1e8a63;
    background: #1e8a63;
}

.datetime-range-picker24-day:disabled {
    color: #b9c2be;
    background: #f2f5f4;
    cursor: not-allowed;
    opacity: 0.7;
}

.datetime-range-picker24-times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
}

.datetime-range-picker24-times label {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.datetime-range-picker24-times .form-control {
    min-height: 1.9rem;
    padding: 0.28rem 0.42rem;
    font-size: 0.7rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.datetime-range-picker24-error {
    margin: 0;
    color: #a13a2b;
    font-size: 0.66rem;
    font-weight: 850;
    line-height: 1.2;
}

.datetime-range-picker24-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
}

.user-expiration-control .icon-button {
    width: 2.35rem;
    height: 2.35rem;
}

.user-active-check {
    min-height: 2.35rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid #dfe7e3;
    border-radius: 8px;
    background: #ffffff;
}

.user-access-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.45rem;
    margin-top: 0;
}

.user-editor-actions {
    flex: 0 0 auto;
    padding: 0.8rem 1rem 0.9rem;
    border-top: 1px solid #e1e8e5;
    background: #f8faf9;
}

.map-create-modal {
    width: min(100%, 860px);
}

.map-editor-modal {
    width: min(calc(100vw - 2rem), 920px);
    max-height: min(calc(100vh - 2rem), 780px);
    padding: 0;
    gap: 0;
    grid-template-rows: auto minmax(0, 1fr);
}

.map-capabilities-modal {
    width: min(calc(100vw - 2rem), 1180px);
    max-height: min(calc(100vh - 2rem), 780px);
    padding: 0;
    gap: 0;
    grid-template-rows: auto minmax(0, 1fr);
}

.map-capabilities-body {
    min-height: 0;
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem 1rem 1rem;
    overflow: hidden;
}

.map-capabilities-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.map-capabilities-scroll {
    min-height: 0;
    max-height: none;
    overflow: auto;
}

.map-capabilities-table {
    min-width: 1060px;
}

.map-capabilities-table th {
    vertical-align: top;
    white-space: nowrap;
}

.map-capabilities-table td {
    min-width: 12rem;
    vertical-align: top;
}

.map-capabilities-table td:first-child {
    min-width: 8.5rem;
}

.map-capabilities-table td:last-child {
    min-width: 16rem;
}

.capability-cell {
    display: grid;
    gap: 0.35rem;
    color: #5d6b65;
    font-size: 0.75rem;
    line-height: 1.3;
}

.capability-chip {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0.16rem 0.45rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.capability-chip.is-supported {
    border-color: #8fd6ae;
    background: #e4f8ec;
    color: #137047;
}

.capability-chip.is-optional {
    border-color: #f4c96b;
    background: #fff6db;
    color: #8a5a00;
}

.capability-chip.is-custom {
    border-color: #93c5fd;
    background: #e8f1ff;
    color: #1d4f91;
}

.capability-chip.is-unavailable {
    border-color: #e2e8f0;
    background: #f3f6f8;
    color: #66736d;
}

.map-editor-heading {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
}

.map-editor-heading .modal-subtitle {
    max-width: 34rem;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-editor-modal .alert {
    margin: 0.75rem 1rem 0;
}

.map-editor-modal form {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.map-editor-validation {
    margin: 0.75rem 1rem 0;
}

.map-editor-summary {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 0.75fr));
    gap: 0.55rem;
    padding: 0.9rem 1rem 0;
}

.map-editor-summary > div {
    min-width: 0;
    display: grid;
    gap: 0.15rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid #dde6e2;
    border-radius: 8px;
    background: #fbfcfc;
}

.map-editor-summary span {
    color: #66736d;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.map-editor-summary strong {
    min-width: 0;
    overflow: hidden;
    color: #202a25;
    font-size: 0.83rem;
    font-weight: 850;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-editor-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    gap: 0.7rem;
    padding: 0.8rem 1rem;
    overflow: auto;
}

.map-editor-section {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid #dfe7e3;
    border-radius: 8px;
    background: #ffffff;
}

.map-editor-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.map-editor-section-title h3 {
    margin: 0;
    color: #1f2a25;
    font-size: 0.86rem;
    line-height: 1.2;
}

.map-editor-grid {
    display: grid;
    gap: 0.65rem;
    align-items: end;
}

.map-editor-connection-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
    align-items: end;
}

.map-editor-provider-control {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.35rem;
    gap: 0.45rem;
    align-items: end;
}

.map-editor-provider-control .icon-button {
    width: 2.35rem;
    height: 2.35rem;
}

.map-editor-active-toggle {
    height: 2.35rem;
    justify-self: start;
}

.map-editor-tracking-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.map-editor-field {
    min-width: 0;
    display: grid;
    gap: 0.28rem;
    color: #596761;
    font-size: 0.76rem;
    font-weight: 850;
}

.map-editor-field > span {
    line-height: 1.15;
}

.map-editor-field .form-control,
.map-editor-field .form-select {
    min-height: 2.35rem;
    width: 100%;
    font-size: 0.84rem;
}

.map-editor-template-box {
    min-height: 7.75rem;
    resize: vertical;
    font-family: Consolas, "Liberation Mono", monospace;
    line-height: 1.35;
}

.map-editor-advanced {
    display: block;
    border: 1px solid #dfe7e3;
    border-radius: 8px;
    background: #fbfcfc;
}

.map-editor-advanced > summary {
    min-height: 2.6rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.75rem;
    color: #41504a;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 900;
    list-style: none;
}

.map-editor-advanced > summary::-webkit-details-marker {
    display: none;
}

.map-editor-advanced > summary::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.14s ease;
}

.map-editor-advanced[open] > summary {
    border-bottom: 1px solid #dfe7e3;
}

.map-editor-advanced[open] > summary::after {
    transform: rotate(225deg);
}

.map-editor-advanced[open] {
    display: grid;
    gap: 0.65rem;
    padding-bottom: 0.75rem;
}

.map-editor-advanced > .map-editor-grid,
.map-editor-advanced > .map-editor-field,
.map-editor-advanced > .map-editor-world-list,
.map-editor-advanced > .map-editor-advanced-actions {
    margin-inline: 0.75rem;
}

.map-editor-world-list {
    display: grid;
    gap: 0.5rem;
}

.map-editor-world-row {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 0.6rem;
    align-items: end;
}

.map-editor-world-id {
    min-height: 2.35rem;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0.45rem 0.65rem;
    border: 1px solid #dfe7e3;
    border-radius: 8px;
    background: #f4f7f6;
    color: #41504a;
    font-size: 0.82rem;
    font-weight: 800;
}

.map-editor-world-id span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-editor-advanced-actions {
    display: flex;
    justify-content: flex-end;
}

.map-editor-toggle {
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid #dfe7e3;
    border-radius: 8px;
    background: #fbfcfc;
    color: #41504a;
    font-size: 0.8rem;
    font-weight: 850;
    white-space: nowrap;
}

.map-editor-toggle input {
    accent-color: #1e8a63;
}

.map-editor-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    padding: 0.8rem 1rem 0.9rem;
    border-top: 1px solid #e1e8e5;
    background: #f8faf9;
}

.modal-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.modal-form-grid label,
.modal-access-editor {
    display: grid;
    gap: 0.25rem;
    color: #596761;
    font-size: 0.77rem;
    font-weight: 800;
}

.modal-access-editor {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    margin-top: 0.75rem;
}

.modal-section-title {
    margin: 0.15rem 0 0.55rem;
    color: #1f2a25;
    font-size: 0.86rem;
    line-height: 1.2;
}

.admin-shell {
    display: grid;
    gap: 0.9rem;
    max-width: 1180px;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) 0.7fr;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}

.map-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 0.9fr) auto;
    gap: 0.7rem;
    align-items: end;
    margin-bottom: 0.9rem;
}

.settings-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}

.map-form-grid label,
.settings-form-grid label,
.switch-label {
    display: grid;
    gap: 0.25rem;
    color: #596761;
    font-size: 0.77rem;
    font-weight: 800;
}

.switch-label {
    justify-items: start;
}

.settings-wide {
    grid-column: 1 / -1;
}

.settings-template-box {
    min-height: 7.5rem;
    resize: vertical;
}

.access-editor,
.user-map-access {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
}

.access-editor {
    margin: -0.15rem 0 0.9rem;
}

.compact-check {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #41504a;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.compact-check input {
    accent-color: #1e8a63;
}

.map-list-empty {
    margin-top: 0.85rem;
}

.map-admin-list {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.9rem;
}

.map-admin-row {
    display: grid;
    gap: 0.65rem;
    padding: 0.65rem;
    border: 1px solid #e0e7e4;
    border-radius: 8px;
    background: #f9fbfa;
}

.map-admin-main {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 0.9fr) auto;
    gap: 0.55rem;
    align-items: end;
}

.map-admin-main label,
.map-admin-settings label {
    display: grid;
    gap: 0.25rem;
    color: #596761;
    font-size: 0.73rem;
    font-weight: 800;
}

.map-admin-main .compact-check {
    display: inline-flex;
    align-self: center;
    margin-top: 1.1rem;
}

.map-admin-settings {
    margin-bottom: 0;
}

.map-admin-actions {
    justify-content: flex-end;
}

.table {
    margin-bottom: 0;
}

.table thead th {
    border-bottom-color: #dce4e0;
    color: #596761;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.table tbody td {
    color: #1f2a25;
    font-size: 0.88rem;
}

@media (min-width: 981px) {
    .map-page {
        height: calc(100vh - 2rem);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .map-page > .monitor-shell {
        height: auto;
        min-height: 0;
    }

    .players-panel,
    .map-events-panel,
    .player-catalog-modal {
        overflow: visible;
    }

    .search-help-anchor {
        isolation: isolate;
    }

    .search-help-tooltip,
    .player-catalog-modal .search-help-tooltip {
        --search-help-hidden-transform: translateX(0.25rem);
        --search-help-visible-transform: translateX(0);
        position: absolute;
        inset: 0 calc(100% + 0.7rem) auto auto;
        width: min(26rem, 42vw);
        max-width: min(26rem, calc(100vw - 2rem));
        max-height: min(34rem, calc(100vh - 2rem));
    }

    .search-help-tooltip-wide {
        width: min(30rem, 48vw);
        max-width: min(30rem, calc(100vw - 2rem));
    }

    .map-events-panel .search-help-tooltip {
        top: 0;
        bottom: auto;
    }

    .player-catalog-modal .search-help-tooltip {
        left: auto;
        top: 0;
    }

    .tick-help-anchor .tick-popover {
        inset: auto 0 auto auto;
        top: calc(100% + 0.55rem);
        width: min(25rem, calc(100vw - 2rem));
    }
}

@media (max-width: 980px) {
    .tick-help-anchor .tick-popover {
        position: fixed;
        inset: 5rem 1rem auto 1rem;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 6rem);
    }

    .admin-page,
    .account-manage-page {
        height: auto;
        min-height: calc(100vh - 2rem);
    }

    .monitor-shell {
        height: auto;
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .admin-monitor-shell {
        grid-template-columns: 1fr;
    }

    .monitor-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
    }

    .players-panel,
    .zones-panel,
    .map-events-panel {
        grid-column: 1 / -1;
    }

    .player-details-modal {
        width: min(100%, 860px);
        height: auto;
        max-height: calc(100vh - 1rem);
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        overflow: auto;
    }

    .player-details-modal > .player-relationships-section,
    .player-details-modal > .player-timeline-section,
    .player-details-modal > .player-events-section {
        grid-column: 1;
    }

    .map-stage {
        height: 560px;
    }

    .scroll-list {
        max-height: 230px;
    }
}

@media (max-width: 900px) {
    .admin-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .map-form-grid,
    .settings-form-grid,
    .map-admin-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .access-key-modal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .access-key-modal-grid label:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .admin-table-header {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-table-metrics {
        justify-content: flex-start;
    }

    .page-header {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 0.65rem;
    }

    .page-header-link {
        max-width: 100%;
    }

    .page-header-metrics {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .page-header-metric {
        min-width: 0;
        flex: 1 1 4.4rem;
    }

    .monitor-shell {
        min-height: auto;
    }

    .map-stage {
        height: 460px;
    }

    .monitor-panel {
        grid-template-columns: 1fr;
    }

    .players-panel {
        grid-column: auto;
    }

    .field-grid,
    .account-password-grid,
    .account-redeem-control,
    .access-key-modal-grid,
    .admin-form-grid,
    .modal-form-grid,
    .user-modal-toggle-grid,
    .map-form-grid,
    .settings-form-grid,
    .map-editor-summary,
    .map-editor-connection-grid,
    .map-editor-tracking-grid,
    .map-editor-world-row,
    .map-admin-main,
    .zone-save-grid {
        grid-template-columns: 1fr;
    }

    .account-redeem-button {
        width: 100%;
    }

    .redeemed-key-row,
    .user-key-row {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .redeemed-key-row strong,
    .user-key-row strong {
        text-align: left;
    }

    .player-row,
    .catalog-player-row {
        grid-template-columns: 1.25rem minmax(0, 1fr) repeat(3, auto);
    }

    .player-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .baritone-scan-row {
        grid-template-columns: 1fr;
    }

    .baritone-scan-actions {
        grid-column: 1;
        grid-row: auto;
        justify-content: flex-start;
    }

    .player-event-row {
        grid-template-columns: 1fr;
    }

    .zone-player-item {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .zone-player-main {
        grid-template-columns: 1fr;
    }

    .zone-visitor-summary {
        grid-template-columns: 1fr;
    }

    .zone-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .player-event-row time {
        grid-column: 1;
        grid-row: auto;
    }

    .zone-tab-panel .player-event-row {
        height: 4.7rem;
        min-height: 4.7rem;
    }

    .status-pill {
        display: none;
    }

}