.ProfessionalMarketRoot {
    --market-bg: #f3f4f7;
    --market-bg-soft: #e9ebf0;
    --market-card: rgba(255, 255, 255, 0.84);
    --market-card-strong: rgba(255, 255, 255, 0.94);
    --market-border: rgba(43, 52, 69, 0.12);
    --market-shadow: 0 24px 60px rgba(30, 36, 48, 0.12);
    --market-text: #1d2430;
    --market-muted: rgba(29, 36, 48, 0.68);
    --market-accent: #4f6276;
    --market-accent-strong: #344354;
    --market-map-green: #0f7b41;
    --market-map-green-deep: #0a5a30;
    color: var(--market-text);
}

html.dark-theme .ProfessionalMarketRoot {
    --market-bg: #11141a;
    --market-bg-soft: #181d26;
    --market-card: rgba(20, 24, 31, 0.78);
    --market-card-strong: rgba(20, 24, 31, 0.92);
    --market-border: rgba(214, 220, 232, 0.12);
    --market-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
    --market-text: #edf1f8;
    --market-muted: rgba(237, 241, 248, 0.72);
    --market-accent: #7d8fa4;
    --market-accent-strong: #c4cfde;
    --market-map-green: #4bd07e;
    --market-map-green-deep: #2c9d5a;
}

.ProfessionalMarketPage {
    display: grid;
    gap: 18px;
    padding: 18px;
    background: linear-gradient(180deg, var(--market-bg), var(--market-bg-soft));
}

.ProfessionalMarketHero,
.ProfessionalMarketCard {
    border: 1px solid var(--market-border);
    border-radius: 28px;
    background: var(--market-card);
    box-shadow: var(--market-shadow);
    backdrop-filter: blur(14px);
}

.ProfessionalMarketHero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 360px);
    gap: 18px;
    padding: 24px;
    background: linear-gradient(135deg, var(--market-card-strong), var(--market-card));
}

.ProfessionalMarketEyebrow,
.ProfessionalMarketCardEyebrow {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--market-muted);
}

.ProfessionalMarketHero h1,
.ProfessionalMarketCardHeader h2 {
    margin: 10px 0 0;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 0.98;
}

.ProfessionalMarketHero h1 {
    font-size: clamp(2.5rem, 4vw, 4.4rem);
}

.ProfessionalMarketHeroLead,
.ProfessionalMarketCardHeader p,
.ProfessionalMarketMuted,
.ProfessionalMarketOfferCard p,
.ProfessionalMarketStatCard p {
    color: var(--market-muted);
    line-height: 1.65;
}

.ProfessionalMarketHeroActions,
.ProfessionalMarketFilterActions,
.ProfessionalMarketMapControls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ProfessionalMarketButton,
.ProfessionalMarketMapAction {
    min-height: 44px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.ProfessionalMarketButton:hover,
.ProfessionalMarketMapAction:hover {
    transform: translateY(-1px);
}

.ProfessionalMarketButton {
    padding: 0 16px;
    border: 1px solid var(--market-border);
    background: transparent;
    color: var(--market-text);
}

.ProfessionalMarketButton.is-primary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--market-accent), var(--market-accent-strong));
    color: #ffffff;
}

.ProfessionalMarketMapAction {
    min-width: 44px;
    padding: 0 14px;
    border: 1px solid var(--market-border);
    background: var(--market-card-strong);
    color: var(--market-text);
}

.ProfessionalMarketMapAction.is-wide {
    min-width: 76px;
}

.ProfessionalMarketHeroAside,
.ProfessionalMarketStatusBlock,
.ProfessionalMarketMapReadout {
    display: grid;
    gap: 6px;
}

.ProfessionalMarketStatusBlock,
.ProfessionalMarketMapReadout,
.ProfessionalMarketStatCard,
.ProfessionalMarketPanelBlock,
.ProfessionalMarketOfferCard {
    padding: 16px;
    border-radius: 20px;
    border: 1px solid var(--market-border);
    background: var(--market-card-strong);
}

.ProfessionalMarketStatusBlock span,
.ProfessionalMarketMapReadout span,
.ProfessionalMarketStatCard span,
.ProfessionalMarketOfferMeta span {
    font-size: 0.82rem;
    color: var(--market-muted);
}

.ProfessionalMarketHeroLegend {
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--market-card-strong);
    border: 1px solid var(--market-border);
}

