/*
 * 功能模块：V1 表现形式与交互增强样式。
 * 用途和目标：集中承载四种表现形式、多选开关、标签面板、缩放控件、传统图例和 AI 教程样式。
 * 主要逻辑：覆盖旧控件的局部布局，不改动基础色彩、排版和响应式框架。
 * 注意事项：本文件应在 styles.css 后加载；删除本文件可低成本回退视觉增强。
 * 与其他模块的交互关系：index.html 提供结构，app.js 切换状态类，SVG 渲染器使用标签和符号类。
 */

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

/*
 * 功能模块：地图数据源和级联行政区选择器。
 * 用途和目标：在紧凑侧栏内清楚区分数据源、上级筛选、最终制图单元与地图展示范围。
 * 主要逻辑：弹层脱离文档流保证面板高度稳定；省市县使用低饱和层级色和文字前缀双重区分。
 * 注意事项：候选长列表限制高度并内部滚动；移动端改为单列，所有文字允许收缩但不互相遮挡。
 * 与其他模块的交互关系：hierarchy_selector_view 只输出语义类名，本模块不依赖地图渲染或业务状态。
 */
.map_source_picker,
.cascade_field {
    position: relative;
}

.map_source_trigger,
.cascade_trigger {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 10px;
    color: var(--ink);
    background: #fff;
    border: 1px solid #d7dfdb;
    border-radius: 6px;
    text-align: left;
}

.map_source_trigger:hover,
.map_source_trigger[aria-expanded="true"],
.cascade_trigger:hover,
.cascade_trigger[aria-expanded="true"] {
    border-color: #839b91;
    box-shadow: 0 0 0 3px rgba(59, 111, 88, 0.08);
}

.map_source_trigger > span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.map_source_trigger strong,
.cascade_trigger span {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map_source_trigger small,
.cascade_field_header small {
    color: #8a9490;
    font-size: 10px;
    font-weight: 500;
}

.map_source_trigger i,
.cascade_trigger i {
    color: #76837e;
    font-size: 0;
    font-style: normal;
}

.map_source_trigger i::before,
.cascade_trigger i::before {
    content: "⌄";
    font-size: 13px;
}

.map_source_popover,
.cascade_popover {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    padding: 8px;
    background: #fff;
    border: 1px solid #d5ded9;
    border-radius: 7px;
    box-shadow: 0 14px 36px rgba(28, 42, 36, 0.16);
}

.map_source_group + .map_source_group {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #edf1ef;
}

.map_source_group_label {
    margin: 0 0 5px 4px;
    color: #7e8984;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.map_source_option {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: 5px;
    text-align: left;
}

.map_source_option:hover:not(:disabled),
.map_source_option.is_active {
    background: #eef5f1;
}

.map_source_option > span {
    display: grid;
    gap: 2px;
}

.map_source_option strong {
    font-size: 12px;
}

.map_source_option small,
.map_source_option em {
    color: #909995;
    font-size: 10px;
    font-style: normal;
}

.map_source_option:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.admin_selector_root {
    display: grid;
    gap: 9px;
    margin-top: 9px;
}

.cascade_field_header,
.selected_area_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.cascade_field_header strong,
.selection_summary_title {
    margin: 0;
    color: #53605b;
    font-size: 10px;
    font-weight: 700;
}

.cascade_trigger {
    min-height: 38px;
    padding-block: 5px;
}

.cascade_toolbar {
    position: sticky;
    z-index: 2;
    top: 0;
    display: grid;
    gap: 6px;
    padding-bottom: 7px;
    background: #fff;
}

.cascade_search {
    width: 100%;
    height: 32px;
    padding: 0 9px;
    color: var(--ink);
    background: #f8faf9;
    border: 1px solid #dce3df;
    border-radius: 5px;
    font-size: 11px;
}

.cascade_commands,
.cascade_group_modes,
.extent_options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.cascade_command,
.extent_option {
    min-height: 26px;
    padding: 4px 8px;
    color: #5e6c66;
    background: #f3f6f4;
    border: 1px solid #e0e6e3;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 650;
}

.cascade_command:hover,
.cascade_command.is_active,
.extent_option:hover,
.extent_option.is_active {
    color: #204b39;
    background: #e7f1ec;
    border-color: #b9d0c5;
}

.cascade_option_list {
    max-height: 236px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cascade_option {
    min-width: 0;
    min-height: 30px;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    column-gap: 5px;
    padding: 4px 5px;
    border-radius: 4px;
    cursor: pointer;
}

.cascade_option:hover {
    background: #f2f6f4;
}

.cascade_option input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #2f7558;
}

.cascade_option span,
.cascade_option small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cascade_option span {
    font-size: 11px;
}

.cascade_option small {
    grid-column: 2;
    color: #949c98;
    font-size: 9px;
}

.cascade_group + .cascade_group {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid #edf1ef;
}

.cascade_group_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}

.cascade_group_header > strong {
    color: #35443d;
    font-size: 11px;
}

.cascade_group_note,
.cascade_empty,
.cascade_option_group {
    margin: 4px 5px;
    color: #8a9490;
    font-size: 10px;
}

.cascade_option_group {
    grid-column: 1 / -1;
    padding-top: 4px;
    color: #607069;
    font-weight: 700;
}

/*
 * 功能模块：国家区域快捷选择器。
 * 用途和目标：让大洲与欧盟预设沿用级联选择器的紧凑字体、边框和玉绿色状态，避免浏览器默认控件造成视觉割裂。
 * 主要逻辑：六个大洲使用稳定两列网格，欧盟作为跨国组织独占末行；明确选中、悬停和禁用状态分别控制背景与边框。
 * 注意事项：保留原生复选框和键盘焦点；窄屏回落为单列，不增加字体或外部资源。
 * 与其他模块的交互关系：hierarchy_selector_view只输出语义类名，本模块负责全部视觉表现。
 */
.country_region_presets {
    margin: 1px 0 8px;
    padding: 8px;
    background: #f8faf9;
    border: 1px solid #e0e6e3;
    border-radius: 6px;
}

.country_region_presets_title {
    display: block;
    margin: 0 0 6px 1px;
    color: #65716c;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
}

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

.country_region_preset {
    min-width: 0;
    min-height: 29px;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    color: #4f5d57;
    background: #fff;
    border: 1px solid #dce3df;
    border-radius: 5px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 550;
    line-height: 1.3;
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.country_region_preset:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    margin-top: 1px;
}

.country_region_preset:hover:not(.is_disabled) {
    color: #244a3a;
    background: #f1f7f4;
    border-color: #b9cdc3;
}

.country_region_preset:focus-within {
    border-color: #6e9483;
    box-shadow: 0 0 0 2px rgba(47, 117, 88, 0.1);
}

.country_region_preset.is_selected {
    color: #174b37;
    background: #e8f2ed;
    border-color: #a9c7b8;
}

