body {
    background: var(--home-main-content-bg, var(--bg-primary));
}

/* ==================== 主横幅 ==================== */
.hero-banner {
    position: relative;
    z-index: 1;
    padding: 40px 20px 50px;
    text-align: center;
    overflow: hidden;
}

.hero-banner::before {
    content: "";
    position: absolute;
    top: 60px;
    left: 50%;
    width: 720px;
    max-width: 90%;
    height: 380px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.35), rgba(59, 130, 246, 0.15) 40%, transparent 70%);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
}

.hero-content {
    max-width: 860px;
    margin: 0 auto;
    position: relative;
}

.hero-icon {
    font-size: 3rem;
    color: var(--gold);
    margin-bottom: 14px;
    display: inline-block;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.55), 0 0 60px rgba(255, 165, 0, 0.25);
    animation: heroIconFloat 4s ease-in-out infinite;
}

@keyframes heroIconFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-4deg);
    }

    50% {
        transform: translateY(-8px) rotate(4deg);
    }
}

.hero-title {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #ffd700 0%, #ffae33 30%, #60a5fa 70%, #c084fc 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
    line-height: 1.25;
    animation: gradientShift 8s ease infinite;
    filter: drop-shadow(0 4px 24px rgba(99, 102, 241, 0.35));
}

@keyframes gradientShift {

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

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

.hero-subtitle {
    font-size: 1.15rem;
    color: var(--home-hero-subtitle-text, rgba(255, 255, 255, 0.78));
    margin-bottom: 36px;
    letter-spacing: 1px;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    /* flex-wrap: wrap; */
}

.stat-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 18px 36px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(15, 19, 60, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1), box-shadow 0.4s;
    min-width: 160px;
}