.ProfessionalMarketLegendScale {
    display: block;
    width: 100%;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), #dce9d7 26%, #79c58b 58%, #0f7b41 100%);
}

.ProfessionalMarketLegendLabels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    color: var(--market-muted);
}

.ProfessionalMarketLayout {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.ProfessionalMarketSidebar,
.ProfessionalMarketMain,
.ProfessionalMarketCard,
.ProfessionalMarketCardHeader,
.ProfessionalMarketFiltersGrid,
.ProfessionalMarketInsightColumns,
.ProfessionalMarketOfferGrid {
    display: grid;
    gap: 16px;
}

.ProfessionalMarketSidebar {
    position: relative;
    isolation: isolate;
}

.ProfessionalMarketCard {
    position: relative;
    padding: 20px;
}

.ProfessionalMarketFiltersCard {
    z-index: 8;
    overflow: visible;
}

.ProfessionalMarketFocusCard {
    z-index: 1;
}

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

.ProfessionalMarketFiltersGrid {
    grid-template-columns: minmax(0, 1fr);
}

.ProfessionalMarketFiltersGrid label {
    display: grid;
    gap: 8px;
}

.ProfessionalMarketFiltersGrid input,
.ProfessionalMarketDropdownTrigger {
    min-height: 46px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid var(--market-border);
    background: rgba(255, 255, 255, 0.42);
    color: var(--market-text);
}

.ProfessionalMarketFiltersGrid input:focus,
.ProfessionalMarketDropdownTrigger:focus {
    outline: none;
    border-color: rgba(79, 98, 118, 0.46);
    box-shadow: 0 0 0 4px rgba(79, 98, 118, 0.12);
}

html.dark-theme .ProfessionalMarketFiltersGrid input,
html.dark-theme .ProfessionalMarketDropdownTrigger {
    background: rgba(255, 255, 255, 0.04);
}

.ProfessionalMarketDropdown {
    position: relative;
}

.ProfessionalMarketDropdown[data-open="true"],
.ProfessionalMarketAutocomplete:focus-within {
    z-index: 20;
}

.ProfessionalMarketAutocomplete {
    position: relative;
}

.ProfessionalMarketDropdownTrigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    text-align: left;
}

.ProfessionalMarketDropdownTrigger span {
    flex: 1;
}

.ProfessionalMarketDropdownTrigger b {
    font-size: 0.9rem;
    line-height: 1;
    color: var(--market-muted);
    transition: transform 0.18s ease;
}

.ProfessionalMarketDropdown[data-open="true"] .ProfessionalMarketDropdownTrigger {
    border-color: rgba(79, 98, 118, 0.46);
    box-shadow: 0 0 0 4px rgba(79, 98, 118, 0.12);
}

.ProfessionalMarketDropdown[data-open="true"] .ProfessionalMarketDropdownTrigger b {
    transform: rotate(180deg);
}

.ProfessionalMarketDropdownMenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 30;
    display: none;
    gap: 6px;
    padding: 8px;
    border-radius: 18px;
    border: 1px solid var(--market-border);
    background: var(--market-card-strong);
    box-shadow: 0 20px 40px rgba(30, 36, 48, 0.16);
    backdrop-filter: blur(14px);
}

.ProfessionalMarketDropdown[data-open="true"] .ProfessionalMarketDropdownMenu {
    display: grid;
}

.ProfessionalMarketAutocompleteMenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 30;
    display: grid;
    gap: 6px;
    padding: 8px;
    border-radius: 18px;
    border: 1px solid var(--market-border);
    background: var(--market-card-strong);
    box-shadow: 0 20px 40px rgba(30, 36, 48, 0.16);
    backdrop-filter: blur(14px);
}

.ProfessionalMarketAutocompleteMenu[hidden] {
    display: none;
}

.ProfessionalMarketAutocompleteOption,
.ProfessionalMarketAutocompleteEmpty {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--market-text);
    text-align: left;
}