.country_region_preset.is_disabled {
    color: #9aa39f;
    background: #f5f7f6;
    border-color: #e6ebe8;
    cursor: not-allowed;
}

.country_region_preset input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #2f7558;
}

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

.country_region_preset_hint {
    display: block;
    margin: 6px 1px 0;
    color: #89938f;
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
}

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

    .country_region_preset:last-child:nth-child(odd) {
        grid-column: auto;
    }
}
.selected_area_summary,
.display_extent_control {
    padding-top: 8px;
    border-top: 1px solid #e7ece9;
}

.selection_chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}

.path_chips {
    margin-bottom: 8px;
}

.selection_chip {
    min-width: 0;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 10px;
    line-height: 1.4;
}

.selection_chip b {
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 800;
}

.selection_chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selection_chip.level_continent,
.selection_chip.level_admin_1,
.selection_chip.level_province {
    color: #285a47;
    background: #edf6f1;
    border-color: #cce1d6;
}

.selection_chip.level_country,
.selection_chip.level_admin_2,
.selection_chip.level_admin_4,
.selection_chip.level_city {
    color: #294f71;
    background: #eef4f9;
    border-color: #cfdde9;
}

.selection_chip.level_admin_3,
.selection_chip.level_admin_5,
.selection_chip.level_admin_6,
.selection_chip.level_county {
    color: #865044;
    background: #fbf1ee;
    border-color: #ead3cc;
}

.selection_chip_remove {
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    padding: 0;
    color: currentColor;
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 12px;
}

.selection_chip_remove:hover {
    background: rgba(40, 55, 49, 0.09);
}

.selection_empty,
.selection_more {
    color: #8a9490;
    font-size: 10px;
}

.extent_options {
    margin-top: 6px;
}

.extent_option {
    flex: 1 1 auto;
    min-width: 74px;
}

@media (max-width: 480px) {
    .map_source_popover,
    .cascade_popover {
        left: 0;
        right: 0;
    }

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

.province_multi_toggle {
    min-height: 38px;
    display: grid;
    grid-template-columns: 30px auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    margin-top: 11px;
    color: var(--ink);
    cursor: pointer;
}

.province_multi_toggle input {
    position: absolute;
    opacity: 0;
}

.province_multi_toggle i {
    grid-row: 1 / 3;
    width: 30px;
    height: 17px;
    position: relative;
    background: #c8d0cc;
    border-radius: 9px;
}

.province_multi_toggle i::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 50%;
    transition: transform 160ms ease;
}

.province_multi_toggle input:checked + i { background: var(--jade); }
.province_multi_toggle input:checked + i::after { transform: translateX(13px); }
.province_multi_toggle span { font-size: 11px; font-weight: 650; }
.province_multi_toggle small { grid-column: 2 / 4; color: var(--muted); font-size: 9px; }

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

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

.selection_commands button {
    min-height: 30px;
    color: var(--jade_dark);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
}

.selection_commands button:last-child {
    color: #7b5550;
}

.selection_commands button:hover {
    background: var(--jade_soft);
}

.label_settings {
    position: relative;
}

.label_settings_button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}

.label_settings_panel {
    position: absolute;
    z-index: 14;
    top: calc(100% + 6px);
    right: 0;
    width: 210px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5px;
    box-shadow: 0 12px 30px rgba(23, 39, 33, 0.16);
}

.label_settings_panel[hidden] { display: none; }

.label_settings_panel > label:not(.label_size_control) {
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #394540;
    border-bottom: 1px solid var(--soft_line);
    font-size: 11px;
}

.label_settings_panel input[type="checkbox"] { accent-color: var(--jade); }

.label_size_control {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    color: var(--muted);
    font-size: 10px;
}

#label_size_slider {
    width: 100%;
    margin: 8px 0 2px;
    accent-color: var(--jade);
}

#map_svg {
    touch-action: none;
    cursor: grab;
}

#map_svg:active { cursor: grabbing; }

.map_zoom_controls {
    position: absolute;
    z-index: 5;
    top: 12px;
    right: 12px;
    display: grid;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(26, 43, 37, 0.1);
}

.map_zoom_controls button {
    width: 32px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #34443e;
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--soft_line);
    font-size: 17px;
    cursor: pointer;
}

.map_zoom_controls button:last-child { border-bottom: 0; font-size: 15px; }
.map_zoom_controls button:hover { background: #f0f6f3; }

.map_bubble_symbol {
    fill-opacity: 0.78;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
}

.map_bar_symbol {
    fill-opacity: 0.88;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.map_value_label,
.map_province_label {
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    text-anchor: middle;
    paint-order: stroke fill;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 2.8px;
    stroke-linejoin: round;
    pointer-events: none;
}

.map_value_label {
    fill: #1d4c43;
    font-weight: 750;
}

.map_province_label {
    fill: #344c61;
    font-weight: 750;
    opacity: 0.72;
}

.map_legend {
    min-width: 148px;
    max-height: 310px;
    overflow: auto;
    padding: 11px 12px;
    color: #27312d;
    background: #fff;
    border: 1px solid #cfd8d3;
    border-radius: 3px;
    box-shadow: 0 7px 20px rgba(28, 44, 38, 0.1);
    backdrop-filter: none;
    font-size: 10px;
}

.legend_title {
    display: block;
    margin-bottom: 8px;
    padding-bottom: 7px;
    color: #1d2723;
    border-bottom: 1px solid #e3e8e5;
    font-size: 14px;
    font-weight: 750;
}

.legend_row {
    min-height: 21px;
    margin: 2px 0;
    gap: 8px;
}

.legend_row i {
    width: 21px;
    height: 14px;
    border: 1px solid rgba(43, 57, 51, 0.34);
    border-radius: 0;
}

.legend_symbol_circle {
    display: inline-block;
    border-radius: 50% !important;
}

.legend_symbol_bar {
    width: 11px !important;
    align-self: flex-end;
}

.paste_heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.paste_help_button {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--jade);
    background: #fff;
    border: 1px solid #b9cbc4;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}

.ai_prompt_help {
    margin: 8px 0;
    padding: 10px;
    color: #4f5d57;
    background: #f3f7f5;
    border-left: 3px solid var(--jade);
    font-size: 10px;
    line-height: 1.55;
}

.ai_prompt_help p { margin: 0 0 8px; }

.copy_prompt_button {
    min-height: 29px;
    padding: 0 10px;
    color: #fff;
    background: var(--navy);
    border: 0;
    border-radius: 3px;
    font-size: 10px;
    cursor: pointer;
}

@media (max-width: 840px) {
    .label_settings_panel { position: fixed; top: 110px; right: 16px; }
    .map_zoom_controls { top: 8px; right: 8px; }
}

.ai_prompt_text {
    width: 100%;
    min-height: 112px;
    margin-bottom: 8px;
    resize: vertical;
    padding: 8px;
    color: #43504b;
    background: #fff;
    border: 1px solid #d7e0dc;
    border-radius: 3px;
    font-size: 9px;
    line-height: 1.5;
}
/* 2026-07-13 palette, local history and export-frame enhancements */
.welcome_hero { overflow: hidden; }
.hero_image {
    display: grid;
    place-items: center;
    overflow: hidden;
    background-image: none;
    background-color: #edf3f0;
    opacity: 0.82;
    transform: none;
}

#hero_map_svg {
    width: min(88vw, 1120px);
    height: min(82vh, 720px);
    margin-left: 24vw;
    overflow: hidden;
    filter: drop-shadow(0 24px 42px rgba(8, 31, 23, 0.22));
}

#hero_map_svg .map_region_shape {
    stroke: rgba(255, 255, 255, 0.88);
    stroke-width: 1.1;
}

