/*
 * TNO 地区组件
 *
 * 所有可见框体、标签页、按钮、输入井、选择卡与复选框均直接使用
 * `assets/interface-ui/` 中的原版 TNO 界面切片。
 */

.tnoRegionCreator[hidden],
.tnoRegionSelectionPage[hidden],
.tnoRegionEditorPage[hidden],
.tnoRegionToolPage[hidden],
.tnoRegionComponentInspector[hidden],
.tnoRegionCreator [hidden] {
    display: none !important;
}

body.tnoRegionCreatorOpen {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    overflow: clip;
}

#mapCreatorRegionPoster > span {
    display: grid;
    min-width: 0;
    line-height: 1.05;
}

#mapCreatorRegionPoster > span > strong,
#mapCreatorRegionPoster > span > small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mapCreatorRegionPoster > span > strong {
    font: 12px/1.05 "WenHanJianZhu", "RuiZheng", sans-serif;
}

#mapCreatorRegionPoster > span > small {
    color: #91aaa5;
    font: 8px/1.15 "RuiZheng", sans-serif;
}

.tnoRegionCreator {
    --region-toolbar-height: 68px;
    --region-selection-panel: clamp(360px, 25vw, 440px);
    --region-editor-panel: clamp(380px, 27vw, 440px);
    position: fixed;
    inset: 0;
    z-index: 920000;
    display: grid;
    grid-template-rows: var(--region-toolbar-height) minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    color: #d9e3dd;
    background: radial-gradient(
        ellipse at 50% 38%,
        #0a1718 0,
        #030a0b 58%,
        #020606 100%
    );
    font-family: "RuiZheng", "PingFang SC", "Microsoft YaHei", sans-serif;
    isolation: isolate;
}

.tnoRegionBackdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    background: radial-gradient(
        circle at 50% 36%,
        rgba(28, 66, 65, 0.28),
        rgba(2, 6, 6, 0.94) 68%
    );
}

.tnoRegionCreator::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    background: none;
    mix-blend-mode: multiply;
}

.tnoRegionToolbar,
.tnoRegionSelectionPage,
.tnoRegionEditorPage {
    position: relative;
    z-index: 10;
    min-width: 0;
    min-height: 0;
}

.tnoRegionToolbar {
    display: grid;
    grid-template-columns: minmax(148px, 190px) minmax(220px, 1fr) minmax(240px, 390px);
    align-items: center;
    gap: 8px;
    padding: 5px 11px 9px;
    box-sizing: border-box;
    border-bottom: 8px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-thin-crt.webp") 18 / 0 0 8px 0 / 0 stretch;
    background:
        url("./assets/interface-ui/header-wide.webp") center / auto 50px repeat-x,
        #1c211f;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.8);
}

.tnoRegionCreator button,
.tnoRegionCreator input,
.tnoRegionCreator select {
    min-width: 0;
    box-sizing: border-box;
}

.tnoRegionCreator button {
    overflow: hidden;
    color: #e8efeb;
    font-family: "WenHanJianZhu", "RuiZheng", "PingFang SC", sans-serif;
    line-height: 1.15;
    text-overflow: ellipsis;
    text-shadow: 0 1px #000;
    white-space: nowrap;
    cursor: pointer;
}

.tnoRegionReturn,
.tnoRegionCountryPanel button,
.tnoRegionEditorPanel button,
.tnoRegionSelectionActions button {
    min-height: 36px;
    padding: 3px 10px;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/button-medium.webp") 7 14 fill / 7px 11px / 0 stretch;
    color: #e7ede9;
    background-color: #101514;
}

.tnoRegionReturn,
.tnoRegionPrimaryAction,
#regionPosterDownload {
    border-image-source: url("./assets/interface-ui/button-blue.webp") !important;
    color: #effffb !important;
    background-color: #061416 !important;
}

.tnoRegionCreator button.isDanger,
#regionComponentDelete {
    border-image-source: url("./assets/interface-ui/button-red.webp") !important;
    color: #ffe4e5 !important;
    background-color: #21090c !important;
}

.tnoRegionCreator button:hover:not(:disabled),
.tnoRegionCreator button:focus-visible {
    filter: brightness(1.16);
}

.tnoRegionCreator button:active:not(:disabled) {
    transform: translateY(1px);
    filter: brightness(0.93);
}

.tnoRegionCreator button:disabled {
    cursor: default;
    filter: grayscale(0.8) brightness(0.55);
}

.tnoRegionTitle {
    display: grid;
    align-content: center;
    min-width: 0;
    height: 47px;
    padding: 3px 15px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/tile-header-wide.webp") 14 32 fill / 7px 12px / 0 stretch;
    background-color: #0a0f0f;
}