.stat-item:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 18px 40px rgba(99, 102, 241, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.stat-num {
    font-size: 2.4rem;
    font-weight: 800;
    background: linear-gradient(135deg, #60a5fa, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
}

.stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 6px;
    letter-spacing: 1px;
}

/* ==================== 搜索与筛选 ==================== */
.filter-section {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px 28px;
}

.filter-inner {
    background: var(--home-filter-bg, linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    padding: 22px 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 20px 50px rgba(15, 19, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    overflow: scroll
}

.search-box {
    display: flex;
    align-items: center;
    background: linear-gradient(rgba(99, 106, 150, 0.35) 0%, rgba(182, 186, 214, 0.18) 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    padding: 0 16px;
    flex: 1;
    min-width: 220px;
    height: 44px;
    transition: all 0.3s;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.search-box:focus-within {
    border-color: rgba(47, 184, 255, 0.7);
    box-shadow: 0 10px 30px rgba(47, 184, 255, 0.25), inset 0 0 0 1px rgba(47, 184, 255, 0.4);
    background: linear-gradient(rgba(24, 32, 79, 0.5) 0%, rgba(24, 32, 79, 0.3) 100%);
}

.search-box i {
    color: var(--home-filter-text, rgba(255, 255, 255, 0.7));
    margin-right: 10px;
    font-size: 0.95rem;
}

.search-box input {
    flex: 1;
    padding: 10px 0;
    background: transparent;
    border: none;
    color: var(--home-filter-text, #fff);
    font-size: 0.95rem;
    outline: none;
}

.search-box input::placeholder {
    color: var(--home-filter-text, rgba(255, 255, 255, 0.55));
}

.province-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.province-filter>div#provinceList {
    display: contents;
}

.province-btn {
    padding: 7px 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.78);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.3s;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

.province-btn:hover {
    border-color: rgba(96, 165, 250, 0.55);
    color: #fff;
    background: rgba(96, 165, 250, 0.18);
    transform: translateY(-1px);
}

.province-btn.active {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 22px rgba(59, 130, 246, 0.45);
}

.create-region-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, #ff6ec4, #7873f5 50%, #4ade80);
    background-size: 200% 200%;
    border: none;
    border-radius: 30px;
    color: #fff;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    transition: all 0.4s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 30px rgba(123, 97, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: gradientShift 6s ease infinite;
}

.create-region-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 18px 40px rgba(123, 97, 255, 0.55);
}

.reorder-region-btn {
    background: linear-gradient(135deg, #06b6d4, #3b82f6 50%, #8b5cf6);
}

/* ==================== 地区网格 ==================== */
.regions-section {
    position: relative;
    z-index: 1;
    max-width: 1254px;
    margin: 0 auto;
    padding: 30px 40px 60px;
    background: transparent;
    border-radius: 20px;
}

.regions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

.region-card {
    position: relative;
    height: 320px;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(209.21deg, rgb(73, 79, 254) 13.57%, rgb(15, 19, 36) 98.38%);
    box-shadow: 0 14px 40px rgba(15, 19, 36, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.6s cubic-bezier(0.075, 0.82, 0.165, 1), box-shadow 0.5s;
    animation: fadeInUp 0.6s ease both;
    isolation: isolate;
}

.region-card:nth-child(4n+2) {
    background: linear-gradient(209.21deg, rgb(242, 136, 133) 13.57%, rgb(233, 79, 102) 98.38%);
}

.region-card:nth-child(4n+3) {
    background: linear-gradient(209.21deg, rgb(99, 232, 200) 13.57%, rgb(33, 84, 158) 98.38%);
}

.region-card:nth-child(4n) {
    background: linear-gradient(209.21deg, rgb(252, 196, 109) 13.57%, rgb(180, 50, 124) 98.38%);
}

.region-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(255, 255, 255, 0.18), transparent 60%);
    pointer-events: none;
    z-index: 1;
}

.region-card:hover {
    transform: translateY(-6px) scale(1.025);
    box-shadow: 0 28px 60px rgba(15, 19, 36, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}

.region-card.sort-mode {
    cursor: grab;
    user-select: none;
}

.region-card.sort-mode.sort-locked {
    cursor: not-allowed;
    opacity: 0.95;
}

.region-card.sort-mode.sort-locked::after {
    content: "全国总榜固定置顶";
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 4;
}

.region-card.sort-mode:active {
    cursor: grabbing;
}

.region-card.dragging {
    opacity: 0.45;
    transform: scale(0.98);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.region-card-cover {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.region-card-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(7, 10, 25, 0.92) 100%);
    z-index: 1;
    pointer-events: none;
}

.region-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.region-card:hover .region-card-cover img {
    transform: scale(1.08);
}

.region-card-cover .cover-placeholder {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.18);
    z-index: 0;
}

.region-card-cover.cover-error img {
    display: none !important;
}

.region-card-cover.cover-error .cover-placeholder {
    display: flex !important;
}

.region-card-province {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    z-index: 3;
    letter-spacing: 0.5px;
}

.region-card-body {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 56px;
    padding: 14px 16px 12px;
    border-radius: 16px;
    background: var(--home-region-card-body-bg, rgba(7, 10, 25, 0.55));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 2;
}

.region-card-name {
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--home-region-card-body-text, #fff);
    margin-bottom: 6px;
    letter-spacing: 1px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.region-card-desc {
    font-size: 0.82rem;
    color: var(--home-region-card-body-text, rgba(255, 255, 255, 0.75));
    margin-bottom: 10px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.region-card-stats {
    display: flex;
    gap: 14px;
    font-size: 0.78rem;
    color: var(--home-region-card-body-text, rgba(255, 255, 255, 0.85));
    flex-wrap: wrap;
}

.region-card-stats i {
    margin-right: 4px;
    color: #60a5fa;
}

.region-card-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.78);
    background: linear-gradient(to top, rgba(7, 10, 25, 0.85), rgba(7, 10, 25, 0.4));
    backdrop-filter: blur(8px);
    z-index: 2;
}

.region-card-footer i {
    color: rgba(255, 255, 255, 0.55);
    margin-right: 4px;
}

/* ==================== 骨架屏（保持原JS兼容） ==================== */
.skeleton-card {
    height: 320px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    overflow: hidden;
    animation: skeletonPulse 1.6s ease-in-out infinite;
}

.skeleton-cover {
    height: 60%;
    background: rgba(255, 255, 255, 0.06);
}

.skeleton-body {
    padding: 18px;
}

.skeleton-line {
    height: 12px;
    background: rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    margin-bottom: 10px;
}

.skeleton-line.w80 {
    width: 80%;
}

.skeleton-line.w60 {
    width: 60%;
}

.skeleton-line.w40 {
    width: 40%;
}

/* ==================== 响应式 ==================== */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 2.4rem;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 1.9rem;
        letter-spacing: 1px;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    .hero-icon {
        font-size: 2.4rem;
    }

    .hero-stats {
        gap: 1.5vw;
    }

    .stat-item {
        padding: 14px 22px;
        min-width: 130px;
    }

    .stat-num {
        font-size: 1.7rem;
    }

    .filter-inner {
        flex-direction: column;
        align-items: stretch;
        padding: 18px;
    }

    .province-filter {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
        scrollbar-width: thin;
    }

    .regions-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .regions-section {
        padding: 20px;
    }

    .region-card {
        height: 300px;
        /* 微信 WebView 快滑时 fadeInUp + backdrop-filter 易导致文字层不重绘 */
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .region-card-province {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(0, 0, 0, 0.62) !important;
    }

    .region-card-body {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(7, 10, 25, 0.88) !important;
    }

    .region-card-footer {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: linear-gradient(to top, rgba(7, 10, 25, 0.96), rgba(7, 10, 25, 0.78)) !important;
    }

    .create-region-btn {
        justify-content: center;
    }
}

/* ==================== 装饰层（纯 CSS 静态装饰） ==================== */
.decor-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* —— 大字背景：内容由超管在管理弹窗里维护，单字位置/字号/颜色全部由 inline style 控制 —— */
.decor-bigchar-host {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.decor-bigchar {
    position: absolute;
    font-family: 'KaiTi', 'STKaiti', '楷体', 'PingFang SC', serif;
    font-weight: 900;
    line-height: 0.9;
    color: rgba(255, 255, 255, 0.025);
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.05);
    user-select: none;
    text-shadow: 0 6px 30px rgba(99, 102, 241, 0.18);
    transform-origin: center center;
    /* --rot 由 inline style 传入；keyframes 把 translateY 叠在 rotate 上 */
    animation: bigCharDrift 18s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes bigCharDrift {

    0%,
    100% {
        transform: translateY(0) rotate(var(--rot, 0deg));
        opacity: 1;
    }

    50% {
        transform: translateY(-18px) rotate(var(--rot, 0deg));
        opacity: 0.7;
    }
}

/* —— 几何浮动形状 —— */
.decor-shape {
    position: absolute;
    pointer-events: none;
    will-change: transform;
}

.decor-circle {
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.6), transparent 65%);
    filter: blur(0.5px);
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.35), inset 0 0 12px rgba(255, 255, 255, 0.15);
    animation: shapeFloat 12s ease-in-out infinite;
}

.decor-circle.s1 {
    top: 10%;
    left: 12%;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.85), transparent 70%);
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.7);
    animation-duration: 8s;
}