#hero_map_svg .ten_dash_line_shape {
    stroke: rgba(22, 54, 43, 0.72);
}

.map_source_field {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.map_source_field > span {
    color: var(--muted);
    font-size: 11px;
}

.map_source_field select {
    width: 100%;
    height: 34px;
    padding: 0 28px 0 9px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
}

.palette_group_tabs {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 3px;
    background: #eef3f0;
    border-radius: 4px;
}

.palette_group_tabs button {
    min-height: 30px;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
}

.palette_group_tabs button.is_active {
    color: var(--ink);
    background: #fff;
    box-shadow: 0 1px 4px rgba(22, 48, 38, 0.09);
    font-weight: 700;
}

.palette_choices {
    flex-wrap: wrap;
}

.palette_choice {
    width: 46px;
    height: 30px;
}

.palette_choice[aria-pressed="true"],
.palette_choice.is_active {
    border-color: var(--jade);
    box-shadow: 0 0 0 2px rgba(23, 111, 99, 0.12);
}

.custom_color_controls {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-top: 2px;
}

.custom_color_field {
    display: grid;
    grid-template-columns: 1fr 34px;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 5px 7px;
    color: var(--muted);
    border: 1px solid var(--soft_line);
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
}

.custom_color_field input {
    width: 34px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

/*
 * Module purpose: style the exact per-class palette editor without expanding the styling panel vertically.
 * Main logic: use a compact swatch row, visible low/high direction and fixed icon controls at 1-10 colors.
 * Cautions: controls have stable dimensions so changing color count does not shift neighboring form fields.
 * Interactions: app.js creates semantic labels and buttons; disabled states come from palette_core bounds.
 */
.custom_palette_editor {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 10px;
    padding: 9px;
    background: #f8faf9;
    border: 1px solid var(--soft_line);
    border-radius: 4px;
}

.custom_palette_header,
.custom_palette_direction {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom_palette_header strong {
    color: var(--ink);
    font-size: 10px;
}

.custom_palette_header span,
.custom_palette_direction {
    color: var(--muted);
    font-size: 9px;
}

.custom_palette_scale {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24px, 1fr));
    gap: 4px;
}

.custom_palette_swatch {
    min-width: 24px;
    display: grid;
    gap: 2px;
    color: var(--muted);
    font-size: 8px;
    text-align: center;
    cursor: pointer;
}

.custom_palette_swatch input {
    width: 100%;
    min-width: 24px;
    height: 30px;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 3px;
    cursor: pointer;
}

.custom_palette_actions {
    display: grid;
    grid-template-columns: repeat(2, 30px);
    gap: 4px;
}

.custom_palette_action {
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 3px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.custom_palette_action:disabled {
    color: #a9b1ad;
    background: #f2f4f3;
    cursor: not-allowed;
}

.label_toggle_grid label.is_disabled {
    color: #9aa39f;
    cursor: not-allowed;
}

.title_toggle_control {
    grid-column: 1 / -1;
}

.quiet_action {
    min-height: 34px;
    padding: 0 10px;
    color: #40514a;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}

.quiet_action:hover {
    background: #f2f7f4;
    border-color: #b9c9c1;
}

.map_frame {
    box-shadow: 0 0 0 1px rgba(54, 72, 65, 0.03);
}

.export_boundary_label {
    position: absolute;
    z-index: 6;
    top: -1px;
    left: 14px;
    padding: 3px 7px;
    color: #6d7974;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 3px 3px;
    font-size: 9px;
    letter-spacing: 0;
    pointer-events: none;
}


.map_legend {
    z-index: 5;
    cursor: grab;
    user-select: none;
}

.map_legend.is_dragging {
    cursor: grabbing;
    box-shadow: 0 10px 28px rgba(20, 40, 33, 0.18);
}

.history_backdrop {
    position: fixed;
    z-index: 19;
    inset: 0;
    background: rgba(17, 28, 24, 0.28);
}

.history_drawer {
    position: fixed;
    z-index: 20;
    top: 0;
    right: 0;
    width: min(390px, 92vw);
    height: 100vh;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    background: #f9fbfa;
    border-left: 1px solid var(--line);
    box-shadow: -18px 0 45px rgba(18, 37, 30, 0.14);
}

.history_drawer[hidden],
.history_backdrop[hidden] {
    display: none;
}

.history_drawer > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 22px 16px;
    background: #fff;
    border-bottom: 1px solid var(--soft_line);
}

.history_drawer header p {
    margin: 0 0 4px;
    color: var(--jade);
    font-size: 9px;
    font-weight: 800;
}

.history_drawer header h2 {
    margin: 0;
    font-size: 19px;
    letter-spacing: 0;
}

.history_drawer header button {
    width: 34px;
    height: 34px;
    color: var(--muted);
    background: transparent;
    border: 0;
    font-size: 23px;
    cursor: pointer;
}

.history_privacy {
    margin: 0;
    padding: 13px 22px;
    color: #63706a;
    background: #f2f6f4;
    border-bottom: 1px solid var(--soft_line);
    font-size: 11px;
    line-height: 1.65;
}

.history_list {
    overflow-y: auto;
    padding: 12px;
}

.history_empty {
    padding: 48px 18px;
    color: var(--muted);
    text-align: center;
    font-size: 12px;
}

.history_item {
    margin-bottom: 8px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5px;
}

.history_name_input {
    width: 100%;
    padding: 0 0 7px;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid transparent;
    outline: 0;
    font-size: 13px;
    font-weight: 700;
}

.history_name_input:focus {
    border-bottom-color: var(--jade);
}

.history_meta {
    display: block;
    margin: 5px 0 10px;
    color: var(--muted);
    font-size: 10px;
}

.history_actions {
    display: flex;
    gap: 7px;
}

.history_actions button {
    min-height: 29px;
    padding: 0 10px;
    color: #3f5049;
    background: #f5f8f6;
    border: 1px solid var(--soft_line);
    border-radius: 3px;
    font-size: 10px;
    cursor: pointer;
}

.history_actions button[data-history-action="restore"] {
    color: #fff;
    background: var(--jade);
    border-color: var(--jade);
}

.history_drawer > footer {
    padding: 12px 18px 18px;
    background: #fff;
    border-top: 1px solid var(--soft_line);
}

.history_drawer > footer button {
    width: 100%;
    min-height: 34px;
    color: #8c403d;
    background: #fff;
    border: 1px solid #e2c7c5;
    border-radius: 4px;
    cursor: pointer;
}

@media (max-width: 780px) {
    .tool_section {
        overflow: hidden;
        padding-inline: 8px;
    }

    .workspace_shell,
    .map_workspace,
    .map_frame,
    .review_panel,
    .review_table_wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .map_workspace {
        overflow: hidden;
        padding-inline: 10px;
    }

    #hero_map_svg {
        width: 100vw;
        height: 68vh;
        margin: 18vh 0 0;
    }

    .map_toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .map_actions {
        flex-wrap: wrap;
    }

    .quiet_action {
        flex: 1;
    }

    .export_boundary_label {
        left: 8px;
    }
}
/*
 * 功能模块：双语导航、标签工具和本地记录视觉强化。
 * 用途和目标：让语言切换、本地保存、历史调用和出图边界成为清楚但不过度抢眼的编辑操作。
 * 主要逻辑：使用紧凑分段控件和图标文字按钮；出图框仅在悬停时高亮，历史条目强化层级和主操作。
 * 注意事项：编辑态边界标签与悬停阴影位于HTML层，不进入PNG；移动端保持按钮换行且不产生横向溢出。
 * 与其他模块的交互关系：index提供结构，app切换状态类，map_exporter只导出SVG内的细边框。
 */
.main_nav {
    align-items: center;
}

.nav_link b,
.privacy_note b,
.performance_badge b,
.live_badge b,
.map_actions b {
    font: inherit;
    font-weight: inherit;
}

.locale_switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    margin-left: 8px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
}

