body {
   /* background-image: url(https://initiate.alphacoders.com/images/150/cropped-1920-1200-150970.jpg?9619);*/
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* MudMainContent reserves padding-top for a fixed <MudAppBar>; this app
   uses the sticky <L2AppShellHeader /> which occupies layout space itself.
   overflow-x: clip contains full-bleed (100vw) hero overflow on Windows where
   100vw includes the scrollbar gutter; clip (not hidden) preserves sticky. */
.mud-main-content {
    padding-top: 0;
    overflow-x: clip;
}

.l2db-enchant-route-card {
    text-transform: none !important;
    text-align: left !important;
    padding: 10px 14px !important;
    min-width: 220px;
    border-radius: 6px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-left: 4px solid color-mix(in srgb, var(--mud-palette-warning) 30%, transparent) !important;
    transition: transform 120ms ease-out, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.l2db-enchant-route-card.is-selected {
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 60%, var(--mud-palette-lines-default)) !important;
    border-left: 4px solid var(--mud-palette-warning) !important;
    background-color: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mud-palette-warning) 45%, transparent), 0 4px 14px color-mix(in srgb, var(--mud-palette-warning) 22%, transparent) !important;
}

.l2db-enchant-route-card.is-selected .l2db-enchant-route-card__name,
.l2db-enchant-route-card.is-selected .l2db-enchant-route-card__type {
    color: var(--mud-palette-warning) !important;
}

.l2db-enchant-route-card:hover:not(.is-selected) {
    transform: translateY(-1px);
    border-left-color: var(--mud-palette-warning) !important;
    background-color: color-mix(in srgb, var(--mud-palette-warning) 5%, transparent) !important;
}

.l2db-view-toggle .mud-toggle-item.mud-toggle-item-selected,
.l2db-view-toggle .mud-toggle-item.mud-toggle-item-selected .mud-typography,
.l2db-view-toggle .mud-toggle-item.mud-toggle-item-selected .mud-icon-root {
    background-color: var(--mud-palette-warning) !important;
    color: #1a1a1a !important;
    font-weight: 600 !important;
}

.l2db-view-toggle .mud-toggle-item {
    padding-left: 10px;
    padding-right: 10px;
}

.l2db-view-toggle .mud-toggle-item + .mud-toggle-item {
    border-left: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 80%, transparent);
}

.l2db-skill-tab-controls {
    width: 100%;
    gap: 14px !important;
}

.l2db-skill-tab-controls__expand {
    margin-left: 4px;
    padding-left: 14px !important;
    border-left: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 70%, transparent);
    border-radius: 0 !important;
}

.l2db-skill-quickstats .mud-chip.mud-chip-filled.mud-chip-color-primary {
    color: #1a1a1a !important;
    font-weight: 600 !important;
}

.l2db-skill-quickstats .mud-chip.mud-chip-filled.mud-chip-color-primary .mud-chip-content {
    color: #1a1a1a !important;
}

.l2db-skill-enchants-shell {
    gap: 6px !important;
}

.l2db-skill-enchants__route-picker {
    margin-bottom: 4px;
    overflow: visible;
}

.l2db-enchant-route-card {
    position: relative;
    overflow: visible !important;
}

/* Reusable folder/enclosed tab skin — opt in with <MudTabs Class="l2-tabs">. Tabs share a
   baseline; each has top-rounded corners and an open bottom. The active tab is marked with the
   tenant accent (text, border, tinted fill, and an inset top-cap), so it stays distinct from
   both inactive and hover states in dark and light themes. The strip itself has no background.
   !important matches the other MudBlazor skins in this file and guarantees the skin wins
   regardless of MudBlazor stylesheet load order. */
.l2-tabs,
.l2-tabs .mud-tabs-tabbar,
.l2-tabs .mud-tabs-tabbar-inner,
.l2-tabs .mud-tabs-tabbar-wrapper,
.l2-tabs .mud-tabs-tabbar-content,
.l2-tabs .mud-tabs-panels {
    background: transparent !important;
}

.l2-tabs .mud-tabs-tabbar {
    border-bottom: 1px solid var(--l2-color-border-default);
}

.l2-tabs .mud-tabs-tabbar-inner {
    min-height: 0 !important;
}

.l2-tabs .mud-tabs-tabbar-wrapper {
    gap: var(--l2-space-4);
}

.l2-tabs .mud-tab {
    font-family: var(--l2-font-mono);
    font-size: var(--l2-type-size-12);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--l2-color-text-secondary) !important;
    min-height: 38px;
    margin-bottom: -1px;
    padding: var(--l2-space-8) var(--l2-space-16) !important;
    border: 1px solid var(--l2-color-border-default);
    border-bottom: none !important;
    border-radius: var(--l2-radius-8) var(--l2-radius-8) 0 0 !important;
    background-color: var(--l2-color-surface-raised) !important;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.l2-tabs .mud-tab:hover:not(.mud-tab-active) {
    color: var(--l2-color-text-primary) !important;
    background-color: var(--l2-color-surface-overlay) !important;
}

.l2-tabs .mud-tab.mud-tab-active {
    color: var(--l2-color-accent-tenant) !important;
    background-color: var(--l2-color-surface-raised) !important;
    background-image: linear-gradient(0deg, var(--l2-color-accent-tenant-bg-tint), var(--l2-color-accent-tenant-bg-tint)) !important;
    border-color: var(--l2-color-border-strong);
    box-shadow: inset 0 2px 0 var(--l2-color-accent-tenant) !important;
}

.l2-tabs .mud-tab:focus-visible {
    outline: 2px solid var(--l2-color-accent-tenant) !important;
    outline-offset: 2px;
}

.l2-tabs .mud-tab-slider {
    display: none !important;
}