.tnoRegionTitle small,
.tnoRegionCountryPanel > header small,
.tnoRegionPreviewChrome small,
.tnoRegionSectionHeading small {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #91a19b;
    font: 9px/1.2 "RuiZheng", "PingFang SC", sans-serif;
    letter-spacing: 0.14em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoRegionTitle strong,
.tnoRegionCountryPanel > header strong,
.tnoRegionPreviewChrome strong,
.tnoRegionSectionHeading strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #f1f4ef;
    font-family: "WenHanJianZhu", "RuiZheng", "PingFang SC", sans-serif;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoRegionTitle strong {
    font-size: 18px;
}

#regionComposerStatus {
    display: flex;
    min-width: 0;
    min-height: 42px;
    max-height: 42px;
    align-items: center;
    overflow: hidden;
    padding: 0 14px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/find-editbox.webp") 12 22 fill / 7px 10px / 0 stretch;
    color: #8dd2cc;
    background-color: #061011;
    font: 11px/1.3 "RuiZheng", "PingFang SC", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#regionComposerStatus.isError {
    color: #ef9a9d;
}

/* ─────────────────────────── 第一步：选择国家 ─────────────────────────── */

.tnoRegionSelectionPage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--region-selection-panel);
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.tnoRegionSelectionPreview,
.tnoRegionPosterArea {
    display: grid;
    grid-template-rows: 48px minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    padding: 8px;
    box-sizing: border-box;
    border: 10px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-border.webp") 18 fill / 10px / 0 stretch;
    background-color: #070c0c;
}

.tnoRegionPreviewChrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    min-height: 42px;
    padding: 4px 14px 5px;
    box-sizing: border-box;
    border: 6px solid transparent;
    border-image: url("./assets/interface-ui/header-wide.webp") 8 42 fill / 5px 13px / 0 stretch;
    background-color: #121716;
}

.tnoRegionPreviewChrome > span:first-child {
    display: grid;
    min-width: 0;
}

.tnoRegionPreviewChrome strong {
    font-size: 16px;
}

#regionSelectionCount,
.tnoRegionAccuracySeal {
    display: flex;
    min-width: 0;
    min-height: 34px;
    max-width: 48%;
    align-items: center;
    overflow: hidden;
    padding: 0 11px;
    box-sizing: border-box;
    border: 6px solid transparent;
    border-image: url("./assets/interface-ui/find-editbox.webp") 12 22 fill / 5px 8px / 0 stretch;
    color: #7dd5cf;
    background-color: #061011;
    font: 10px/1.2 "RuiZheng", "PingFang SC", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoRegionSelectionCanvasFrame,
.tnoRegionPosterFrame {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 8px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-thin-crt.webp") 18 fill / 8px / 0 stretch;
    background: #020708;
}

#regionSelectionCanvas,
#regionPosterCanvas {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background-color: #020606;
    box-shadow:
        0 0 0 1px rgba(82, 219, 214, 0.48),
        0 12px 36px rgba(0, 0, 0, 0.84);
}

#regionPosterCanvas {
    cursor: move;
    touch-action: none;
}

#regionPosterCanvas.isDragging {
    cursor: grabbing;
}

#regionSelectionEmpty {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(520px, calc(100% - 44px));
    max-height: min(180px, calc(100% - 44px));
    overflow: auto;
    margin: 0;
    padding: 20px 24px;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    border: 8px solid transparent;
    border-image: url("./assets/interface-ui/tile-overlay-small.webp") 16 fill / 8px / 0 stretch;
    color: #aebcb6;
    background-color: #071010;
    font: 13px/1.65 "RuiZheng", "PingFang SC", sans-serif;
    text-align: center;
    overflow-wrap: anywhere;
}

.tnoRegionCountryPanel,
.tnoRegionEditorPanel {
    min-width: 0;
    min-height: 0;
    padding: 10px;
    box-sizing: border-box;
    border: 10px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-border.webp") 18 fill / 10px / 0 stretch;
    background-color: #090e0d;
}

.tnoRegionCountryPanel {
    display: grid;
    grid-template-rows: 54px auto auto minmax(128px, 1fr) auto auto;
    gap: 8px;
    overflow: hidden;
}

.tnoRegionCountryPanel > header {
    display: grid;
    align-content: center;
    min-width: 0;
    padding: 5px 13px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/tile-header-wide.webp") 14 32 fill / 7px 12px / 0 stretch;
    background-color: #111615;
}