.decor-circle.s2 {
    top: 30%;
    right: 18%;
    width: 22px;
    height: 22px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.7), transparent 70%);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.6);
    animation-duration: 14s;
    animation-delay: -3s;
}

.decor-circle.s3 {
    bottom: 18%;
    left: 22%;
    width: 18px;
    height: 18px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.75), transparent 70%);
    box-shadow: 0 0 22px rgba(6, 182, 212, 0.6);
    animation-duration: 10s;
    animation-delay: -5s;
}

.decor-square {
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(2px);
    border-radius: 4px;
    animation: shapeRotate 28s linear infinite;
}

.decor-square.s4 {
    top: 22%;
    left: 32%;
    width: 28px;
    height: 28px;
    transform: rotate(15deg);
    border-color: rgba(255, 215, 0, 0.4);
}

.decor-square.s5 {
    bottom: 24%;
    right: 14%;
    width: 36px;
    height: 36px;
    transform: rotate(-25deg);
    border-color: rgba(139, 92, 246, 0.4);
    animation-duration: 36s;
}

.decor-triangle {
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 24px solid rgba(255, 215, 0, 0.18);
    animation: shapeFloat 16s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.3));
}

.decor-triangle.s6 {
    top: 45%;
    right: 28%;
    transform: rotate(20deg);
    border-bottom-color: rgba(96, 165, 250, 0.18);
    filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.35));
}