/* L2AppShellHeader popovers — rendered via MudPopoverProvider (portal'd outside the
   header), so scoped CSS from L2AppShellHeader.razor.css can't reach them. These
   rules neutralize MudBlazor's Material elevation + restore the chrome snippet's
   flat surface-overlay + 1px border + 8px radius for the nav-menu popovers and
   tenant chip popover. Tokens resolve via :root in tokens.css. */
.mud-popover.hdr__popover,
.mud-popover.hdr__server-popover {
    box-shadow: none !important;
    background: var(--l2-color-surface-overlay);
    border: 1px solid var(--l2-color-border-default);
    border-radius: var(--l2-radius-8);
    margin-top: var(--l2-space-4);
}

.mud-popover.hdr__popover {
    min-width: 200px;
    padding: var(--l2-space-8);
}

.mud-popover.hdr__server-popover {
    min-width: 280px;
    overflow: hidden;
}

.hdr__popover .mud-list-item,
.hdr__popover .mud-menu-item {
    height: 32px;
    min-height: 32px;
    padding: 0 var(--l2-space-12);
    border-radius: var(--l2-radius-4);
    font-family: var(--l2-font-sans);
    font-size: var(--l2-type-size-14);
    font-weight: 400;
    color: var(--l2-color-text-secondary);
    background: transparent;
    transition: background var(--l2-motion-duration-fast) var(--l2-motion-easing-standard),
                color var(--l2-motion-duration-fast) var(--l2-motion-easing-standard);
}

.hdr__popover .mud-list-item:hover,
.hdr__popover .mud-menu-item:hover,
.hdr__popover .mud-list-item-clickable:hover {
    background: var(--l2-color-surface-raised);
    color: var(--l2-color-text-primary);
}

.hdr__popover .mud-menu-item.hdr__nav-menu-item--current {
    background: var(--l2-color-surface-raised);
    color: var(--l2-color-text-primary);
}

/* MudText override — Typo=… emits typography on a nested .mud-typography element,
   not the outer .mud-list-item. The list-item rule above sets font color/size but
   can't reach <MudText> children; this rule does. Applies to both the simple
   menu-item popover (Codex/Quests) and the rich server-popover via the parent
   .hdr__popover / .hdr__server-popover selectors. */
.hdr__popover .mud-list-item .mud-typography,
.hdr__popover .mud-menu-item .mud-typography,
.hdr__popover .mud-list-item .mud-nav-link-text {
    font-family: var(--l2-font-sans);
    font-size: var(--l2-type-size-14);
    font-weight: 400;
    line-height: 1.4;
    color: inherit;
    letter-spacing: 0;
    margin: 0;
}

.mud-popover.hdr__server-popover .mud-list {
    padding: var(--l2-space-4) 0;
    overflow: hidden;
}

.mud-popover.hdr__server-popover .mud-list-item {
    padding: var(--l2-space-4) var(--l2-space-12);
    min-height: 40px;
    border-radius: var(--l2-radius-4);
    margin: 0;
}

.mud-popover.hdr__server-popover .mud-list-item .mud-list-item-icon {
    min-width: 0;
    margin-right: var(--l2-space-8);
}

.mud-popover.hdr__server-popover .mud-list-item .mud-list-item-text {
    min-width: 0;
}

.hdr__server-popover .mud-list-item .mud-typography-subtitle1 {
    font-family: var(--l2-font-sans);
    font-size: var(--l2-type-size-14);
    font-weight: 500;
    color: var(--l2-color-text-primary);
    line-height: 1.4;
    letter-spacing: 0;
    margin: 0;
}

.hdr__server-popover .mud-list-item .mud-typography-body2 {
    font-family: var(--l2-font-sans);
    font-size: var(--l2-type-size-12);
    font-weight: 400;
    color: var(--l2-color-text-secondary);
    line-height: 1.3;
    letter-spacing: 0;
    margin: 0;
}

/* L2WhatsNewBell popover — rendered via MudPopoverProvider (portal'd outside the
   header), so scoped CSS from L2WhatsNewBell.razor.css can't reach it. Box + sizing
   + item layout must be global; only the bell dot/wave indicator stays scoped. */
.mud-popover.l2-whats-new__popover {
    width: 380px;
    max-width: calc(100vw - var(--l2-space-32));
    box-shadow: none !important;
    background: var(--l2-color-surface-overlay);
    border: 1px solid var(--l2-color-border-default);
    border-radius: var(--l2-radius-12);
    color: var(--l2-color-text-primary);
    overflow: hidden;
}

.l2-whats-new__popover .l2-whats-new__head {
    padding: var(--l2-space-12) var(--l2-space-16);
}

.l2-whats-new__popover .l2-whats-new__heading {
    margin: 0;
    font-family: var(--l2-font-display);
}

.l2-whats-new__popover .l2-whats-new__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
}

.l2-whats-new__popover .l2-whats-new__item + .l2-whats-new__item {
    border-top: 1px solid var(--l2-color-border-default);
}

.l2-whats-new__popover .l2-whats-new__item-link,
.l2-whats-new__popover .l2-whats-new__item-body {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "chip date"
        "title title"
        "summary summary";
    column-gap: var(--l2-space-8);
    row-gap: var(--l2-space-4);
    align-items: center;
    padding: var(--l2-space-12) var(--l2-space-16);
    text-decoration: none;
    color: inherit;
}

.l2-whats-new__popover .l2-whats-new__item-link:hover {
    background-color: var(--l2-color-accent-tenant-bg-tint);
}

.l2-whats-new__popover .l2-whats-new__item.is-new .l2-whats-new__item-link,
.l2-whats-new__popover .l2-whats-new__item.is-new .l2-whats-new__item-body {
    background-color: color-mix(in srgb, var(--l2-color-gold-400) 9%, transparent);
    box-shadow: inset 3px 0 0 0 var(--l2-color-gold-400);
}