.tnoRegionCountryPanel > header strong {
    font-size: 18px;
}

.tnoRegionSearch,
.tnoRegionComponentInspector label,
.tnoRegionTextOptions label,
.tnoRegionRangeField {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.tnoRegionSearch > span,
.tnoRegionComponentInspector label > span,
.tnoRegionTextOptions label > span,
.tnoRegionRangeField > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    color: #9ba9a3;
    font: 10px/1.2 "RuiZheng", "PingFang SC", sans-serif;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoRegionRangeField output {
    flex: none;
    color: #72d4ce;
}

.tnoRegionCreator input[type="text"],
.tnoRegionCreator input[type="search"],
.tnoRegionCreator select {
    width: 100%;
    height: 38px;
    min-height: 38px;
    padding: 0 28px 0 16px;
    border: 8px solid transparent;
    border-image: url("./assets/interface-ui/find-editbox.webp") 12 22 fill / 7px 10px / 0 stretch;
    outline: 0;
    color: #e0e8e3;
    background-color: #040c0d;
    font: 12px/20px "RuiZheng", "PingFang SC", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoRegionRangeField > span {
    padding: 0 12px;
}

.tnoRegionCreator input[type="text"]::placeholder,
.tnoRegionCreator input[type="search"]::placeholder {
    color: #66736e;
}

.tnoRegionCreator input[type="text"]:focus,
.tnoRegionCreator input[type="search"]:focus,
.tnoRegionCreator select:focus-visible {
    color: #f0fffa;
    filter: brightness(1.15);
}

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

.tnoRegionCountryList,
.tnoRegionMemberList,
.tnoRegionComponentList {
    min-width: 0;
    min-height: 0;
    padding: 7px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    border: 8px solid transparent;
    border-image: url("./assets/interface-ui/tile-scroll-window.webp") 18 fill / 8px / 0 stretch;
    background-color: #050b0b;
    scrollbar-color: #639c98 #111716;
    scrollbar-width: thin;
}

.tnoRegionCountryList {
    display: grid;
    align-content: start;
    gap: 5px;
}

.tnoRegionCountryCard,
.tnoRegionCountryEntry,
#regionCountryList > button,
#regionCountryList > label {
    position: relative;
    display: grid;
    grid-template-columns: 24px 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 6px 9px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/country-entry-idle.webp") 8 14 fill / 6px 8px / 0 stretch;
    color: #c8d1cd;
    background-color: #0b100f;
    font: 11px/1.25 "RuiZheng", "PingFang SC", sans-serif;
    text-align: left;
    cursor: pointer;
}

.tnoRegionCountryCard:hover,
.tnoRegionCountryCard:focus-visible,
.tnoRegionCountryEntry:hover,
.tnoRegionCountryEntry:focus-visible,
#regionCountryList > button:hover,
#regionCountryList > button:focus-visible,
#regionCountryList > label:hover {
    filter: brightness(1.13);
}

.tnoRegionCountryCard.isSelected,
.tnoRegionCountryCard[aria-selected="true"],
.tnoRegionCountryEntry.isSelected,
.tnoRegionCountryEntry[aria-selected="true"],
#regionCountryList > button.isSelected,
#regionCountryList > button[aria-selected="true"],
#regionCountryList > label:has(input:checked) {
    border-image-source: url("./assets/interface-ui/country-entry-active.webp");
    color: #effbf7;
    background-color: #061416;
}

.tnoRegionCountryList input[type="checkbox"],
.tnoRegionCheckField input[type="checkbox"] {
    appearance: none;
    width: 23px;
    height: 23px;
    min-width: 23px;
    margin: 0;
    border: 0;
    background: url("./assets/interface-ui/checkbox-off.webp") center / 23px 23px no-repeat;
    cursor: pointer;
}

.tnoRegionCountryList input[type="checkbox"]:checked,
.tnoRegionCheckField input[type="checkbox"]:checked {
    background-image: url("./assets/interface-ui/checkbox-on.webp");
}

.tnoRegionCountryCard img,
.tnoRegionCountryEntry img,
#regionCountryList > button img,
#regionCountryList > label img {
    width: 42px;
    height: 28px;
    min-width: 0;
    object-fit: cover;
    border: 5px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-thin-crt.webp") 18 fill / 4px / 0 stretch;
    background-color: #050909;
}

.tnoRegionCountryEntry > img:first-child {
    width: 23px;
    height: 23px;
    border: 0;
    object-fit: contain;
    background: transparent;
}