.decor-triangle.s7 {
    bottom: 12%;
    left: 45%;
    transform: rotate(-30deg);
    border-bottom-color: rgba(192, 132, 252, 0.2);
    filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.35));
    animation-duration: 18s;
    animation-delay: -4s;
}

.decor-ring {
    border-radius: 50%;
    border: 2px solid transparent;
    background:
        linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) padding-box,
        conic-gradient(from 0deg, rgba(255, 215, 0, 0.5), rgba(139, 92, 246, 0.4), rgba(6, 182, 212, 0.45), rgba(255, 215, 0, 0.5)) border-box;
    animation: ringSpin 20s linear infinite;
}

.decor-ring.s8 {
    top: 65%;
    right: 36%;
    width: 70px;
    height: 70px;
    opacity: 0.45;
}

.decor-ring.s9 {
    top: 6%;
    right: 30%;
    width: 50px;
    height: 50px;
    opacity: 0.4;
    animation-duration: 26s;
}

/* —— 装饰小图标 —— */
.decor-icon {
    position: absolute;
    color: rgba(255, 215, 0, 0.18);
    pointer-events: none;
    animation: iconFloatSlow 9s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.4));
}

.decor-icon.i1 {
    top: 14%;
    left: 26%;
    font-size: 26px;
    color: rgba(255, 215, 0, 0.22);
}

.decor-icon.i2 {
    top: 50%;
    left: 6%;
    font-size: 30px;
    color: rgba(96, 165, 250, 0.2);
    filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.4));
    animation-delay: -2s;
}

.decor-icon.i3 {
    top: 28%;
    right: 8%;
    font-size: 22px;
    color: rgba(139, 92, 246, 0.25);
    filter: drop-shadow(0 0 14px rgba(139, 92, 246, 0.5));
    animation-delay: -4s;
}

.decor-icon.i4 {
    top: 75%;
    right: 22%;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.22);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
    animation-delay: -1s;
}

.decor-icon.i5 {
    bottom: 8%;
    left: 12%;
    font-size: 24px;
    color: rgba(192, 132, 252, 0.22);
    filter: drop-shadow(0 0 12px rgba(192, 132, 252, 0.5));
    animation-delay: -5s;
}

.decor-icon.i6 {
    top: 5%;
    right: 20%;
    font-size: 26px;
    color: rgba(255, 215, 0, 0.22);
    animation-delay: -7s;
}

.decor-icon.i7 {
    top: 62%;
    left: 38%;
    font-size: 22px;
    color: rgba(239, 68, 68, 0.18);
    filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.45));
    animation-delay: -3.5s;
}

/* —— 角落 SVG 装饰 —— */
.decor-corner {
    position: absolute;
    width: 220px;
    height: 220px;
    pointer-events: none;
    opacity: 0.65;
}

.decor-corner.corner-tl {
    top: 0;
    left: 0;
}

.decor-corner.corner-br {
    bottom: 0;
    right: 0;
}

/* —— 顶部装饰条纹 —— */
.decor-stripes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 215, 0, 0.5) 18%,
            rgba(96, 165, 250, 0.6) 38%,
            rgba(192, 132, 252, 0.55) 60%,
            rgba(255, 215, 0, 0.5) 82%,
            transparent 100%);
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.35);
}

/* —— 装饰层动画 —— */
@keyframes shapeFloat {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(8px, -10px) rotate(2deg);
    }

    50% {
        transform: translate(-6px, 12px) rotate(-2deg);
    }

    75% {
        transform: translate(10px, 6px) rotate(3deg);
    }
}