.l2-whats-new__popover .l2-whats-new__new-pill {
    display: inline-block;
    margin-right: var(--l2-space-8);
    padding: 0 var(--l2-space-4);
    border-radius: var(--l2-radius-pill);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--l2-color-neutral-950);
    background-color: var(--l2-color-gold-400);
    vertical-align: middle;
}

.l2-whats-new__popover .l2-whats-new__chip {
    grid-area: chip;
    justify-self: start;
    align-self: center;
    padding: var(--l2-space-2) var(--l2-space-8);
    border-radius: var(--l2-radius-pill);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--l2-color-text-on-action);
    background-color: var(--l2-color-info-base);
}

.l2-whats-new__popover .l2-whats-new__chip--feature {
    background-color: var(--l2-color-action-primary);
}

.l2-whats-new__popover .l2-whats-new__chip--improvement {
    background-color: var(--l2-color-success-base);
}

.l2-whats-new__popover .l2-whats-new__chip--data {
    background-color: var(--l2-color-info-base);
}

.l2-whats-new__popover .l2-whats-new__chip--fix {
    background-color: var(--l2-color-warning-base);
}

.l2-whats-new__popover .l2-whats-new__item-title {
    grid-area: title;
    margin-top: var(--l2-space-2);
    font-weight: 600;
    line-height: 1.3;
}

.l2-whats-new__popover .l2-whats-new__date {
    grid-area: date;
    justify-self: start;
    font-size: 0.75rem;
    color: var(--l2-color-text-muted);
}

.l2-whats-new__popover .l2-whats-new__summary {
    grid-area: summary;
    margin-top: var(--l2-space-4);
    font-size: 0.8125rem;
    color: var(--l2-color-text-secondary);
}

.l2-whats-new__popover .l2-whats-new__foot {
    padding: var(--l2-space-12) var(--l2-space-16);
    text-align: right;
}

.l2-whats-new__popover .l2-whats-new__all {
    color: var(--l2-color-text-link);
    font-weight: 600;
}

.l2db-enchant-route-card.is-selected::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 10px;
    height: 10px;
    transform: translateX(-50%) rotate(45deg);
    background-color: color-mix(in srgb, var(--mud-palette-warning) 35%, var(--mud-palette-surface));
    border-right: 1px solid var(--mud-palette-warning);
    border-bottom: 1px solid var(--mud-palette-warning);
    pointer-events: none;
    z-index: 1;
}


/* Autocomplete primitives — rendered via MudButton; the root <a> emitted by
   MudBlazor is outside our scoped CSS reach (b-xxx anchor doesn't apply when
   the component's template root is a child component). Styles live here
   next to the MudPopover precedent above. */

.mud-button-root.l2-autocomplete-row,
.mud-button-root.l2-autocomplete-group__overflow,
.mud-button-root.l2-autocomplete-fallback-row {
    min-width: 0;
    margin: 0;
    width: 100%;
    text-transform: none;
    font-family: inherit;
    font-weight: normal;
    letter-spacing: normal;
    text-decoration: none;
    border-radius: var(--l2-radius-4);
    background-color: transparent;
    color: var(--l2-color-text-primary);
}

.mud-button-root.l2-autocomplete-row:hover,
.mud-button-root.l2-autocomplete-group__overflow:hover,
.mud-button-root.l2-autocomplete-fallback-row:hover {
    background-color: var(--l2-color-surface-raised);
}

.mud-button-root.l2-autocomplete-row {
    height: 40px;
    padding: 0 var(--l2-space-12);
    transition: background var(--l2-motion-duration-fast) var(--l2-motion-easing-standard);
}

.mud-button-root.l2-autocomplete-row .mud-button-label {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--l2-space-12);
    width: 100%;
    text-align: left;
}

.mud-button-root.l2-autocomplete-row--no-icon .mud-button-label {
    grid-template-columns: 1fr auto;
}

.mud-button-root.l2-autocomplete-row--no-chip .mud-button-label {
    grid-template-columns: auto 1fr;
}

.mud-button-root.l2-autocomplete-row--no-chip.l2-autocomplete-row--no-icon .mud-button-label {
    grid-template-columns: 1fr;
}

.mud-button-root.l2-autocomplete-row--selected,
.mud-button-root.l2-autocomplete-row--selected:hover {
    background-color: var(--l2-color-accent-tenant-bg-strong);
}