.tnoRegionCountryFlag {
    display: block;
    width: 42px;
    height: 28px;
    min-width: 0;
    overflow: hidden;
    border: 5px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-thin-crt.webp") 18 fill / 4px / 0 stretch;
    background-color: #050909;
}

.tnoRegionCountryFlag > img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.tnoRegionCountryCopy {
    display: grid;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.tnoRegionCountryCard strong,
.tnoRegionCountryEntry strong,
#regionCountryList > button strong,
#regionCountryList > label strong {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font: 12px/1.2 "WenHanJianZhu", "RuiZheng", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoRegionCountryCard small,
.tnoRegionCountryEntry small,
#regionCountryList > button small,
#regionCountryList > label small {
    min-width: 0;
    overflow: hidden;
    color: #82908a;
    font: 9px/1.2 "RuiZheng", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoRegionNeutralNotice,
.tnoRegionRule {
    min-width: 0;
    max-height: 76px;
    overflow: auto;
    margin: 0;
    padding: 9px 11px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/tile-overlay-small.webp") 16 fill / 7px / 0 stretch;
    color: #aab7b1;
    background-color: #07100f;
    font: 10px/1.55 "RuiZheng", "PingFang SC", sans-serif;
    overflow-wrap: anywhere;
}

.tnoRegionPrimaryAction {
    width: 100%;
    min-height: 46px !important;
    padding-inline: 12px !important;
    font-size: 13px;
}

/* ─────────────────────────── 第二步：海报编辑 ─────────────────────────── */

.tnoRegionEditorPage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--region-editor-panel);
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.tnoRegionPosterFrame {
    padding: 7px;
}

.tnoRegionEditorPanel {
    display: grid;
    grid-template-rows: 46px minmax(0, 1fr);
    gap: 7px;
    overflow: hidden;
}

.tnoRegionEditorTabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    min-width: 0;
    padding: 2px;
    box-sizing: border-box;
    background-color: #252927;
}

.tnoRegionEditorTabs button {
    min-height: 42px;
    padding: 3px 7px;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/large-tab-idle.webp") 7 14 fill / 7px 10px / 0 stretch;
    color: #adb8b3;
    background-color: #101413;
    font-size: 11px;
}

.tnoRegionEditorTabs button.isActive,
.tnoRegionEditorTabs button[aria-selected="true"] {
    border-image-source: url("./assets/interface-ui/large-tab-active.webp");
    color: #f0faf6;
    background-color: #071315;
    text-shadow:
        0 0 8px rgba(89, 199, 195, 0.48),
        0 1px #000;
}

.tnoRegionEditorScroll {
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border: 8px solid transparent;
    border-image: url("./assets/interface-ui/tile-scroll-window.webp") 18 fill / 8px / 0 stretch;
    background-color: #060c0c;
    scrollbar-color: #639c98 #111716;
    scrollbar-width: thin;
}

.tnoRegionToolPage {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    box-sizing: border-box;
}

.tnoRegionSectionHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    min-height: 48px;
    padding: 4px 9px 5px 13px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/header-wide.webp") 8 42 fill / 6px 12px / 0 stretch;
    background-color: #141918;
}

.tnoRegionSectionHeading > span {
    display: grid;
    min-width: 0;
}

.tnoRegionSectionHeading strong {
    font-size: 17px;
}

.tnoRegionSectionHeading > button {
    min-width: 94px;
    min-height: 32px;
    padding-inline: 7px;
    font-size: 10px;
}

.tnoRegionMemberList {
    display: grid;
    align-content: start;
    gap: 6px;
    max-height: min(40dvh, 350px);
}

.tnoRegionMember,
.tnoRegionMemberEntry,
#regionMemberList > article,
#regionMemberList > div {
    display: grid;
    grid-template-columns: minmax(112px, 1fr) minmax(94px, 118px) minmax(102px, 120px);
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 60px;
    padding: 7px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/country-entry-idle.webp") 8 14 fill / 6px 8px / 0 stretch;
    background-color: #0a100f;
}

.tnoRegionMemberIdentity {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
}

.tnoRegionMemberIdentity > span {
    flex: none;
    width: 24px;
    height: 24px;
    border: 4px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-thin-crt.webp") 18 fill / 3px / 0 stretch;
}

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

.tnoRegionMemberModes > button,
.tnoRegionMemberEntry > button {
    min-height: 32px;
    padding-inline: 4px;
    font-size: 9px;
}

.tnoRegionMemberModes > button.isActive,
.tnoRegionMemberModes > button[aria-pressed="true"] {
    border-image-source: url("./assets/interface-ui/button-blue.webp");
    color: #effffb;
    background-color: #061416;
}