@keyframes shapeRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes ringSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes iconFloatSlow {

    0%,
    100% {
        transform: translateY(0) rotate(-3deg);
        opacity: 1;
    }

    50% {
        transform: translateY(-12px) rotate(3deg);
        opacity: 0.55;
    }
}

/* 让真正的内容浮在装饰层之上。
   注意：不要把 .modal-overlay 加进来——它在 common.css 已经是 position:fixed; z-index:2000，
   被这里的 position:relative; z-index:5 覆盖会导致 modal 打开时变成 inline 块、挤掉滚动条。 */
.top-header,
.hero-banner,
.filter-section,
.regions-section,
.site-footer {
    position: relative;
    z-index: 5;
}

.top-header {
    background: var(--home-header-bg, transparent);
    color: var(--home-header-text, inherit);
}

.top-header .header-btn,
.top-header .user-info,
.top-header .time-display {
    color: var(--home-header-text, inherit);
}

.site-footer {
    background: var(--home-footer-bg, transparent);
}

.site-footer p {
    color: var(--home-footer-text, inherit);
}

/* —— 移动端：减少装饰量、降低性能消耗 —— */
@media (max-width: 768px) {

    /* 装饰大字字号缩到原值 60% 左右；隐藏后半部分 */
    .decor-bigchar-host .decor-bigchar {
        font-size: 14rem !important;
        opacity: 0.6;
    }

    .decor-bigchar-host .decor-bigchar:nth-of-type(n+4) {
        display: none;
    }

    .decor-icon.i3,
    .decor-icon.i4,
    .decor-icon.i7 {
        display: none;
    }

    .decor-shape.s5,
    .decor-shape.s7,
    .decor-ring.s9 {
        display: none;
    }

    .decor-corner {
        width: 140px;
        height: 140px;
        opacity: 0.5;
    }
}

/* ==================== 装饰大字管理弹窗（仅超管） ==================== */
.decor-admin-tip {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: rgba(59, 130, 246, 0.08);
    border-left: 3px solid rgba(59, 130, 246, 0.45);
    border-radius: 6px;
}

.decor-admin-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}

.decor-admin-empty {
    padding: 30px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.decor-admin-row {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    transition: border-color 0.2s;
}

.decor-admin-row:hover {
    border-color: rgba(99, 102, 241, 0.35);
}

.decor-admin-row-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.decor-admin-no {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 700;
    min-width: 28px;
}

.decor-admin-id {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11.5px;
    margin-left: auto;
}

.decor-admin-id em {
    color: #fbbf24;
    font-style: normal;
    font-weight: 700;
}

.decor-admin-row-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.decor-mini-btn {
    padding: 6px 12px !important;
    font-size: 12.5px !important;
}

.decor-input {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    outline: none;
    font-size: 14px;
    font-family: inherit;
}

.decor-input:focus {
    border-color: rgba(99, 102, 241, 0.55);
}

.decor-input-text {
    flex: 0 0 90px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    font-family: 'KaiTi', 'STKaiti', '楷体', sans-serif;
}

.decor-admin-row-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.decor-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}

.decor-field input {
    padding: 7px 10px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    outline: none;
    font-size: 13px;
}

.decor-field input:focus {
    border-color: rgba(99, 102, 241, 0.55);
}

.decor-field-color {
    grid-column: span 2;
    position: relative;
}

.decor-field-color input {
    padding-right: 36px;
    font-family: 'Fira Code', Consolas, monospace;
    font-size: 12px;
}

.decor-color-swatch {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.025);
    pointer-events: none;
}

.decor-admin-actions {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.decor-admin-theme {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}

.decor-admin-theme h4 {
    font-size: 15px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.85);
}

.decor-admin-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.btn-danger.decor-mini-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* —— 用户偏好"减少动画" —— */
@media (prefers-reduced-motion: reduce) {

    .decor-bigchar,
    .decor-shape,
    .decor-icon,
    .hero-icon,
    .hero-title {
        animation: none !important;
    }
}