.l2-autocomplete-row__icon {
    width: var(--l2-size-icon-sm);
    height: var(--l2-size-icon-sm);
    border-radius: var(--l2-radius-4);
    background: var(--l2-color-surface-sunken);
    border: 1px solid var(--l2-color-border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.l2-autocomplete-row__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.l2-autocomplete-row__name {
    font-size: var(--l2-type-size-14);
    color: var(--l2-color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l2-autocomplete-row__name-stack {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.l2-autocomplete-row__subtitle {
    font-size: var(--l2-type-size-12);
    color: var(--l2-color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

.mud-button-root.l2-autocomplete-row--with-subtitle {
    height: auto;
    min-height: 56px;
    padding-top: var(--l2-space-8);
    padding-bottom: var(--l2-space-8);
}

.l2-autocomplete-row__chip-stack {
    display: inline-flex;
    align-items: center;
    gap: var(--l2-space-4);
}

.l2-autocomplete-row__chip {
    font-family: var(--l2-font-mono);
    font-size: var(--l2-type-size-12);
    color: var(--l2-color-text-muted);
    letter-spacing: 0.04em;
}

@media (max-width: 599.98px) {
    .mud-button-root.l2-autocomplete-row .mud-button-label {
        grid-template-columns: auto 1fr;
    }

    .mud-button-root.l2-autocomplete-row--no-icon .mud-button-label {
        grid-template-columns: 1fr;
    }
}

.mud-button-root.l2-autocomplete-group__overflow,
.mud-button-root.l2-autocomplete-fallback-row {
    height: 32px;
    padding: 0 var(--l2-space-12);
    font-size: var(--l2-type-size-12);
    color: var(--l2-color-accent-tenant-strong);
    letter-spacing: 0.02em;
    transition: background var(--l2-motion-duration-fast) var(--l2-motion-easing-standard);
}

.mud-button-root.l2-autocomplete-group__overflow .mud-button-label,
.mud-button-root.l2-autocomplete-fallback-row .mud-button-label {
    justify-content: flex-start;
    text-align: left;
}

.mud-button-root.l2-autocomplete-group__overflow--selected,
.mud-button-root.l2-autocomplete-group__overflow--selected:hover,
.mud-button-root.l2-autocomplete-fallback-row--selected,
.mud-button-root.l2-autocomplete-fallback-row--selected:hover {
    background-color: var(--l2-color-accent-tenant-bg-strong);
}

.l2-autocomplete-fallback-row em {
    font-style: normal;
    font-weight: 500;
    color: var(--l2-color-text-primary);
}

/* L2TriStateCheckbox + L2FilterCheckbox — same scoping constraint as
   autocomplete primitives: MudButton root sits outside b-xxx scope, so styles
   live here. Both share base chrome (padding, typography, hover, layout); only
   the indicator-state cascade selectors differ between data-tri-state="…" and
   data-checked="…". */

.mud-button-root.l2-tri-state,
.mud-button-root.l2-filter-checkbox {
    min-width: 0;
    margin: 0;
    width: 100%;
    padding: var(--l2-space-4) var(--l2-space-8);
    text-transform: none;
    font-family: inherit;
    font-weight: normal;
    font-size: var(--l2-type-size-13);
    letter-spacing: 0;
    text-decoration: none;
    border-radius: var(--l2-radius-4);
    background-color: transparent;
    color: var(--l2-color-text-secondary);
    justify-content: flex-start;
}

.mud-button-root.l2-tri-state:hover,
.mud-button-root.l2-filter-checkbox:hover {
    background-color: var(--l2-color-surface-raised);
}

.mud-button-root.l2-tri-state .mud-button-label,
.mud-button-root.l2-filter-checkbox .mud-button-label {
    display: inline-flex;
    align-items: center;
    gap: var(--l2-space-8);
    width: 100%;
}

.l2-tri-state__indicator,
.l2-filter-checkbox__indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--l2-size-icon-xs);
    height: var(--l2-size-icon-xs);
    border: 1px solid var(--l2-color-border-strong);
    border-radius: var(--l2-radius-4);
    background: var(--l2-color-surface-overlay);
    color: transparent;
    font-size: var(--l2-type-size-12);
    font-weight: var(--l2-type-weight-bold);
    line-height: 1;
    flex-shrink: 0;
}

.l2-tri-state[data-tri-state="yes"] .l2-tri-state__indicator,
.l2-filter-checkbox[data-checked="true"] .l2-filter-checkbox__indicator {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.l2-tri-state[data-tri-state="no"] .l2-tri-state__indicator {
    background: var(--l2-color-state-danger);
    border-color: var(--l2-color-state-danger);
    color: var(--l2-color-neutral-50);
}

.l2-tri-state__label,
.l2-filter-checkbox__label {
    flex: 1;
    text-align: left;
}

.l2-tri-state__count,
.l2-filter-checkbox__count {
    color: var(--l2-color-text-muted);
    font-variant-numeric: tabular-nums;
    font-size: var(--l2-type-size-12);
    margin-left: auto;
}

/* L2StatPrimary now wraps MudGrid in a plain <div> root (scoped CSS in the
   .razor.css reaches it). L2StatGrid root is still <MudGrid>, and both
   primitives' cells render as <MudItem>; cells sit outside the .razor file's
   b-xxx scope, so cell styles live here per the scoped-CSS-vs-MudBlazor-root rule. */

.mud-grid-item.l2-stat-primary__cell {
    display: flex;
    flex-direction: column;
    gap: var(--l2-space-2);
    min-width: 0;
}

.mud-grid-item.l2-stat-grid__cell {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--l2-space-8);
    padding: var(--l2-space-8) var(--l2-space-12);
    border-bottom: 1px solid color-mix(in srgb, var(--l2-color-border-default) 55%, transparent);
    min-width: 0;
}

.mud-grid-item.l2-npc-stat-cell {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--l2-space-4);
    padding: var(--l2-space-4) var(--l2-space-4);
    border-bottom: 1px solid color-mix(in srgb, var(--l2-color-border-default) 45%, transparent);
    min-width: 0;
}

/* L2HeroQuickStatsCell root is <MudItem> — same scoped-CSS-vs-MudBlazor-root
   constraint as L2StatPrimary/L2StatGrid cells above. Chassis (column flex,
   padding, 56px height, divider) lives here; the inner value/label spans are
   styled in the cell's own .razor.css since they DO carry the component's
   b-xxx scope. */

/* Quick-stats: a 2-column grid of compact label/value rows on phones, expanding to a single 8-column
   strip of value-over-label tiles on desktop. Dividers are the 1px grid gap over a border-color backing
   (cells carry the surface colour), so lines sit between cells and never crowd the text. 2 and 8 both
   divide the 8 stats, so the grid is always full — no empty-cell artifacts. CSS Grid + one breakpoint
   because MudGrid's 12 integer flex columns can't express 8 even columns. */
.mud-grid.l2-hero-quickstats__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--l2-color-border-default);
}

/* Global (not Details.razor.css scoped): the hero centre column is a <MudItem>, and scoped b-xxx CSS
   can't reach a MudBlazor component root. min-width:0 lets the flex item shrink to the viewport so its
   contents (name, description, stat rail) never force horizontal page overflow on mobile. */
.l2-entity-hero__main {
    min-width: 0;
}

.mud-grid-item.l2-hero-quickstats__cell {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--l2-space-4);
    min-width: 0;
    max-width: none;
    padding: var(--l2-space-4);
    background: var(--l2-color-surface-raised);
}

.mud-grid-item.l2-hero-quickstats__cell .l2-hero-quickstats__value {
    white-space: nowrap;
    font-size: var(--l2-type-size-14);
}

.l2-hero-quickstats__cell .l2-hero-quickstats__label {
    white-space: nowrap;
    order: -1;
}

@media (min-width: 960px) {
    .mud-grid.l2-hero-quickstats__grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
    }

    .mud-grid-item.l2-hero-quickstats__cell {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0;
        padding: 0 var(--l2-space-12);
        min-height: 44px;
    }

    .mud-grid-item.l2-hero-quickstats__cell .l2-hero-quickstats__value {
        font-size: var(--l2-type-size-18);
    }

    .l2-hero-quickstats__cell .l2-hero-quickstats__label {
        order: 0;
    }
}