.tnoRegionMember img,
.tnoRegionMemberEntry img,
#regionMemberList > article img,
#regionMemberList > div > img {
    width: 44px;
    height: 30px;
    object-fit: cover;
    border: 5px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-thin-crt.webp") 18 fill / 4px / 0 stretch;
    background-color: #040909;
}

.tnoRegionMember strong,
.tnoRegionMemberEntry strong,
#regionMemberList > article strong,
#regionMemberList > div > strong {
    min-width: 0;
    overflow: hidden;
    color: #edf2ee;
    font: 12px/1.2 "WenHanJianZhu", "RuiZheng", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoRegionMemberIdentity > strong {
    flex: 1 1 auto;
}

.tnoRegionMember small,
.tnoRegionMemberEntry small {
    min-width: 0;
    overflow: hidden;
    color: #87958f;
    font: 9px/1.2 "RuiZheng", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoRegionMember select,
.tnoRegionMemberEntry select,
#regionMemberList select {
    height: 34px;
    min-height: 34px;
    padding: 3px 9px;
    border-width: 7px;
    font-size: 10px;
}

.tnoRegionRangeField {
    padding: 10px;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/tile-overlay-small.webp") 16 fill / 7px / 0 stretch;
    background-color: #07100f;
}

.tnoRegionCreator input[type="range"] {
    appearance: none;
    width: 100%;
    height: 30px;
    margin: 0;
    padding: 0 9px;
    border: 0;
    outline: 0;
    background:
        url("./assets/interface-ui/scrollbar-horizontal.webp") center / calc(100% - 18px) 18px no-repeat,
        transparent;
    cursor: ew-resize;
}

.tnoRegionCreator input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: 0;
    border: 0;
    background: url("./assets/interface-ui/scroll-thumb.webp") center / 18px 18px no-repeat;
    filter: hue-rotate(128deg) saturate(0.7);
}

.tnoRegionCreator input[type="range"]::-moz-range-track {
    height: 18px;
    border: 0;
    background: url("./assets/interface-ui/scrollbar-horizontal.webp") center / 100% 18px no-repeat;
}

.tnoRegionCreator input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 0;
    background: url("./assets/interface-ui/scroll-thumb.webp") center / 18px 18px no-repeat;
    filter: hue-rotate(128deg) saturate(0.7);
}

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

.tnoRegionAssetKinds > button:last-child {
    grid-column: 1 / -1;
}

.tnoRegionPresetLabel {
    display: flex;
    min-width: 0;
    min-height: 34px;
    align-items: center;
    overflow: hidden;
    padding: 0 16px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/tile-header-small.webp") 14 32 fill / 6px 12px / 0 stretch;
    color: #c7d2cd;
    background-color: #0d1312;
    font: 10px/1.1 "RuiZheng", sans-serif;
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoRegionFactionPresets,
.tnoRegionBackgrounds {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
}

.tnoRegionPresetCard,
.tnoRegionFactionPreset,
#regionFactionPresets > button,
.tnoRegionBackgroundCard,
.tnoRegionBackground,
#regionBackgrounds > button {
    display: grid;
    grid-template-rows: minmax(54px, 74px) auto;
    gap: 4px;
    min-width: 0;
    min-height: 96px;
    padding: 6px;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/tile-card-selectable.webp") 9 fill / 7px / 0 stretch;
    color: #b8c3be;
    background-color: #09100f;
    font: 9px/1.2 "RuiZheng", "PingFang SC", sans-serif;
    text-align: center;
    white-space: normal;
}

.tnoRegionPresetCard.isActive,
.tnoRegionPresetCard[aria-selected="true"],
.tnoRegionFactionPreset.isActive,
.tnoRegionFactionPreset[aria-selected="true"],
#regionFactionPresets > button.isActive,
#regionFactionPresets > button[aria-selected="true"],
.tnoRegionBackgroundCard.isActive,
.tnoRegionBackgroundCard[aria-selected="true"],
.tnoRegionBackground.isActive,
.tnoRegionBackground[aria-selected="true"],
#regionBackgrounds > button.isActive,
#regionBackgrounds > button[aria-selected="true"] {
    border-image-source: url("./assets/interface-ui/tile-card-selected.webp");
    color: #eff9f5;
    background-color: #061415;
}

#regionBackgrounds > button.isSelected {
    border-image-source: url("./assets/interface-ui/tile-card-selected.webp");
    color: #eff9f5;
    background-color: #061415;
}

.tnoRegionBlackBackground {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 54px;
    background: #000;
}