.locale_switch button {
    min-width: 42px;
    height: 27px;
    padding: 0 8px;
    color: rgba(255, 255, 255, 0.72);
    background: transparent;
    border: 0;
    border-radius: 3px;
    font-size: 10px;
    cursor: pointer;
}

.locale_switch button.is_active {
    color: #173129;
    background: #ffffff;
    font-weight: 750;
}

.map_scope_section .map_source_field {
    margin-bottom: 0;
}

.local_save_action,
.history_action {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.local_save_action {
    color: #ffffff;
    background: #176f63;
    border: 1px solid #176f63;
    box-shadow: 0 4px 12px rgba(23, 111, 99, 0.16);
}

.local_save_action:hover {
    background: #115f55;
}

.history_action {
    color: #27483e;
    background: #edf5f1;
    border: 1px solid #b9cec5;
}

.history_action:hover {
    background: #e3f0ea;
    border-color: #91b7a8;
}

.local_save_action:disabled,
.history_action:disabled {
    opacity: 0.55;
    cursor: wait;
}

.label_settings_panel {
    width: 248px;
}

.label_settings_panel > label:not(.label_size_control):not(.label_option_field) {
    padding: 2px 0;
}

.label_option_field {
    min-height: 42px;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    color: #394540;
    border-bottom: 1px solid var(--soft_line);
    font-size: 10px;
}

.label_option_field select,
.label_option_field input[type="text"] {
    width: 100%;
    min-width: 0;
    height: 30px;
    padding: 0 24px 0 7px;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 3px;
    font-size: 10px;
}

.map_frame {
    border: 1px solid #bdc9c3;
    outline: 3px solid transparent;
    outline-offset: 2px;
    transition: border-color 160ms ease, box-shadow 160ms ease, outline-color 160ms ease;
}

.map_frame:hover,
.map_frame:focus-within {
    border-color: #4b8f7d;
    outline-color: rgba(75, 143, 125, 0.14);
    box-shadow: 0 10px 28px rgba(28, 65, 53, 0.12);
}

.export_boundary_label {
    top: 8px;
    left: 10px;
    padding: 4px 8px;
    color: #49655b;
    background: rgba(246, 250, 248, 0.96);
    border: 1px solid #b9cbc3;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(29, 57, 47, 0.08);
    font-weight: 700;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.map_frame:hover .export_boundary_label,
.map_frame:focus-within .export_boundary_label {
    color: #ffffff;
    background: #176f63;
    border-color: #176f63;
}

.upload_draft_summary {
    display: grid;
    gap: 3px;
    margin-top: 10px;
    padding: 10px;
    color: #375149;
    background: #eef6f2;
    border: 1px solid #c8ddd3;
    border-left: 3px solid #176f63;
    border-radius: 3px;
}

.upload_draft_summary strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

.upload_draft_summary span {
    color: #68766f;
    font-size: 9px;
    line-height: 1.5;
}

.history_drawer {
    background: #f5f8f6;
}

.history_list {
    padding: 16px;
}

.history_item {
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
    padding: 14px 14px 13px 17px;
    border-color: #d5dfda;
    box-shadow: 0 4px 14px rgba(22, 47, 38, 0.05);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.history_item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #176f63;
}

.history_item:hover {
    border-color: #abc5ba;
    box-shadow: 0 8px 20px rgba(22, 47, 38, 0.09);
    transform: translateY(-1px);
}

.history_actions {
    justify-content: flex-end;
}

.history_actions button[data-history-action="load"] {
    color: #ffffff;
    background: #176f63;
    border-color: #176f63;
    font-weight: 700;
}

.history_actions button[data-history-action="delete"] {
    color: #874945;
    background: #fff8f7;
    border-color: #ead1cf;
}

.north_arrow_text {
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    letter-spacing: 0;
}

@media (max-width: 780px) {
    .site_header {
        padding-inline: 14px;
    }

    .nav_link {
        min-width: 54px;
        padding-inline: 8px;
    }

    .nav_link span {
        display: none;
    }

    .locale_switch {
        margin-left: 2px;
    }

    .locale_switch button {
        min-width: 35px;
        padding-inline: 5px;
    }

    .map_actions {
        gap: 7px;
    }

    .local_save_action,
    .history_action {
        flex: 1 1 132px;
    }

    .label_settings_panel {
        width: min(248px, calc(100vw - 32px));
    }
}
@media (max-width: 780px) {
    .tool_heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .performance_badge {
        width: 100%;
        justify-content: flex-start;
        line-height: 1.45;
    }
}/*
 * 功能模块：专业成图控制、标题分区与轻量导出面板。
 * 用途和目标：提升标签设置、指北针、出图规格和无数据地名的可读性，同时保持工具栏紧凑。
 * 主要逻辑：弹层按功能分组；成图画布严格遵循所选比例；拖拽元素使用明确光标；无数据标签默认降对比。
 * 注意事项：全部效果使用原生CSS，不加载字体或图标资源；高分辨率只影响点击导出后的临时Canvas。
 * 与其他模块的交互关系：index提供语义结构，app切换状态，label_renderer与north_arrow_renderer写入对应类名。
 */
.map_frame {
    min-height: 0;
}

.export_boundary_label {
    top: auto;
    bottom: 10px;
}

.label_settings_panel {
    width: 312px;
    max-height: min(620px, 76vh);
    overflow-y: auto;
    padding: 12px 13px 14px;
}

.settings_group_title {
    margin: 11px 0 5px;
    color: #728079;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.settings_group_title:first-child {
    margin-top: 0;
}

.label_toggle_grid {
    display: grid;
    grid-template-columns: 1fr;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--soft_line);
}

.label_toggle_grid label {
    min-height: 31px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    color: #33413b;
    font-size: 10px;
    cursor: pointer;
}

.label_toggle_grid span,
.label_option_field > span,
.label_size_control > span {
    min-width: 0;
    overflow-wrap: normal;
    word-break: keep-all;
    white-space: nowrap;
}

.label_option_field {
    grid-template-columns: 104px minmax(0, 1fr);
    min-height: 39px;
}

.label_size_control {
    min-height: 28px;
    align-items: center;
    margin-top: 5px;
}

.map_region_label.is_missing {
    fill: #8b9691;
    fill-opacity: 0.46;
    stroke: rgba(255, 255, 255, 0.82);
    stroke-width: 1.4px;
}

.map_region_label.is_missing.high_contrast_missing {
    fill: #46534d;
    fill-opacity: 0.92;
    stroke: #ffffff;
    stroke-width: 1.8px;
}

.map_region_label.has_value,
.map_value_label.has_value {
    fill-opacity: 1;
}

.north_arrow_layer {
    cursor: grab;
    pointer-events: all;
    user-select: none;
}

.north_arrow_layer.is_dragging {
    cursor: grabbing;
}

.export_settings {
    position: relative;
}

.export_settings_panel {
    position: absolute;
    z-index: 16;
    top: calc(100% + 7px);
    right: 0;
    width: 292px;
    padding: 14px;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid #cfd9d4;
    border-radius: 5px;
    box-shadow: 0 16px 38px rgba(20, 38, 31, 0.18);
}

.export_settings_panel[hidden] {
    display: none;
}

.export_settings_panel header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--soft_line);
}