/* MudGrid's flex + negative-margin model doesn't fill width inside MudCollapse's flex/overflow
   wrapper; use CSS grid like .l2-hero-quickstats__grid does. */
.mud-grid.l2-hero-stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--l2-space-12);
    width: 100%;
    margin: 0;
}

.mud-grid-item.l2-hero-stats-grid__cell {
    max-width: none;
    flex-basis: auto;
    padding: 0;
}

@media (min-width: 600px) {
    .mud-grid.l2-hero-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .mud-grid.l2-hero-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.l2-stat-group {
    background: var(--l2-color-surface-raised);
    border-radius: var(--l2-radius-8);
    padding: var(--l2-space-16);
    margin: 0;
}

.l2-stat-group.l2-stat-group--fill {
    height: 100%;
    box-sizing: border-box;
}

.l2-stat-group__heading {
    display: flex;
    align-items: center;
    gap: var(--l2-space-8);
    font-family: var(--l2-font-display, var(--l2-font-display-fallback));
    font-size: var(--l2-type-size-14);
    font-weight: 600;
    color: var(--l2-color-text-primary);
    margin: 0 0 var(--l2-space-12) 0;
    padding-bottom: var(--l2-space-8);
    border-bottom: 1px solid var(--l2-color-border-default);
    text-transform: none;
    letter-spacing: 0;
}

.l2-stat-group__icon {
    color: var(--l2-color-accent-tenant);
    font-size: var(--l2-type-size-14);
    display: inline-flex;
    align-items: center;
}

.l2-stat-group__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.l2-stat-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--l2-space-8);
    padding: var(--l2-space-4) 0;
    min-height: 24px;
}

.l2-stat-row__label {
    font-family: var(--l2-font-mono);
    font-size: var(--l2-type-size-12);
    color: var(--l2-color-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.l2-stat-row__value {
    font-size: var(--l2-type-size-14);
    font-weight: 600;
    color: var(--l2-color-text-primary);
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.l2-stat-row__value--accent { color: var(--l2-color-accent-tenant-strong); }
.l2-stat-row__value--muted { color: var(--l2-color-text-muted); font-weight: 400; }

.l2-stat-requires {
    display: flex;
    align-items: center;
    gap: var(--l2-space-12);
    background: var(--l2-color-surface-raised);
    border-radius: var(--l2-radius-8);
    padding: var(--l2-space-12) var(--l2-space-16);
}

.l2-stat-requires__icon {
    color: var(--l2-color-accent-tenant);
    font-size: var(--l2-type-size-16);
    flex-shrink: 0;
}

.l2-stat-requires__label {
    font-family: var(--l2-font-mono);
    font-size: var(--l2-type-size-12);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--l2-color-text-muted);
    flex-shrink: 0;
}

.l2-stat-requires__body {
    font-size: var(--l2-type-size-14);
    color: var(--l2-color-text-primary);
}

.l2-row-disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--l2-color-text-muted);
}

.l2-row-disclosure__icon {
    font-size: var(--l2-type-size-22);
    transition: transform 140ms ease, color 140ms ease;
}

.l2-row-disclosure.is-open .l2-row-disclosure__icon {
    transform: rotate(180deg);
    color: var(--l2-color-accent-tenant);
}

tr.l2-row[role="button"] {
    cursor: pointer;
    transition: background-color 120ms ease;
}

tr.l2-row[role="button"]:hover {
    background: var(--l2-color-surface-raised);
}

tr.l2-row[role="button"]:hover .l2-row-disclosure {
    color: var(--l2-color-text-primary);
}

tr.l2-row[role="button"]:hover .l2-row-disclosure__icon {
    color: var(--l2-color-accent-tenant);
}

tr.l2-row[role="button"]:focus-visible {
    outline: 2px solid var(--l2-color-accent-tenant);
    outline-offset: -2px;
}

tr.l2-row.is-expanded { background: var(--l2-color-surface-raised); }

tr.l2-row-effects { display: none; }
tr.l2-row-effects.is-open { display: table-row; }

.l2-row-effects__cell {
    background: var(--l2-color-surface-raised);
    padding: var(--l2-space-12) var(--l2-space-16) !important;
    border-top: 1px dashed var(--l2-color-border-default);
}

.l2-row-effects__panel { display: block; }

.l2-effects-list {
    list-style: none;
    margin: 0;
    padding: 0;
    /* MudBlazor-first exception: <ul>/<li> semantics required for screen-reader list nav; MudGrid renders <div>, would break list semantics. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--l2-space-4) var(--l2-space-16);
}

@media (max-width: 600px) {
    /* Same <ul>/<li> exception as above — MudGrid xs/sm props can't apply to a semantic list root. */
    .l2-effects-list { grid-template-columns: 1fr; }
}