.tnoRegionPresetCard img,
.tnoRegionFactionPreset img,
#regionFactionPresets > button img,
.tnoRegionBackgroundCard img,
.tnoRegionBackground img,
#regionBackgrounds > button img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    background-color: #030808;
}

.tnoRegionBackgroundCard img,
.tnoRegionBackground img,
#regionBackgrounds > button img {
    object-fit: cover;
}

.tnoRegionPresetCard span,
.tnoRegionFactionPreset span,
#regionFactionPresets > button span,
.tnoRegionBackgroundCard span,
.tnoRegionBackground span,
#regionBackgrounds > button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoRegionComponentList {
    display: grid;
    align-content: start;
    gap: 5px;
    max-height: 210px;
}

.tnoRegionComponentEntry,
#regionComponentList > button {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 5px 8px;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/country-entry-idle.webp") 8 14 fill / 6px 8px / 0 stretch;
    color: #c9d2ce;
    background-color: #0a100f;
    font: 10px/1.2 "RuiZheng", sans-serif;
    text-align: left;
    overflow: hidden;
}

.tnoRegionComponentEntry.isSelected,
.tnoRegionComponentEntry[aria-selected="true"],
#regionComponentList > button.isSelected,
#regionComponentList > button[aria-selected="true"] {
    border-image-source: url("./assets/interface-ui/country-entry-active.webp");
    color: #f0faf6;
    background-color: #061415;
}

.tnoRegionComponentEntry img,
#regionComponentList > button img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    background-color: #030808;
}

.tnoRegionComponentEntry > span:first-child,
#regionComponentList > button > span:first-child {
    display: grid;
    width: 30px;
    height: 30px;
    min-width: 0;
    place-items: center;
    overflow: hidden;
}

.tnoRegionComponentEntry strong,
#regionComponentList > button strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoRegionComponentInspector {
    display: grid;
    gap: 9px;
    min-width: 0;
    padding: 10px;
    box-sizing: border-box;
    border: 8px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-thin-crt.webp") 18 fill / 8px / 0 stretch;
    background-color: #080e0d;
}

.tnoRegionCountryballRoles {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 8px;
    box-sizing: border-box;
    border: 8px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-thin-crt.webp") 18 fill / 8px / 0 stretch;
    background-color: #07100f;
}

.tnoRegionCountryballHeading {
    display: flex;
    min-width: 0;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 4px 12px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/header-wide.webp") 8 42 fill / 6px 12px / 0 stretch;
    background-color: #111716;
}

.tnoRegionCountryballHeading > span {
    display: grid;
    min-width: 0;
}

.tnoRegionCountryballHeading small {
    color: #91a19b;
    font: 9px/1.15 "RuiZheng", "PingFang SC", sans-serif;
    letter-spacing: 0.12em;
}

.tnoRegionCountryballHeading strong {
    overflow: hidden;
    color: #f0f5f1;
    font: 15px/1.2 "WenHanJianZhu", "RuiZheng", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#regionCountryballRoleCount {
    flex: none;
    min-width: 78px;
    overflow: hidden;
    color: #75d8d2;
    font: 10px/1.2 "RuiZheng", sans-serif;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoRegionCountryballRoleList {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
    max-height: 245px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: #639c98 #111716;
    scrollbar-width: thin;
}

.tnoRegionCountryballRole {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 84px;
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 62px;
    padding: 6px 7px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/country-entry-idle.webp") 8 14 fill / 6px 8px / 0 stretch;
    background-color: #09100f;
}

.tnoRegionCountryballRoleFlag {
    display: grid;
    width: 50px;
    height: 40px;
    place-items: center;
    overflow: hidden;
    border: 5px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-thin-crt.webp") 18 fill / 4px / 0 stretch;
    color: #dff8f4;
    background-color: #030808;
    font: 16px/1 "WenHanJianZhu", "RuiZheng", sans-serif;
}

.tnoRegionCountryballRoleFlag img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tnoRegionCountryballRoleCopy {
    display: grid;
    min-width: 0;
}

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

.tnoRegionCountryballRoleCopy strong {
    color: #eef4f0;
    font: 11px/1.2 "WenHanJianZhu", "RuiZheng", sans-serif;
}

.tnoRegionCountryballRoleCopy small {
    color: #879b94;
    font: 9px/1.25 "RuiZheng", sans-serif;
}

.tnoRegionCountryballRole > button {
    min-height: 35px;
    padding-inline: 5px;
    border-image-source: url("./assets/interface-ui/button-blue.webp");
    color: #effffb;
    background-color: #061416;
    font-size: 9px;
}

.tnoRegionCountryballEmpty {
    display: grid;
    gap: 3px;
    min-height: 82px;
    place-content: center;
    padding: 12px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/tile-overlay-small.webp") 16 fill / 7px / 0 stretch;
    color: #8da09a;
    background-color: #060d0c;
    text-align: center;
}

.tnoRegionCountryballEmpty strong {
    color: #d5dfda;
    font: 13px/1.2 "WenHanJianZhu", "RuiZheng", sans-serif;
}

.tnoRegionCountryballEmpty span {
    font: 9px/1.35 "RuiZheng", "PingFang SC", sans-serif;
}

.tnoRegionCountryballInspector {
    display: grid;
    gap: 8px;
    min-width: 0;
}

#regionCountryballSourceStatus {
    display: block;
    min-width: 0;
    min-height: 36px;
    overflow: hidden;
    padding: 8px 12px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/find-editbox.webp") 12 22 fill / 7px 10px / 0 stretch;
    color: #75d8d2;
    background-color: #061011;
    font: 9px/1.25 "RuiZheng", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#regionCountryballSourceStatus.isError {
    color: #e89a9d;
}