.export_settings_panel header strong {
    font-size: 13px;
}

.export_settings_panel header span,
.export_settings_panel > p {
    color: var(--muted);
    font-size: 9px;
}

.export_settings_panel > label {
    min-height: 39px;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    font-size: 10px;
}

.export_settings_panel select {
    width: 100%;
    min-width: 0;
    height: 30px;
    padding: 0 24px 0 7px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 3px;
    font-size: 10px;
}

.export_dimensions {
    display: block;
    margin: 7px 0 10px;
    padding: 8px 10px;
    color: #285448;
    background: #edf5f1;
    border-left: 3px solid var(--jade);
    font-size: 11px;
    font-weight: 750;
}

.confirm_export_button {
    width: 100%;
    min-height: 35px;
    color: #ffffff;
    background: var(--jade);
    border: 1px solid var(--jade);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.confirm_export_button:hover {
    background: var(--jade_dark);
}

.confirm_export_button:disabled {
    opacity: 0.58;
    cursor: wait;
}

.export_settings_panel > p {
    margin: 9px 0 0;
    line-height: 1.5;
}

.build_version {
    margin-left: auto;
    color: #96a19c;
    font-size: 9px;
}

@media (max-width: 780px) {
    .label_settings_panel,
    .export_settings_panel {
        position: fixed;
        z-index: 32;
        top: 78px;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100vh - 96px);
    }

    .map_frame {
        min-height: 0;
    }

    .build_version {
        width: 100%;
        margin-left: 0;
    }
}


.label_toggle_grid span,
.label_option_field > span,
.label_size_control > span {
    display: block;
}


.label_settings_panel > .label_option_field {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
}

.label_settings_panel > label.label_option_field {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
}


@media (max-width: 780px) {
    .performance_badge {
        max-width: none;
        text-align: left;
    }
}

#map_svg .map_region_label,
#map_svg .map_value_label,
#map_svg .map_province_label,
#map_svg .north_arrow_text {
    font-family: inherit;
}

/*
 * 功能模块：桌面端轻度纵向紧凑布局。
 * 用途和目标：在浏览器100%缩放时增加首屏可见内容，同时保留现有侧边留白、横向栏宽和地图导出比例。
 * 主要逻辑：仅在桌面宽度下收窄Hero、工具段落、表单控件、地图工具栏和核对表的纵向间距，单项调整控制在2至16像素。
 * 注意事项：不使用CSS zoom或transform整体缩放；地图图框继续服从导出比例；移动端触控高度不参与压缩。
 * 与其他模块的交互关系：覆盖styles.css中的桌面尺寸参数，不改变app状态、地图投影、匹配规则或map_exporter导出尺寸。
 */
@media (min-width: 841px) {
    .site_header {
        height: 62px;
    }

    .welcome_hero {
        min-height: min(84vh, 820px);
        padding-block: 98px 76px;
    }

    .hero_kicker {
        margin-bottom: 13px;
    }

    .hero_content h1 {
        font-size: 82px;
    }

    .hero_statement {
        margin-top: 18px;
        font-size: 27px;
    }

    .hero_description {
        line-height: 1.65;
    }

    .hero_actions {
        margin-top: 26px;
    }

    .primary_action {
        min-height: 44px;
    }

    .hero_facts {
        margin-top: 42px;
    }

    .scroll_cue {
        bottom: 20px;
    }

    .tool_section {
        padding-top: 78px;
        padding-bottom: 44px;
    }

    .tool_heading {
        margin-bottom: 14px;
    }

    .tool_heading h2 {
        font-size: 28px;
    }

    .control_section {
        padding-block: 17px;
    }

    .section_heading {
        margin-bottom: 12px;
    }

    .segmented_control button,
    .level_control button,
    .input_tabs button {
        min-height: 32px;
        padding-block: 4px;
    }

    .province_picker_button {
        min-height: 46px;
        margin-top: 10px;
        padding-block: 6px;
    }

    .region_toolbar {
        margin-top: 8px;
    }

    .compact_search {
        min-height: 32px;
    }

    .icon_button {
        width: 32px;
        height: 32px;
    }

    .region_list {
        height: 136px;
    }

    .scope_line {
        margin-top: 8px;
    }

    .input_panel {
        margin-top: 8px;
    }

    .paste_area {
        min-height: 92px;
        padding-block: 8px;
    }

    .recognize_button,
    .secondary_button,
    .upload_label,
    .add_route_button {
        min-height: 32px;
    }

    .upload_dropzone {
        min-height: 98px;
        padding-block: 12px;
    }

    .sample_data_notice {
        min-height: 40px;
        margin-bottom: 8px;
        padding-block: 6px;
    }

    .style_grid {
        row-gap: 8px;
    }

    .style_field {
        gap: 4px;
    }

    .style_field select,
    .style_field input[type="number"],
    .map_source_field select,
    .title_field input {
        height: 32px;
    }

    .palette_group_tabs button {
        min-height: 28px;
    }

    .palette_choice {
        height: 28px;
    }

    .local_save_action,
    .history_action {
        min-height: 34px;
    }

    .map_workspace {
        padding-block: 15px;
    }

    .map_toolbar {
        min-height: 38px;
        margin-bottom: 9px;
    }

    .map_status_bar {
        padding-block: 8px 11px;
    }

    .review_panel {
        padding-top: 12px;
    }

    .review_heading {
        margin-bottom: 7px;
    }

    .review_table th {
        height: 36px;
    }

    .review_table td {
        height: 40px;
        padding-block: 4px;
    }

    .review_pagination {
        min-height: 34px;
        padding-top: 6px;
    }

    .review_page_button {
        width: 28px;
        height: 28px;
    }
}