.ProfessionalMarketAutocompleteOption {
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.ProfessionalMarketAutocompleteOption:hover {
    background: rgba(79, 98, 118, 0.08);
    border-color: rgba(79, 98, 118, 0.16);
    transform: translateY(-1px);
}

.ProfessionalMarketAutocompleteOption strong,
.ProfessionalMarketAutocompleteOption small {
    display: block;
}

.ProfessionalMarketAutocompleteOption small,
.ProfessionalMarketAutocompleteEmpty {
    color: var(--market-muted);
}

.ProfessionalMarketDropdownOption {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--market-text);
    cursor: pointer;
    text-align: left;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.ProfessionalMarketDropdownOption:hover {
    background: rgba(79, 98, 118, 0.08);
    border-color: rgba(79, 98, 118, 0.16);
    transform: translateY(-1px);
}

.ProfessionalMarketDropdownOption.is-selected {
    background: rgba(79, 98, 118, 0.12);
    border-color: rgba(79, 98, 118, 0.24);
    color: var(--market-accent-strong);
}

.ProfessionalMarketMapCard {
    overflow: hidden;
}

.ProfessionalMarketMapHeader {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.ProfessionalMarketMapCanvas {
    min-height: 620px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--market-border);
    background: #141922;
}

.ProfessionalMarketStatsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.ProfessionalMarketCategoryGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ProfessionalMarketCategoryHeader {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.ProfessionalMarketCategoryHeader h3 {
    margin: 0;
}

.ProfessionalMarketSelectedZoneGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ProfessionalMarketSelectedZonePanels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.ProfessionalMarketStatCard strong,
.ProfessionalMarketFocusValue {
    font-size: clamp(1.4rem, 2vw, 2rem);
    line-height: 1.05;
}

.ProfessionalMarketStatCard.is-loading {
    min-height: 144px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(113, 129, 150, 0.14), rgba(255, 255, 255, 0.08));
    background-size: 220% 100%;
    animation: market-loading 1.5s linear infinite;
}

.ProfessionalMarketStatCard.is-error {
    background: rgba(176, 42, 42, 0.08);
}

.ProfessionalMarketMetricList {
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.ProfessionalMarketMetricList li,
.ProfessionalMarketOfferMeta,
.ProfessionalMarketOfferFoot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

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

.ProfessionalMarketOfferCard h3 {
    margin: 0;
    font-size: 1.05rem;
}

.ProfessionalMarketOfferLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--market-border);
    background: rgba(79, 98, 118, 0.08);
    color: var(--market-accent-strong);
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.ProfessionalMarketOfferLink:hover {
    transform: translateY(-1px);
    background: rgba(79, 98, 118, 0.14);
    border-color: rgba(79, 98, 118, 0.22);
}

.ProfessionalMarketOfferFlag {
    color: var(--market-accent);
}

.ProfessionalMarketOfferList {
    display: grid;
    gap: 12px;
}

.ProfessionalMarketOfferListSummary,
.ProfessionalMarketOfferActions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.ProfessionalMarketOfferListSummary strong {
    font-size: 1.1rem;
}

.ProfessionalMarketOfferRow {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(240px, 0.95fr) auto;
    gap: 16px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--market-border);
    background: var(--market-card-strong);
}

.ProfessionalMarketOfferRowMain,
.ProfessionalMarketOfferRowDetails {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.ProfessionalMarketOfferRowMain h3 {
    margin: 0;
    font-size: 1.05rem;
}

.ProfessionalMarketOfferRowMain small {
    color: var(--market-muted);
}

.ProfessionalMarketOfferRowDetails > div {
    display: grid;
    gap: 4px;
}

.ProfessionalMarketOfferRowDetails span {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--market-muted);
}

.ProfessionalMarketOfferValueWrap {
    white-space: normal;
    overflow-wrap: anywhere;
}

.ProfessionalMarketOfferRowActions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ProfessionalMarketFocusValue {
    color: var(--market-text);
}

@keyframes market-loading {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

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

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

    .ProfessionalMarketSelectedZoneGrid,
    .ProfessionalMarketSelectedZonePanels {
        grid-template-columns: 1fr;
    }

    .ProfessionalMarketCategoryGrid {
        grid-template-columns: 1fr;
    }

    .ProfessionalMarketOfferRow {
        grid-template-columns: 1fr;
    }

    .ProfessionalMarketOfferRowActions {
        justify-content: flex-start;
    }
}

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

    .ProfessionalMarketMapHeader {
        grid-template-columns: 1fr;
        display: grid;
    }

    .ProfessionalMarketStatsGrid,
    .ProfessionalMarketOfferGrid,
    .ProfessionalMarketInsightColumns {
        grid-template-columns: 1fr;
    }

    .ProfessionalMarketMapCanvas {
        min-height: 460px;
    }
}