#regionComponentList > button[data-hidden-instance="true"] {
    opacity: 0.56;
}

#regionComponentList > button.isSourceMissing {
    color: #e59a9d;
}

.tnoRegionCountryballRoleList::-webkit-scrollbar {
    width: 16px;
}

.tnoRegionCountryballRoleList::-webkit-scrollbar-track {
    background: url("./assets/interface-ui/scroll-track.webp") center / 16px auto repeat-y;
}

.tnoRegionCountryballRoleList::-webkit-scrollbar-thumb {
    background: url("./assets/interface-ui/scroll-thumb.webp") center / 16px 38px no-repeat;
}

.tnoRegionTextOptions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 82px;
    gap: 7px;
    min-width: 0;
}

.tnoRegionCreator input[type="color"] {
    width: 100%;
    height: 38px;
    padding: 4px 7px;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/find-editbox.webp") 12 22 fill / 6px 9px / 0 stretch;
    background-color: #040c0d;
    cursor: pointer;
}

.tnoRegionCreator input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.tnoRegionCreator input[type="color"]::-webkit-color-swatch {
    border: 1px solid #4d6965;
}

.tnoRegionCheckField {
    display: grid !important;
    grid-template-columns: 23px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 39px;
    padding: 6px 9px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/tile-overlay-small.webp") 16 fill / 7px / 0 stretch;
    background-color: #07100f;
    cursor: pointer;
}

.tnoRegionCheckField > span {
    display: block !important;
    min-width: 0;
    overflow: hidden;
    color: #c2cdc8 !important;
    font: 10px/1.25 "RuiZheng", "PingFang SC", sans-serif !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnoRegionCountryballImportOptions {
    display: grid;
    gap: 6px;
}

.tnoRegionCountryballImportOptions .tnoRegionCheckField > span {
    display: grid !important;
    gap: 2px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.tnoRegionCountryballImportOptions strong {
    color: #e3ebe7;
    font: 11px/1.2 "WenHanJianZhu", "RuiZheng", sans-serif;
}

.tnoRegionCountryballImportOptions small {
    color: #82918b;
    font: 9px/1.3 "RuiZheng", "PingFang SC", sans-serif;
}

.tnoRegionCountryballImportOptions input:disabled + span {
    opacity: 0.45;
}

#regionComponentDelete:only-child {
    grid-column: 1 / -1;
}

#regionPosterDownload {
    min-height: 48px;
    font-size: 13px;
}

/* 原版滚动条切片。 */
.tnoRegionCountryList::-webkit-scrollbar,
.tnoRegionMemberList::-webkit-scrollbar,
.tnoRegionComponentList::-webkit-scrollbar,
.tnoRegionEditorScroll::-webkit-scrollbar,
.tnoRegionRule::-webkit-scrollbar,
.tnoRegionNeutralNotice::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

.tnoRegionCountryList::-webkit-scrollbar-track,
.tnoRegionMemberList::-webkit-scrollbar-track,
.tnoRegionComponentList::-webkit-scrollbar-track,
.tnoRegionEditorScroll::-webkit-scrollbar-track,
.tnoRegionRule::-webkit-scrollbar-track,
.tnoRegionNeutralNotice::-webkit-scrollbar-track {
    background: url("./assets/interface-ui/scroll-track.webp") center / 16px auto repeat-y;
}