/*
 * 功能模块：世界尺度边界密度控制。
 * 用途和目标：在世界专题图中减轻1px边界对小国家和多岛地区填色的遮盖，局部与精细地图保持原有清晰边界。
 * 主要逻辑：投影策略给内容组添加世界尺度类，仅降低世界范围的背景线和专题区线宽。
 * 注意事项：不删除岛屿、不修改几何；放大后仍由SVG矢量保持清晰。
 * 与其他模块的交互关系：projection_policy生成尺度类，app附加到内容组，map_renderer沿用统一图形类。
 */
.map_content_group.is_world_scale .map_background_shape {
    stroke-width: 0.4;
}

.map_content_group.is_world_scale .map_region_shape {
    stroke-width: 0.55;
}

/*
 * 功能模块：世界尺度标签光晕。
 * 用途和目标：让1–2px世界标签保持真实小字号，避免固定白色描边把字形视觉尺寸放大数倍。
 * 主要逻辑：仅在世界尺度降低文字字重和描边；详细国家地图继续使用原有可读光晕。
 * 注意事项：小图元标签是否出现由label_visibility_policy决定，本样式只控制已经通过策略的文字。
 * 与其他模块的交互关系：projection_policy提供is_world_scale类，label_renderer继续输出统一语义标签类。
 */
.map_content_group.is_world_scale .map_region_label,
.map_content_group.is_world_scale .map_value_label {
    font-weight: 550;
    stroke-width: 0.45px;
}

.map_content_group.is_world_scale .map_region_label.is_missing {
    stroke-width: 0.35px;
}
/*
 * 功能模块：通用层级选择器的状态与地图展示控件。
 * 用途和目标：让大量国家列表保持可滚动、未选项弱化、已选项清晰，并统一国家多选与标签语言控件。
 * 主要逻辑：复用现有紧凑控件尺寸，只补充状态色、开关和选择框布局。
 * 注意事项：这些样式不依赖具体国家或行政层级，可直接复用于后续美国及其他数据源。
 * 与其他模块的交互关系：hierarchy_selector_view只输出语义类名，本文件负责视觉状态。
 */
.cascade_option span {
    color: #8c9691;
}

.cascade_option.is_selected {
    background: #eef4f1;
}

.cascade_option.is_selected span {
    color: #1f2a25;
    font-weight: 650;
}

.root_multi_toggle {
    display: inline-grid;
    grid-template-columns: 30px auto;
    align-items: center;
    gap: 7px;
    margin: 7px 8px 2px;
    color: #4d5b55;
    font-size: 10px;
    font-weight: 650;
    cursor: pointer;
}

.root_multi_toggle input {
    position: absolute;
    opacity: 0;
}

.root_multi_toggle i {
    width: 30px;
    height: 17px;
    position: relative;
    background: #c8d0cc;
    border-radius: 9px;
}

.root_multi_toggle i::after {
    content: "";
    width: 13px;
    height: 13px;
    position: absolute;
    top: 2px;
    left: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 160ms ease;
}

.root_multi_toggle input:checked + i {
    background: var(--jade);
}

.root_multi_toggle input:checked + i::after {
    transform: translateX(13px);
}

.map_presentation_controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(116px, 0.42fr);
    gap: 10px;
    align-items: end;
    padding-top: 8px;
    border-top: 1px solid #e7ece9;
}

.map_presentation_controls .display_extent_control {
    padding-top: 0;
    border-top: 0;
}

/*
 * Module purpose: place the administrative-name language before all area selectors.
 * Main logic: use one compact full-width row with a stable label and native select control.
 * Cautions: the control remains visually subordinate to the section heading and does not consume map width.
 * Interactions: hierarchy_selector_view renders this block only when the source exposes multiple languages.
 */
.area_name_language_section {
    padding: 0 0 8px;
    border-bottom: 1px solid #e7ece9;
}

.area_name_language_control {
    grid-template-columns: minmax(0, 1fr) minmax(112px, 0.58fr);
    align-items: center;
}
.label_language_control {
    display: grid;
    gap: 5px;
}

.label_language_control select {
    width: 100%;
    min-height: 30px;
    padding: 4px 26px 4px 8px;
    color: #304038;
    background: #fff;
    border: 1px solid #dce4e0;
    border-radius: 5px;
    font-size: 10px;
}

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

/*
 * Module purpose: provide a compact editor for the map title and subtitle.
 * Main logic: use two flexible columns on wide screens and one column on narrow screens.
 * Cautions: fixed control heights and bounded tracks prevent long text from shifting toolbar actions.
 * Interactions: index.html provides labels, app synchronizes state, and this block controls layout only.
 */
.heading_fields {
    flex: 1 1 520px;
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(240px, 1.2fr);
    gap: 12px;
    min-width: 0;
}

.heading_fields .title_field {
    min-width: 0;
}

.heading_fields .title_field input {
    width: 100%;
}

.heading_fields .subtitle_field input {
    color: #4f5e58;
    font-weight: 500;
}

@media (max-width: 760px) {
    .heading_fields {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 7px;
    }
}

/*
 * Module purpose: make the active map extent unmistakable without increasing panel height substantially.
 * Main logic: strengthen the selected button, add a familiar check mark, and show the resolved current extent below.
 * Cautions: pseudo content does not alter accessible button text; aria-pressed remains the semantic state source.
 * Interactions: hierarchy_selector_view supplies the active class, aria state, and localized current-range text.
 */
.extent_option.is_active {
    color: #153f32;
    background: #deede6;
    border-color: #6f9e8a;
    box-shadow: inset 0 0 0 1px rgba(34, 91, 68, 0.08);
}

.extent_option.is_active::before {
    content: "✓";
    margin-right: 4px;
    font-weight: 750;
}

.extent_current_status {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 1px 0;
    color: #7a8681;
    font-size: 10px;
}