.l2-effect {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--l2-space-12);
    padding: var(--l2-space-4) 0;
    border-bottom: 1px dotted var(--l2-color-border-default);
}

.l2-effect__name {
    font-family: var(--l2-font-mono);
    font-size: var(--l2-type-size-12);
    color: var(--l2-color-text-muted);
    letter-spacing: 0.06em;
}

.l2-effect__value {
    font-size: var(--l2-type-size-14);
    color: var(--l2-color-text-primary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.l2-level-delta-chip-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--l2-space-4);
    align-items: center;
}

.l2-level-delta-chip-row__baseline {
    font-family: var(--l2-font-mono);
    font-size: var(--l2-type-size-12);
    color: var(--l2-color-text-muted);
    letter-spacing: 0.04em;
}

.l2-level-delta-chip {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px var(--l2-space-8);
    border-radius: var(--l2-radius-pill);
    font-family: var(--l2-font-mono);
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    border: 1px solid var(--l2-color-border-default);
    background: transparent;
    color: var(--l2-color-text-secondary);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.l2-level-delta-chip--positive {
    color: var(--l2-color-state-success);
    border-color: var(--l2-color-state-success);
}

.l2-level-delta-chip--negative {
    color: var(--l2-color-state-danger);
    border-color: var(--l2-color-state-danger);
}

.l2-level-delta-chip--threshold {
    color: var(--l2-color-state-warning);
    border-color: var(--l2-color-state-warning);
}

.l2-level-delta-chip--milestone {
    color: var(--l2-color-state-milestone);
    border-color: var(--l2-color-state-milestone);
}

.l2-level-delta-chip--neutral {
    color: var(--l2-color-text-muted);
    border-color: var(--l2-color-border-default);
}

.l2-level-delta-chip--toggle {
    cursor: pointer;
    font: inherit;
    font-family: var(--l2-font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    appearance: none;
    -webkit-appearance: none;
}

.l2-level-delta-chip--toggle:hover {
    color: var(--l2-color-text-primary);
    border-color: var(--l2-color-text-muted);
}

.l2-level-delta-chip--toggle:focus-visible {
    outline: 2px solid var(--l2-color-accent-tenant);
    outline-offset: 1px;
}

.l2-enchant-route-tabs .mud-tabs-tabbar {
    background: transparent;
    border-bottom: 1px solid var(--l2-color-border-default);
}

.l2-enchant-route-tabs .mud-tabs-tabbar-inner {
    min-height: 40px;
    gap: var(--l2-space-4);
}

.l2-enchant-route-tabs .mud-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--l2-space-4);
    height: 40px;
    min-height: 40px;
    min-width: 0;
    width: auto;
    padding: 0 var(--l2-space-16);
    font-family: var(--l2-font-mono);
    font-size: var(--l2-type-size-12);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--l2-color-text-muted);
    background: transparent;
}

.l2-enchant-route-tabs .mud-tab:hover {
    color: var(--l2-color-text-primary);
}

.l2-enchant-route-tabs .mud-tab.mud-tab-active {
    color: var(--l2-color-accent-tenant);
}

.l2-enchant-route-tabs .mud-tab-slider {
    background: var(--l2-color-accent-tenant);
    height: 2px;
}

.l2-icon-frame.l2-enchant-route-tabs__tab-icon {
    border: none;
    border-radius: 0;
    background: none;
    flex-shrink: 0;
}

.l2-enchant-route-tabs__body {
    padding-top: var(--l2-space-16);
    display: flex;
    flex-direction: column;
    gap: var(--l2-space-8);
}

/* Reusable: add l2-tab-surface to a tab-panel body to dock its bordered table flush under the
   tab bar — the tab bar's 1px bottom border becomes the table's top edge (flat top, no rounded
   corners). The gap above the table is removed per-instance with MudBlazor pt utilities. */
.l2-tab-surface .l2-skill-levels-table-wrapper {
    border-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Summon matrix has no mobile card fallback (its box shows on every viewport), so scope the
   flush-top dock to >=600px to keep the rounded top + gap on mobile like the level cards. */
@media (min-width: 600px) {
    .l2-tab-surface .l2-summon-matrix__scroll {
        border-top: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }
}

.l2-enchant-route-tabs__omitted {
    font-size: var(--l2-type-size-12);
    color: var(--l2-color-text-muted);
    font-style: italic;
}

.l2-skill-name-link {
    color: var(--l2-color-text-primary);
    font-weight: 600;
    font-size: var(--l2-type-size-14);
    text-decoration: none;
    transition: color var(--l2-motion-duration-fast) var(--l2-motion-easing-standard);
}

.l2-skill-name-link:hover {
    color: var(--l2-color-text-link);
}

.l2-class-cell--single,
.l2-class-cell--universal {
    display: inline;
    color: var(--l2-color-text-secondary);
    font-size: var(--l2-type-size-13);
}

.l2-class-cell--universal {
    font-style: italic;
    color: var(--l2-color-text-muted);
}

.l2-class-cell--multi {
    display: inline-block;
    position: relative;
}

.l2-class-cell--multi > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--l2-space-4);
    color: var(--l2-color-text-secondary);
    font-size: var(--l2-type-size-13);
    user-select: none;
}

.l2-class-cell--multi > summary::-webkit-details-marker { display: none; }
.l2-class-cell--multi > summary::marker { content: ""; }
.l2-class-cell--multi > summary:hover { color: var(--l2-color-text-primary); }
.l2-class-cell--multi[open] > summary { color: var(--l2-color-text-link); }