.tnoRegionCountryList::-webkit-scrollbar-thumb,
.tnoRegionMemberList::-webkit-scrollbar-thumb,
.tnoRegionComponentList::-webkit-scrollbar-thumb,
.tnoRegionEditorScroll::-webkit-scrollbar-thumb,
.tnoRegionRule::-webkit-scrollbar-thumb,
.tnoRegionNeutralNotice::-webkit-scrollbar-thumb {
    border: 0;
    background: url("./assets/interface-ui/scrollbar-vertical.webp") center / 16px 100% no-repeat;
}

/* ─────────────────────────── 响应式 ─────────────────────────── */

@media screen and (max-width: 1180px) {
    .tnoRegionCreator {
        --region-selection-panel: 360px;
        --region-editor-panel: 380px;
    }

    .tnoRegionToolbar {
        grid-template-columns: 160px minmax(200px, 1fr) minmax(200px, 300px);
    }

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

    .tnoRegionMember,
    .tnoRegionMemberEntry,
    #regionMemberList > article,
    #regionMemberList > div {
        grid-template-columns: minmax(96px, 1fr) minmax(82px, 98px) minmax(88px, 102px);
    }
}

@media screen and (max-width: 900px) {
    .tnoRegionToolbar {
        grid-template-columns: 152px minmax(190px, 1fr);
    }

    #regionComposerStatus {
        display: none;
    }

    .tnoRegionSelectionPage,
    .tnoRegionEditorPage {
        gap: 6px;
        padding: 6px;
    }

    .tnoRegionSelectionPreview,
    .tnoRegionPosterArea,
    .tnoRegionCountryPanel,
    .tnoRegionEditorPanel {
        padding: 6px;
        border-width: 8px;
    }

    .tnoRegionEditorTabs button {
        padding-inline: 4px;
        font-size: 10px;
    }

    .tnoRegionAccuracySeal {
        display: none;
    }
}

@media screen and (max-width: 700px) {
    body.tnoRegionCreatorOpen {
        overflow: hidden;
    }

    .tnoRegionCreator {
        --region-toolbar-height: 62px;
        display: grid;
    }

    .tnoRegionToolbar {
        grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
        gap: 5px;
        padding: 4px 6px 8px;
    }

    .tnoRegionReturn {
        min-height: 40px;
        padding-inline: 6px;
        font-size: 10px;
    }

    .tnoRegionTitle {
        height: 44px;
        padding-inline: 10px;
    }

    .tnoRegionTitle small {
        display: none;
    }

    .tnoRegionTitle strong {
        font-size: 15px;
    }

    .tnoRegionSelectionPage,
    .tnoRegionEditorPage {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-content: start;
        padding: 6px;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-color: #639c98 #111716;
        scrollbar-width: thin;
    }

    .tnoRegionSelectionPreview,
    .tnoRegionPosterArea {
        grid-template-rows: 44px auto;
        width: 100%;
        min-height: 0;
    }

    .tnoRegionSelectionCanvasFrame,
    .tnoRegionPosterFrame {
        width: 100%;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    #regionSelectionCanvas,
    #regionPosterCanvas {
        width: 100%;
        height: auto;
    }

    .tnoRegionCountryPanel,
    .tnoRegionEditorPanel {
        width: 100%;
        min-height: 540px;
    }

    .tnoRegionCountryPanel {
        grid-template-rows: 52px auto auto minmax(180px, 290px) auto auto;
    }

    .tnoRegionEditorPanel {
        grid-template-rows: 46px auto;
    }

    .tnoRegionEditorScroll {
        min-height: 480px;
        overflow: visible;
    }

    .tnoRegionMemberList {
        max-height: 300px;
    }

    .tnoRegionFactionPresets,
    .tnoRegionBackgrounds {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 480px) {
    .tnoRegionToolbar {
        grid-template-columns: 116px minmax(0, 1fr);
    }

    .tnoRegionReturn {
        font-family: "RuiZheng", "PingFang SC", sans-serif;
        font-size: 9px;
    }

    .tnoRegionPreviewChrome {
        padding-inline: 8px;
    }

    .tnoRegionPreviewChrome strong {
        font-size: 14px;
    }

    #regionSelectionCount {
        max-width: 44%;
        padding-inline: 6px;
        font-size: 9px;
    }

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

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

    .tnoRegionEditorTabs button {
        font-family: "RuiZheng", "PingFang SC", sans-serif;
        font-size: 9px;
    }

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

    .tnoRegionCountryballRole {
        grid-template-columns: 46px minmax(0, 1fr) 74px;
    }

    .tnoRegionCountryballRoleFlag {
        width: 42px;
        height: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tnoRegionCreator button {
        transition: none;
    }
}