.extent_current_status strong {
    min-width: 0;
    color: #29483c;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*
 * 功能模块：单位输入与地图联动核对提示。
 * 用途和目标：让单位输入保持标签面板的紧凑节奏，并用短暂高亮帮助用户从地图定位核对表数据行。
 * 主要逻辑：文本框复用现有选择框规格；目标行只改变背景、边框和输入框强调，不触发布局位移。
 * 注意事项：减少动态效果时取消脉冲动画但保留静态强调；高亮类由review_focus控制器定时移除。
 * 与其他模块的交互关系：index.html提供单位字段，app.js输出行索引，review_focus.js管理滚动与生命周期。
 */
.value_unit_field input[type="text"] {
    padding: 0 7px;
}

.review_focus_highlight > td {
    background: #edf6f1;
    box-shadow: inset 0 1px 0 #8db5a3, inset 0 -1px 0 #8db5a3;
    animation: review_focus_pulse 700ms ease-in-out 2;
}

.review_focus_highlight .review_match_input,
.review_focus_highlight .review_value_input {
    border-color: #5f8d79;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(64, 118, 94, 0.12);
}

@keyframes review_focus_pulse {
    0%, 100% { background: #edf6f1; }
    50% { background: #dceee5; }
}

@media (prefers-reduced-motion: reduce) {
    .review_focus_highlight > td {
        animation: none;
    }
}

/*
 * Feature module: world-center preset control.
 * Purpose: keep the global orientation choice compact and visually subordinate to the map-source selector.
 * Logic: use a two-column label/select row with stable dimensions; the hidden attribute removes it for non-world sources.
 * Notes: labels may wrap on narrow screens, while the select retains a usable minimum width.
 * Interactions: app toggles hidden and populates options from world_center_presets; no projection logic lives in CSS.
 */
.world_center_control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(128px, 1.15fr);
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    color: #64716c;
    font-size: 10.5px;
    line-height: 1.35;
}

.world_center_control[hidden] {
    display: none;
}

.world_center_control select {
    width: 100%;
    min-height: 32px;
    padding: 5px 26px 5px 8px;
    color: #23302c;
    background: #fff;
    border: 1px solid #d7dfdb;
    border-radius: 5px;
    font: inherit;
}
/*
 * Feature module: compact homepage SEO summary and footer.
 * Purpose: keep crawlable workflow, privacy, FAQ, and guide content readable without turning the tool page into a long marketing page.
 * Logic: use full-width bands, restrained dividers, and native details elements; collapse the grid cleanly on small screens.
 * Notes: no cards or decorative media are introduced, so the section adds little layout and rendering cost.
 * Interactions: index.html owns the semantic content and i18n swaps copy and guide links without changing this layout.
 */
.seo_summary {
    padding: 48px 34px 30px;
    color: #24312c;
    background: #f3f6f4;
    border-top: 1px solid #dde5e1;
}

.seo_summary > * {
    width: min(1180px, 100%);
    margin-inline: auto;
}

.seo_summary_intro {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(340px, 1.2fr);
    gap: 18px 54px;
    align-items: end;
}

.seo_summary_kicker {
    grid-column: 1 / -1;
    margin: 0 0 -6px;
    color: var(--jade);
    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
}

.seo_summary_intro h2 {
    margin: 0;
    max-width: 560px;
    font-size: 28px;
    line-height: 1.18;
}

.seo_summary_intro > p:last-child {
    margin: 0;
    max-width: 620px;
    color: #63706a;
    font-size: 13px;
    line-height: 1.75;
}

.seo_steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 28px;
    padding: 0;
    list-style: none;
    border-block: 1px solid #d9e2dd;
}

.seo_steps li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 20px 24px;
}

.seo_steps li + li {
    border-left: 1px solid #d9e2dd;
}

.seo_steps li > span {
    color: #b65d45;
    font-size: 10px;
    font-weight: 750;
}

.seo_steps strong {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
}

.seo_steps p,
.seo_privacy_note p,
.seo_faq p {
    margin: 0;
    color: #6c7873;
    font-size: 11px;
    line-height: 1.65;
}

.seo_summary_details {
    display: grid;
    grid-template-columns: minmax(250px, 0.72fr) minmax(420px, 1.28fr);
    gap: 32px;
    padding-top: 22px;
}

.seo_privacy_note {
    padding-left: 14px;
    border-left: 3px solid #78a892;
}

.seo_privacy_note strong {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
}

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

.seo_faq details {
    border-bottom: 1px solid #d7e0db;
}

.seo_faq summary {
    padding: 0 22px 10px 0;
    position: relative;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.seo_faq summary::-webkit-details-marker {
    display: none;
}

.seo_faq summary::after {
    content: "+";
    position: absolute;
    top: -2px;
    right: 2px;
    color: var(--jade);
    font-size: 16px;
    font-weight: 500;
}

.seo_faq details[open] summary::after {
    content: "-";
}

.seo_faq details p {
    padding: 0 18px 12px 0;
}

.seo_guide_links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #d9e2dd;
    font-size: 11px;
}

.seo_guide_links span {
    color: #8a948f;
    font-weight: 700;
}

.seo_guide_links a {
    color: #205f50;
    text-decoration: underline;
    text-decoration-color: #a7c5b8;
    text-underline-offset: 3px;
}

.site_footer {
    display: grid;
    gap: 10px;
    padding: 21px 24px 16px;
    color: #81908a;
    background: #17231f;
    font-size: 10px;
}

.site_footer_main,
.site_footer_legal {
    width: 100%;
    max-width: 1040px;
    margin-inline: auto;
}

.site_footer_main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "identity links support"
        "maps maps maps";
    gap: 11px 24px;
    align-items: center;
}

.site_footer strong {
    color: #f4f7f5;
    font-size: 11px;
}

.site_footer_links {
    grid-area: links;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px 16px;
}

.site_footer .map_entry_links {
    grid-area: maps;
    justify-content: center;
    gap: 6px 14px;
    margin-top: 0;
    padding-top: 10px;
    border-top-color: rgba(255, 255, 255, 0.08);
    font-size: 9.5px;
}

.site_footer .map_entry_links span {
    color: #71827a;
}

.site_footer .map_entry_links a {
    color: #9fb1a9;
    text-decoration-color: rgba(159, 177, 169, 0.42);
}

.site_footer_links a {
    color: #cbd8d2;
    text-decoration: none;
}

.site_footer_links a:hover,
.site_footer_links a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site_footer_legal {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 22px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #708079;
    font-size: 9px;
}

