.region-level-query-page {
    --region-bg: #03031e;
    --region-panel: rgba(13, 23, 52, 0.78);
    --region-panel-strong: rgba(10, 20, 46, 0.94);
    --region-border: rgba(111, 167, 255, 0.2);
    --region-text: #f5f7ff;
    --region-muted: #9ba8c7;
    --region-blue: #45bff5;
    --region-purple: #7d63ff;
    min-height: 100vh;
    padding: 8.5rem 1.5rem 6rem;
    color: var(--region-text);
    background:
        radial-gradient(circle at 82% 8%, rgba(104, 89, 226, 0.2), transparent 28rem),
        radial-gradient(circle at 8% 28%, rgba(35, 152, 255, 0.12), transparent 25rem),
        var(--region-bg);
}

/* 桌面端为左右两侧的悬浮入口保留安全区，避免表格内容被遮挡。 */
.region-query-shell { width: min(80rem, calc(100% - 16rem)); margin: 0 auto; }
.region-query-hero {
    position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 2rem; align-items: end;
    margin: 0 -2.35rem 1.15rem; padding: 2.45rem 2.35rem 2.7rem; overflow: hidden;
    border: 1px solid rgba(92, 160, 255, .17); border-radius: 1.4rem;
    background:
        linear-gradient(90deg, rgba(3, 3, 30, .97) 0%, rgba(3, 3, 30, .91) 38%, rgba(3, 3, 30, .42) 73%, rgba(3, 3, 30, .25) 100%),
        url("https://shunwei-file.oss-cn-hangzhou.aliyuncs.com/img/gw-image/region-level-query-banner.png") center right / cover no-repeat;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.region-query-hero-copy, .region-query-overview { position: relative; z-index: 1; }
.region-query-badge {
    display: inline-flex; align-items: center; gap: .55rem; min-height: 2.2rem; padding: .45rem .85rem;
    border: 1px solid rgba(69, 191, 245, .34); border-radius: 999px; color: #68d3ff;
    background: rgba(37, 143, 210, .1); font-size: .9rem; font-weight: 600;
}
.region-query-badge svg { width: 1rem; height: 1rem; }
.region-query-hero h1 {
    margin: 1.15rem 0 .85rem; font-size: clamp(2.7rem, 5.2vw, 5.2rem); line-height: 1.05;
    letter-spacing: -.045em; background: linear-gradient(100deg, #f8fbff 0%, #cfd7ff 52%, #a89aff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.region-query-hero p { max-width: 47rem; margin: 0; color: #aeb9d5; font-size: 1.08rem; line-height: 1.9; }
.region-query-overview {
    position: relative; display: flex; min-height: 9.5rem; flex-direction: column; justify-content: center;
    align-items: flex-start; padding: 1.65rem 1.8rem; overflow: hidden;
    border: 1px solid rgba(111, 167, 255, .3); border-radius: 1.2rem;
    background:
        radial-gradient(circle at 100% 0, rgba(107, 95, 255, .32), transparent 48%),
        linear-gradient(135deg, rgba(27, 51, 100, .92), rgba(22, 22, 65, .94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1.2rem 3rem rgba(0, 0, 0, .2);
}
.region-query-overview::before {
    content: ""; position: absolute; top: 1.25rem; left: 0; width: .22rem; height: 2.2rem;
    border-radius: 0 .3rem .3rem 0; background: linear-gradient(#5ed8ff, #7565ff);
    box-shadow: 0 0 1rem rgba(94, 216, 255, .55);
}
.region-query-overview::after {
    content: ""; position: absolute; right: -1.8rem; bottom: -2.4rem; width: 9rem; height: 9rem;
    border: 1px solid rgba(136, 171, 255, .2); border-radius: 50%;
    box-shadow: 0 0 0 1.2rem rgba(136, 171, 255, .06), 0 0 0 2.4rem rgba(136, 171, 255, .035);
}
.region-query-overview span { position: relative; z-index: 1; color: #c1cbe3; font-size: .88rem; font-weight: 600; letter-spacing: .035em; }
.region-query-overview strong {
    position: relative; z-index: 1; margin-top: .38rem; color: #fff; font-size: clamp(3rem, 3.4vw, 4.15rem);
    font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.035em; line-height: 1;
    text-shadow: 0 .2rem 1.2rem rgba(112, 169, 255, .24);
}

.region-status-card, .region-filter-card, .region-data-card {
    margin-bottom: 1.25rem; padding: 1.7rem; border: 1px solid var(--region-border); border-radius: 1.25rem;
    background: linear-gradient(145deg, rgba(15, 27, 59, .86), rgba(18, 17, 51, .88));
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .12); backdrop-filter: blur(1rem);
}
.region-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.region-section-eyebrow { display: block; margin-bottom: .3rem; color: #65cfff; font-size: .72rem; font-weight: 700; letter-spacing: .15em; }
.region-section-heading h2 { margin: 0; color: #f6f8ff; font-size: 1.3rem; line-height: 1.3; }
.region-status-help, .region-range-summary { color: #8996b6; font-size: .86rem; }
.region-status-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.region-status-option {
    display: inline-flex; min-height: 3.2rem; align-items: center; justify-content: center; gap: .65rem;
    border: 1px solid rgba(132, 151, 198, .22); border-radius: .8rem; color: #bcc5dc;
    background: rgba(255, 255, 255, .035); font: inherit; font-weight: 600; cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.region-status-option span { width: .48rem; height: .48rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 .75rem currentColor; }
.region-status-option:hover { border-color: rgba(111, 167, 255, .52); color: #fff; }
.region-status-option.is-active { border-color: rgba(71, 171, 255, .78); color: #fff; background: rgba(59, 132, 246, .17); box-shadow: inset 0 0 0 1px rgba(111, 167, 255, .16); }
.status-available { color: #56e7b1; } .status-agented { color: #60d7ff; }
.status-locked { color: #f6bf5b; } .status-unavailable { color: #ff718f; }

.region-filter-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) .75fr auto; gap: .9rem; align-items: end; }
.region-field { display: flex; min-width: 0; flex-direction: column; gap: .5rem; color: #b8c2da; font-size: .86rem; font-weight: 600; }
.region-field input, .region-field select, .region-page-size select {
    width: 100%; min-height: 3rem; padding: 0 .9rem; border: 1px solid rgba(115, 145, 202, .25);
    border-radius: .72rem; outline: none; color: #edf3ff; background: rgba(4, 12, 31, .72); font: inherit;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.region-field input::placeholder { color: #667493; }
.region-field select, .region-page-size select { color-scheme: dark; cursor: pointer; }
.region-field input:focus, .region-field select:focus, .region-page-size select:focus {
    border-color: #4bbff5; box-shadow: 0 0 0 3px rgba(69, 191, 245, .16);
}
.region-filter-actions { display: flex; gap: .55rem; }
.region-query-button, .region-reset-button {
    display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: .45rem;
    padding: 0 1.1rem; border-radius: .72rem; border: 1px solid transparent; color: #fff; font: inherit;
    font-weight: 700; white-space: nowrap; cursor: pointer;
}
.region-query-button { background: linear-gradient(110deg, #327ff2, #7558f6); box-shadow: 0 .5rem 1.5rem rgba(64, 101, 246, .2); }
.region-query-button svg { width: 1rem; height: 1rem; }
.region-query-button.is-loading svg { animation: region-spin .8s linear infinite; }
.region-reset-button { border-color: rgba(128, 145, 190, .25); color: #b2bdd6; background: rgba(255, 255, 255, .05); }
.region-query-button:hover, .region-reset-button:hover { filter: brightness(1.12); }
button:disabled { cursor: not-allowed; opacity: .52; transform: none !important; }

.region-data-card { min-height: 22rem; padding: 0; overflow: hidden; }
.region-data-heading { margin: 0; padding: 1.55rem 1.7rem; border-bottom: 1px solid rgba(111, 167, 255, .14); }
.region-record-count { padding: .42rem .8rem; border: 1px solid rgba(69, 191, 245, .26); border-radius: 999px; color: #65cfff; background: rgba(44, 133, 210, .1); font-size: .82rem; }
.region-data-content { position: relative; min-height: 16rem; }
.region-table-wrap { overflow-x: auto; }
.region-data-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.region-data-table th { padding: 1rem 1.05rem; color: #8997b6; background: rgba(3, 10, 27, .55); font-size: .8rem; font-weight: 600; text-align: left; white-space: nowrap; }
.region-data-table td { padding: 1rem 1.05rem; border-top: 1px solid rgba(105, 139, 196, .11); color: #d4dbec; font-size: .91rem; }
.region-data-table tbody tr { transition: background-color .18s ease; }
.region-data-table tbody tr:hover { background: rgba(78, 126, 214, .075); }
.region-level-value { color: #7fd4ff !important; font-weight: 700; }
.region-number-value { font-variant-numeric: tabular-nums; }
.region-status-badge { display: inline-flex; min-height: 1.85rem; align-items: center; padding: .25rem .65rem; border: 1px solid currentColor; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.status-available { color: #56e7b1; } .status-agented { color: #60d7ff; }
.status-locked { color: #f6bf5b; } .status-unavailable { color: #ff718f; }

.region-query-state { min-height: 16rem; padding: 3rem 1.5rem; align-items: center; justify-content: center; flex-direction: column; gap: .7rem; color: #97a4c1; text-align: center; }
.region-query-state:not([hidden]) { display: flex; }
.region-query-state strong { color: #f3f6ff; font-size: 1.05rem; }
.region-loading-state:not([hidden]) {
    position: absolute; z-index: 2; inset: 0; min-height: 0; overflow-anchor: none;
    background: rgba(7, 15, 38, .72); backdrop-filter: blur(.45rem);
}
.region-loading-spinner { width: 2rem; height: 2rem; border: 2px solid rgba(101, 207, 255, .2); border-top-color: #65cfff; border-radius: 50%; animation: region-spin .8s linear infinite; }
.region-error-state button { min-height: 2.7rem; margin-top: .5rem; padding: 0 1rem; border: 1px solid rgba(95, 172, 255, .46); border-radius: .65rem; color: #fff; background: rgba(49, 119, 229, .18); font: inherit; cursor: pointer; }

.region-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.7rem; border-top: 1px solid rgba(111, 167, 255, .14); }
.region-page-size { display: flex; align-items: center; gap: .6rem; color: #8996b6; font-size: .82rem; }
.region-page-size select { width: auto; min-height: 2.45rem; padding: 0 1.9rem 0 .7rem; }
.region-page-controls, .region-page-numbers { display: flex; align-items: center; gap: .4rem; }
.region-page-controls button { min-width: 2.55rem; min-height: 2.55rem; padding: 0 .75rem; border: 1px solid rgba(116, 145, 201, .2); border-radius: .6rem; color: #aeb8d0; background: rgba(255, 255, 255, .035); font: inherit; cursor: pointer; }
.region-page-controls button:hover:not(:disabled), .region-page-controls button.is-active { border-color: rgba(73, 178, 255, .66); color: #fff; background: linear-gradient(120deg, rgba(44, 133, 242, .8), rgba(113, 78, 239, .82)); }

.region-level-query-page button:focus-visible, .region-level-query-page input:focus-visible, .region-level-query-page select:focus-visible { outline: 3px solid rgba(101, 207, 255, .72); outline-offset: 2px; }
@keyframes region-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .region-level-query-page *, .region-level-query-page *::before, .region-level-query-page *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}