.l2-class-cell__more {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 var(--l2-space-4);
    background: var(--l2-color-cobalt-700);
    color: var(--l2-color-cobalt-200);
    font-family: var(--l2-font-mono);
    font-size: var(--l2-type-size-12);
    font-variant-numeric: tabular-nums;
    border-radius: 2px;
    letter-spacing: 0;
}

.l2-class-cell--multi:hover > summary .l2-class-cell__more {
    background: var(--l2-color-cobalt-600);
}

.l2-class-cell__popover {
    position: absolute;
    top: calc(100% + var(--l2-space-4));
    left: 0;
    min-width: 180px;
    max-width: 240px;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: var(--l2-space-8);
    list-style: none;
    background: var(--l2-color-surface-overlay);
    border: 1px solid var(--l2-color-border-default);
    border-radius: var(--l2-radius-4);
    z-index: 35;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.32);
}

.l2-class-cell__popover li {
    font-family: var(--l2-font-mono);
    font-size: var(--l2-type-size-13);
    color: var(--l2-color-text-secondary);
    padding: var(--l2-space-4) 6px;
    line-height: 1.4;
}

.l2-class-cell__popover li + li {
    border-top: 1px solid var(--l2-color-border-default);
}

.l2-skill-type-chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--l2-chip-padding-x);
    border: 1px solid currentColor;
    background: transparent;
    border-radius: var(--l2-chip-radius);
    font-family: var(--l2-font-mono);
    font-size: var(--l2-chip-font-size);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    font-variant-numeric: normal;
}

.l2-element-chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--l2-chip-padding-x);
    border-radius: var(--l2-chip-radius);
    font-family: var(--l2-font-mono);
    font-size: var(--l2-chip-font-size);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    font-variant-numeric: normal;
    color: var(--l2-color-text-on-action);
}

.l2-skill-type-chip--active  {
    background: var(--l2-color-skill-active);
    color: var(--l2-color-text-on-action);
    border-color: var(--l2-color-skill-active);
}
.l2-skill-type-chip--passive {
    background: transparent;
    color: var(--l2-color-text-secondary);
    border-color: var(--l2-color-skill-passive);
}
.l2-skill-type-chip--toggle  {
    background: var(--l2-color-skill-toggle);
    color: var(--l2-color-text-inverse);
    border-color: var(--l2-color-skill-toggle);
}
.l2-skill-type-chip--buff    { color: var(--l2-color-state-buff); }
.l2-skill-type-chip--debuff  { color: var(--l2-color-state-debuff); }

.l2-skill-cast-chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--l2-chip-padding-x);
    border: 1px solid color-mix(in srgb, var(--l2-cast-hue) 55%, transparent);
    background: color-mix(in srgb, var(--l2-cast-hue) 14%, transparent);
    color: color-mix(in srgb, var(--l2-cast-hue) 45%, var(--l2-color-text-primary));
    border-radius: var(--l2-chip-radius);
    font-family: var(--l2-font-mono);
    font-size: var(--l2-chip-font-size);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    font-variant-numeric: normal;
}

.l2-skill-cast-chip--physical  { --l2-cast-hue: var(--l2-color-warning-base); }
.l2-skill-cast-chip--magical   { --l2-cast-hue: var(--l2-color-cobalt-400); }
.l2-skill-cast-chip--dancesong { --l2-cast-hue: var(--l2-color-milestone-base); }
.l2-skill-cast-chip--other     { --l2-cast-hue: var(--l2-color-neutral-400); }

.l2-element-chip--fire  { background: var(--l2-color-element-fire); }
.l2-element-chip--water { background: var(--l2-color-element-water); }
.l2-element-chip--wind  { background: var(--l2-color-element-wind); }
.l2-element-chip--earth { background: var(--l2-color-element-earth); color: var(--l2-color-neutral-50); }
.l2-element-chip--holy  { background: var(--l2-color-element-holy);  color: var(--l2-color-text-inverse); }
.l2-element-chip--unholy { background: var(--l2-color-element-unholy); color: var(--l2-color-neutral-50); }
.l2-element-chip--none  {
    background: transparent;
    color: var(--l2-color-text-muted);
    font-size: var(--l2-type-size-14);
}

.l2-element-cell--none {
    color: var(--l2-color-text-muted);
    font-size: var(--l2-type-size-14);
}

.l2-cell--num--muted {
    color: var(--l2-color-text-muted);
}

/* MudTabs composing-items override — Class="l2-item-composing__tabs" lands on
   the MudTabs render-tree root, so Details.razor.css's b-xxx scope can't reach
   any inner .mud-tab / .mud-tab-slider / .mud-tabs-tabbar element. Same
   scoped-CSS-can't-reach-MudBlazor-primitive pattern as the autocomplete and
   tri-state blocks above. Mockup parity target: docs/mockups/03-items-detail.html
   .ci-tab-strip / .ci-tab rules (mono uppercase 12px / 0.12em, transparent
   strip background with bottom border, accent-tenant 2px underline on active).
   MudBlazor v9 class names: `.mud-tabs-tabbar` (the strip) + `.mud-tabs-tabbar-inner`
   (the flex container) — NOT `.mud-tabs-toolbar` (that selector doesn't exist
   in v9 and earlier overrides targeting it were dead code). Defaults being
   overridden (verified against MudBlazor.min.css): tabbar `background-color:
   var(--mud-palette-surface)`, tabbar-inner `min-height:48px`, tab
   `padding:6px 12px; min-height:48px; font-weight:500; width:100%`. */

.l2-item-composing__tabs .mud-tabs-tabbar {
    background: transparent;
    border-bottom: 1px solid var(--l2-color-border-default);
}

.l2-item-composing__tabs .mud-tabs-tabbar-inner {
    min-height: 36px;
    gap: var(--l2-space-24);
}