@media (max-width: 760px) {
    .seo_summary {
        padding: 38px 20px 26px;
    }

    .seo_summary_intro,
    .seo_steps,
    .seo_summary_details,
    .seo_faq {
        grid-template-columns: minmax(0, 1fr);
    }

    .seo_summary_intro {
        gap: 12px;
    }

    .seo_summary_intro h2 {
        font-size: 24px;
    }

    .seo_steps {
        margin-top: 22px;
    }

    .seo_steps li {
        padding: 16px 4px;
    }

    .seo_steps li + li {
        border-left: 0;
        border-top: 1px solid #d9e2dd;
    }

    .seo_summary_details {
        gap: 22px;
    }

    .site_footer {
        padding: 20px;
    }

    .site_footer_main {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "identity"
            "links"
            "maps"
            "support";
        gap: 11px;
    }

    .site_footer_links,
    .site_footer .map_entry_links {
        justify-content: flex-start;
    }

    .site_footer .map_entry_links {
        padding-top: 9px;
    }


    .site_footer_legal {
        display: grid;
    }
}

/*
 * Feature module: footer support entry and ticket dialog.
 * Purpose: keep problem reporting visible but quiet, with a compact accessible form that does not compete with the map tool.
 * Logic: the footer groups identity and command; the native dialog supplies a stable modal surface and clear success/error states.
 * Notes: the hidden honeypot never enters the visual layout; all controls remain usable on narrow screens without nested cards.
 * Interactions: ticket_form.js owns behavior, i18n owns text, and /api/tickets owns delivery.
 */
.site_footer_identity {
    grid-area: identity;
    display: flex;
    align-items: center;
    gap: 18px;
}

.support_open_button {
    grid-area: support;
    justify-self: end;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    color: #dce7e2;
    background: transparent;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.support_open_button > span {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    color: #17231f;
    background: #91c9b7;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}

.support_open_button:hover b,
.support_open_button:focus-visible b {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.support_dialog {
    width: min(590px, calc(100vw - 28px));
    max-height: calc(100vh - 36px);
    padding: 0;
    color: #22302b;
    background: #f8faf9;
    border: 1px solid #cfd9d4;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(10, 27, 21, 0.28);
}

.support_dialog::backdrop {
    background: rgba(12, 22, 19, 0.58);
}

.support_form {
    display: grid;
}

.support_form > header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 25px 26px 20px;
    border-bottom: 1px solid #dce4e0;
}

.support_form > header p {
    margin: 0 0 5px;
    color: #b65d45;
    font-size: 10px;
    font-weight: 800;
}

.support_form > header h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
}

.support_form > header div > span {
    display: block;
    margin-top: 7px;
    color: #6a7771;
    font-size: 12px;
    line-height: 1.55;
}

.support_close_button {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    padding: 0;
    color: #53615b;
    background: transparent;
    border: 1px solid #d5ded9;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
}

.support_form_fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 16px;
    padding: 21px 26px 0;
}

.support_form_fields label {
    display: grid;
    gap: 7px;
    color: #46534e;
    font-size: 11px;
    font-weight: 700;
}

.support_form_fields select,
.support_form_fields input,
.support_form_fields textarea {
    width: 100%;
    color: #1f2c27;
    background: #fff;
    border: 1px solid #cfd9d4;
    border-radius: 5px;
    font: inherit;
    font-weight: 500;
}

.support_form_fields select,
.support_form_fields input {
    min-height: 40px;
    padding: 8px 10px;
}

.support_description_field {
    grid-column: 1 / -1;
}

.support_form_fields textarea {
    min-height: 132px;
    padding: 10px;
    line-height: 1.55;
    resize: vertical;
}

.support_form_fields select:focus,
.support_form_fields input:focus,
.support_form_fields textarea:focus {
    outline: 2px solid rgba(31, 112, 88, 0.2);
    border-color: #4f9a82;
}

.support_honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.support_privacy,
.support_response_time,
.support_status {
    margin: 0;
    padding-inline: 26px;
    color: #718079;
    font-size: 10px;
    line-height: 1.55;
}

.support_privacy {
    padding-top: 15px;
}

.support_response_time {
    padding-top: 6px;
}

.support_status {
    margin-top: 12px;
    padding-block: 9px;
    background: #edf4f0;
}

.support_status.is_success {
    color: #176347;
}

.support_status.is_error {
    color: #a13d31;
    background: #f9efed;
}

.support_form > footer {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 20px 26px 24px;
}

.support_form > footer button {
    min-height: 39px;
    padding: 0 16px;
    border-radius: 5px;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.support_cancel_button {
    color: #4d5b55;
    background: #fff;
    border: 1px solid #cfd9d4;
}

.support_submit_button {
    color: #fff;
    background: #17634d;
    border: 1px solid #17634d;
}

.support_submit_button:disabled {
    opacity: 0.58;
    cursor: wait;
}

@media (max-width: 600px) {
    .support_open_button {
        justify-self: start;
    }

    .site_footer,
    .site_footer_identity {
        align-items: flex-start;
        flex-direction: column;
    }

    .site_footer_identity {
        gap: 5px;
    }

    .support_form > header,
    .support_form_fields,
    .support_form > footer {
        padding-inline: 18px;
    }

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

    .support_description_field {
        grid-column: auto;
    }

    .support_privacy,
    .support_response_time,
    .support_status {
        padding-inline: 18px;
    }
}

/*
 * Feature module: unobtrusive resize handles for exported map overlays.
 * Purpose: expose legend and north-arrow scaling only on hover, keyboard focus, or active resizing.
 * Logic: keep controls at the lower-right corner, use the shared overlay scale variable for HTML, and leave map content dimensions stable.
 * Cautions: handles carry data-export-ignore and are removed before SVG export; touch devices keep a faint affordance available.
 * Interactions: map_element_resize manages pointer state, legend_snapshot measures the final visual size, and map_exporter omits controls.
 */
.map_legend {
    transform: scale(var(--map-overlay-scale, 1));
    transform-origin: top left;
    overflow: visible;
}

.map_legend .legend_row {
    overflow: hidden;
}

.map_overlay_resize_handle {
    opacity: 0;
    transition: opacity 120ms ease, background-color 120ms ease;
}

.map_legend:hover > .map_overlay_resize_handle,
.map_legend:focus-within > .map_overlay_resize_handle,
.map_legend.is_resizing > .map_overlay_resize_handle,
.north_arrow_layer:hover .map_overlay_resize_handle,
.north_arrow_layer.is_resizing .map_overlay_resize_handle,
.map_overlay_resize_handle:focus-visible {
    opacity: 1;
}

.map_legend_resize_handle {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 1px solid #81918a;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(26, 43, 36, 0.18);
    cursor: nwse-resize;
    touch-action: none;
}

.map_legend_resize_handle::before {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 5px;
    height: 5px;
    border-right: 1px solid #405049;
    border-bottom: 1px solid #405049;
}

.north_arrow_resize_handle {
    cursor: nwse-resize;
    pointer-events: all;
    touch-action: none;
}

.north_arrow_resize_handle circle {
    fill: #ffffff;
    stroke: #65756e;
    stroke-width: 0.8;
}

.north_arrow_resize_handle path {
    fill: none;
    stroke: #405049;
    stroke-width: 0.8;
    stroke-linecap: round;
}

@media (hover: none) {
    .map_overlay_resize_handle {
        opacity: 0.55;
    }
}