.l2-item-composing__tabs .mud-tab {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: var(--l2-font-mono);
    font-size: var(--l2-type-size-12);
    font-weight: 400;
    color: var(--l2-color-text-muted);
    min-height: 36px;
    min-width: 0;
    width: auto;
    padding: 0 4px;
    background: transparent;
}

.l2-item-composing__tabs .mud-tab:hover {
    color: var(--l2-color-text-secondary);
}

.l2-item-composing__tabs .mud-tab.mud-tab-active {
    color: var(--l2-color-text-primary);
}

.l2-item-composing__tabs .mud-tab-slider {
    background: var(--l2-color-accent-tenant);
    height: 2px;
}

/* Global: each component carries its own b-xxx scope, so this cross-scope :has() can't live in scoped CSS. */
.l2-table-container:has(+ .l2-table-expander-footer) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* === Dialog primitive (L2Dialog) ===
   L2Dialog wraps <MudDialog> with empty TitleContent and DialogActions; our chassis
   (header/body/footer/CTA) renders inside DialogContent. MudBlazor's stock chrome on
   .mud-dialog + .mud-dialog-content is neutralised via the .l2-dialog-host /
   .l2-dialog-content-host double-class selectors so our chassis takes the surface.
   Per stored memory `scoped CSS`, these rules cannot live in scoped .razor.css —
   MudDialog renders content through the MudDialogProvider portal and the b-xxx
   scope attribute never reaches our inner DOM. */
.mud-dialog.l2-dialog-host {
    background: transparent;
    border: 0;
    border-radius: var(--l2-radius-12);
    padding: 0;
    box-shadow: none;
    overflow: visible;
}

.mud-dialog.l2-dialog-host .l2-dialog-content-host {
    padding: 0;
    overflow: visible;
}

.l2-dialog {
    background: var(--l2-color-surface-raised);
    border: 1px solid var(--l2-color-border-strong);
    border-radius: var(--l2-radius-12);
    width: min(560px, 100%);
    max-height: min(90vh, calc(100vh - 32px));
    min-height: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.l2-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--l2-space-12);
    padding: var(--l2-space-16);
    border-bottom: 1px solid var(--l2-color-border-default);
}

.l2-dialog__title {
    margin: 0;
    font-family: var(--l2-font-display);
    font-size: var(--l2-type-size-18);
    font-weight: 600;
    line-height: 1.3;
    color: var(--l2-color-text-primary);
}

.l2-dialog__close {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--l2-color-border-default);
    border-radius: var(--l2-radius-pill);
    color: var(--l2-color-text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition:
        border-color var(--l2-motion-duration-base) ease,
        color var(--l2-motion-duration-base) ease;
}

.l2-dialog__close:hover {
    color: var(--l2-color-text-primary);
    border-color: var(--l2-color-cobalt-400);
}

.l2-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--l2-space-16);
}

.l2-dialog__footer {
    padding: var(--l2-space-12) var(--l2-space-16);
    border-top: 1px solid var(--l2-color-border-default);
    display: flex;
    justify-content: flex-end;
}

.mud-link.l2-dialog__cta {
    display: inline-block;
    background: transparent;
    border: none;
    color: var(--l2-color-cobalt-300);
    font-family: var(--l2-font-body);
    font-size: var(--l2-type-size-13);
    cursor: pointer;
    padding: var(--l2-space-4) 0;
    text-decoration: none;
}

.mud-link.l2-dialog__cta:hover {
    color: var(--l2-color-accent-tenant);
    text-decoration: underline;
}

/* === Drop table inside L2Dialog body (used by L2NpcDropsDialog) === */
.l2-dialog-droptable {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--l2-type-size-13);
}

.l2-dialog-droptable th,
.l2-dialog-droptable td {
    padding: var(--l2-space-8) var(--l2-space-12);
    text-align: left;
    border-bottom: 1px solid var(--l2-color-border-default);
}

.l2-dialog-droptable thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--l2-color-surface-raised);
    font-size: var(--l2-type-size-12);
    font-family: var(--l2-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--l2-color-text-muted);
    font-weight: 400;
    border-bottom-width: 1px;
}

.l2-dialog-droptable th.col-num,
.l2-dialog-droptable td.col-num {
    text-align: right;
    white-space: nowrap;
}

.l2-dialog-droptable td.col-num {
    font-family: var(--l2-font-mono);
    color: var(--l2-color-text-secondary);
}

.l2-dialog-droptable td:first-child {
    color: var(--l2-color-text-primary);
}

.l2-dialog-droptable__item {
    display: inline-flex;
    align-items: center;
    gap: var(--l2-space-8);
    color: inherit;
    text-decoration: none;
}

.l2-dialog-droptable__name {
    color: var(--l2-color-text-link);
}

.l2-dialog-droptable__item:hover .l2-dialog-droptable__name {
    color: var(--l2-color-accent-tenant);
    text-decoration: underline;
}

.l2-dialog-droptable td:first-child a {
    color: var(--l2-color-text-link);
    text-decoration: none;
}

.l2-dialog-droptable td:first-child a:hover {
    color: var(--l2-color-accent-tenant);
    text-decoration: underline;
}

.l2-dialog-droptable tbody tr:last-child td {
    border-bottom: 0;
}

.l2-npc-drops-dialog__empty {
    margin: 0;
    padding: var(--l2-space-12) 0;
    color: var(--l2-color-text-muted);
    font-family: var(--l2-font-body);
    font-size: var(--l2-type-size-13);
    text-align: center;
}

/* === Location dialog map frame === */
.l2-npc-location-dialog__map-frame {
    width: 100%;
    min-width: 400px;
    max-width: 720px;
    overflow: hidden;
    border-radius: var(--l2-radius-6);
}