*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background: radial-gradient(circle at top, #06071a 0, #02030b 50%, #010208 100%);
    color: #f5f7ff;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow-x: hidden;
}

#bg-stars {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: block;
    pointer-events: none;
}

.page-home,
.page-explore {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    background: linear-gradient(
        130deg,
        #1a1e3b,
        #05030f,
        #1f1435,
        #05030f
    );
    background-size: 200% 200%;
    opacity: 0.9;
    animation: bgSlowMove 26s linear infinite;
    pointer-events: none;
}

body::after {
    content: "";
    position: fixed;
    inset: -50px;
    z-index: -2;
    background-image:
        radial-gradient(2px 2px at 10px 20px, rgba(255, 255, 255, 0.95) 0, transparent 60%),
        radial-gradient(1.5px 1.5px at 140px 80px, rgba(255, 255, 255, 0.8) 0, transparent 60%),
        radial-gradient(1.8px 1.8px at 220px 200px, rgba(144, 190, 255, 0.9) 0, transparent 60%),
        radial-gradient(1.2px 1.2px at 320px 40px, rgba(255, 193, 120, 0.85) 0, transparent 60%),
        radial-gradient(1.5px 1.5px at 40px 260px, rgba(255, 255, 255, 0.8) 0, transparent 60%);
    background-size: 260px 260px, 320px 320px, 380px 380px, 420px 420px, 480px 480px;
    opacity: 0.7;
    mix-blend-mode: screen;
    animation:
        starsDrift 38s linear infinite,
        starsTwinkle 4s ease-in-out infinite alternate;
    pointer-events: none;
}

.main-container::before {
    content: "";
    position: fixed;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    width: 1200px;
    height: 1200px;
    background: radial-gradient(circle at center, rgba(65, 105, 225, 0.28), transparent 70%);
    z-index: -1;
    pointer-events: none;
}

@keyframes bgSlowMove {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 60%; }
    100% { background-position: 0% 100%; }
}

@keyframes starsDrift {
    0% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(-40px, 40px, 0); }
    100% { transform: translate3d(0, 80px, 0); }
}

@keyframes starsTwinkle {
    0% { opacity: 0.45; }
    50% { opacity: 0.9; }
    100% { opacity: 0.6; }
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* 头部 */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;          /* 垂直居中 */
    justify-content: space-between;
    padding: 12px 40px;
    background: linear-gradient(to bottom, rgba(5, 7, 17, 0.96), rgba(5, 7, 17, 0.86));
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(120, 152, 255, 0.35);
}

/* 整个 logo 区域变成可点击 */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 20px;
    color: #ffffff;
    text-decoration: none;
    flex-shrink: 0;
}

.logo img {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 0 10px rgba(120, 152, 255, 0.9);
}

.logo-text {
    line-height: 1;               /* 标题不拉高 */
}

.header-right {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: #a6afc8;
    margin-left: auto;
}

.lang-select-wrapper {
    display: inline-flex;
}

/* 语言下拉本身做成短一点的 pill */
.lang-select {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(160, 180, 255, 0.6);
    background: radial-gradient(circle at top left, #1f2440, #0b0f1f);
    color: #f0f3ff;
    font-size: 13px;
    outline: none;
    appearance: none;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(120, 152, 255, 0.45);
    max-width: 110px;             /* 限制最大宽度，变短 */
    white-space: nowrap;
}

/* 顶部提交按钮保持原来的渐变样式 */
.header-link-submit {
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 14px;
    background: linear-gradient(135deg, #ff6b9d, #ffb86c);
    box-shadow: 0 0 12px rgba(255, 107, 157, 0.7);
    color: #0b0813;
    font-weight: 500;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, filter 0.12s ease-out;
}

.header-link-submit:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(255, 130, 170, 0.9);
}





/* 主容器 */
.main-container {
    flex: 1;
    width: 100%;
    max-width: 1180px;
    margin: 18px auto 40px;
    padding: 0 20px 40px;
}

.ads-top,
.ads-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin-bottom: 24px;
}

.ad-slot {
    position: relative;
    flex: 1 1 260px;
    max-width: 100%;
    min-height: 90px;
    border-radius: 14px;
    background: radial-gradient(circle at top, #222b52 0, #050713 55%, #020308 100%);
    border: 1px solid rgba(163, 189, 255, 0.9);
    overflow: hidden;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.9),
        0 0 16px rgba(120, 152, 255, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.16s ease-out, box-shadow 0.16s ease-out, border-color 0.16s ease-out;
}

.ad-slot::before {
    content: "";
    position: absolute;
    inset: -35%;
    background:
        radial-gradient(circle at 0 0, rgba(120, 152, 255, 0.35), transparent 60%),
        radial-gradient(circle at 100% 100%, rgba(255, 122, 180, 0.35), transparent 60%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
}

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

.ad-slot:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 16px 30px rgba(0, 0, 0, 0.98),
        0 0 24px rgba(120, 152, 255, 0.95);
    border-color: rgba(220, 230, 255, 1);
}

.ad-slot:hover::before {
    opacity: 1;
}

.ad-placeholder {
    font-size: 13px;
    color: #c9d1ff;
    border-style: dashed;
    border-width: 1px;
    border-color: rgba(190, 202, 255, 0.9);
    background: repeating-linear-gradient(
        135deg,
        #151a35,
        #151a35 8px,
        #101325 8px,
        #101325 16px
    );
}

.hero-card {
    margin: 0 auto 30px;
    position: relative;
}

.hero-card::before {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: 30px;
    border: 2px solid transparent;
    background:
        conic-gradient(
            from 0deg,
            rgba(120, 152, 255, 0.0),
            rgba(120, 152, 255, 0.9),
            rgba(255, 122, 180, 0.9),
            rgba(255, 184, 108, 0.9),
            rgba(120, 152, 255, 0.0)
        );
    opacity: 0.75;
    mix-blend-mode: screen;
    z-index: -1;
    animation: ringRotate 18s linear infinite;
}

.hero-card-inner {
    position: relative;
    border-radius: 24px;
    padding: 50px 40px 46px;
    background: radial-gradient(circle at top, #252b4f 0, #050713 55%, #020308 100%);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.95),
        0 0 26px rgba(120, 152, 255, 0.55);
    text-align: center;
    overflow: hidden;
}

.hero-card-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 40%,
        transparent 80%
    );
    mix-blend-mode: soft-light;
    opacity: 0.55;
    pointer-events: none;
    animation: cardShine 10s linear infinite;
}

.hero-title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 14px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow:
        0 0 8px rgba(120, 152, 255, 0.9),
        0 0 14px rgba(0, 0, 0, 0.9);
}

.hero-subtitle {
    font-size: 14px;
    color: #ced5ff;
    margin-bottom: 26px;
}

.hero-main-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 70px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    background: linear-gradient(
        90deg,
        #ff4fa1,
        #ffb86c,
        #6af7e5,
        #7898ff,
        #ff4fa1
    );
    background-size: 260% 260%;
    color: #160417;
    box-shadow:
        0 0 18px rgba(255, 79, 161, 0.95),
        0 0 34px rgba(255, 184, 108, 0.9),
        0 0 60px rgba(255, 255, 210, 0.9);
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
    animation:
        btnGradient 4s linear infinite,
        btnPulse 2.4s ease-in-out infinite;
}

.hero-main-button::after {
    content: "➜";
    margin-left: 10px;
    font-size: 18px;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
}

.hero-main-button::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: inherit;
    border: 2px solid rgba(255, 255, 255, 0.7);
    mix-blend-mode: screen;
}

.hero-desc {
    font-size: 13px;
    color: #a6afc8;
    position: relative;
}

.hero-main-button + .hero-desc::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translate(-50%, 100%);
    width: 240px;
    height: 60px;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.5),
        transparent 70%
    );
    opacity: 0.55;
    z-index: -1;
}

.hero-main-button:hover {
    filter: brightness(1.1);
    transform: translateY(-3px) scale(1.04);
    box-shadow:
        0 0 22px rgba(255, 79, 161, 1),
        0 0 40px rgba(255, 184, 108, 1),
        0 0 70px rgba(255, 255, 220, 1);
}

@keyframes ringRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes btnGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes btnPulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.05); }
}

@keyframes cardShine {
    0% { transform: translateX(-60%); }
    100% { transform: translateX(60%); }
}

.explore-card {
    margin: 0 auto 24px;
}

.explore-main {
    position: relative;
    border-radius: 24px;
    padding: 30px 40px 30px;
    background: radial-gradient(circle at top left, #293665 0, #13162e 48%, #070713 100%);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.9),
        0 0 20px rgba(120, 152, 255, 0.4);
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr);
    gap: 26px;
}

.explore-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.explore-title {
    font-size: 20px;
    font-weight: 600;
}

.explore-domain {
    font-size: 13px;
    color: #9ca6c8;
    word-break: break-all;
}

.explore-desc {
    font-size: 13px;
    color: #c3cae8;
    line-height: 1.6;
}

.explore-meta {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.badge {
    padding: 3px 9px;
    font-size: 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: radial-gradient(circle at top left, #29304a, #141826);
    color: #e5e9ff;
}

.explore-thumb-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.explore-thumb-img {
    width: 100%;
    max-width: 420px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.9);
}

.explore-thumb-img.is-favicon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}

.explore-thumb-placeholder {
    width: 100%;
    max-width: 420px;
    height: 230px;
    border-radius: 18px;
    background: repeating-linear-gradient(
        -45deg,
        #1d2138,
        #1d2138 6px,
        #181b30 6px,
        #181b30 12px
    );
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9098c3;
    font-size: 13px;
}

.explore-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 24px;
    border-radius: 999px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.16s ease-out;
}

.btn-primary {
    background: linear-gradient(135deg, #ff7ab4, #ffb86c);
    color: #120618;
    box-shadow:
        0 0 12px rgba(255, 122, 180, 0.75),
        0 10px 22px rgba(0, 0, 0, 0.65);
}

.btn-primary:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.btn-secondary {
    background: radial-gradient(circle at top left, #252d49, #141827);
    color: #d7ddff;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.24);
}

.explore-countdown {
    margin-top: 10px;
    font-size: 13px;
    color: #a3acd2;
}


#seo-section,
.seo-section {
    margin: 30px auto 24px;
}

.seo-card,
.seo-section-inner {
    border-radius: 18px;
    padding: 22px 26px 20px;
    background: radial-gradient(circle at top left, #23263c 0, #111320 52%, #070713 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ccd2f4;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.85);
}

.seo-title,
.seo-section-inner h2 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.seo-text,
.seo-section-inner p {
    font-size: 13px;
    line-height: 1.7;
    color: #b4bcde;
    margin-bottom: 8px;
}

.seo-keywords-title,
.seo-section-inner h3 {
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
    margin-bottom: 6px;
    color: #dfe4ff;
}

.seo-keywords-list,
.seo-section-inner .seo-keywords {
    font-size: 12px;
    line-height: 1.8;
    color: #98a0c7;
}


.footer {
    padding: 16px 20px 22px;
    text-align: center;
    font-size: 12px;
    color: #7c84a5;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: radial-gradient(circle at top, #0c0f1d, #050712);
}


.page-explore .explore-actions .btn {
    min-width: 220px;
    padding: 11px 26px;
    font-size: 15px;
    font-weight: 600;
}

.page-explore .btn-random-again {
    background: linear-gradient(135deg, #38bdf8, #6366f1) !important;
    color: #e5edff !important;
    box-shadow:
        0 0 12px rgba(56, 189, 248, 0.85),
        0 10px 22px rgba(15, 23, 42, 0.9);
}

.page-explore .btn-random-again:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow:
        0 0 18px rgba(56, 189, 248, 1),
        0 14px 26px rgba(15, 23, 42, 0.95);
}



@media (max-width: 960px) {
    .header {
        padding: 10px 16px;
    }

    .main-container {
        padding: 0 14px 32px;
        margin-top: 14px;
    }

    .hero-card-inner {
        padding: 30px 22px 32px;
    }

    .hero-main-button {
        padding: 14px 40px;
        width: 100%;
    }

    .explore-main {
        grid-template-columns: minmax(0, 1fr);
        padding: 24px 20px 26px;
    }

    .explore-thumb-wrap {
        order: -1;
    }
}

@media (max-width: 640px) {
    .header {
        padding: 10px 12px;
        column-gap: 10px;
        flex-wrap: nowrap;           /* ✅ 不要换行，三块在同一行 */
    }

    .logo {
        font-size: 18px;
        max-width: 45%;
    }

    .header-right {
        gap: 8px;
        margin-left: auto;
        flex-shrink: 0;
    }

    .header-link-submit {
        padding: 6px 14px;
        font-size: 13px;
    }

    .lang-select {
        padding: 6px 12px;
        font-size: 12px;
        max-width: 90px;             /* 再短一点 */
    }

    .hero-title {
        font-size: 22px;
    }

    .hero-subtitle {
        font-size: 13px;
    }

    .hero-main-button {
        width: 100%;
        padding: 14px 40px;
    }

    .ads-top,
    .ads-bottom {
        gap: 12px;
    }

    .ad-slot {
        min-height: 80px;
    }

    .seo-card,
    .seo-section-inner {
        padding: 18px 16px 16px;
    }
}


/* ==== 顶部对齐 & 语言按钮缩短（覆盖前面的样式） ==== */

/* logo 做成链接后，保持行高一致 */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #ffffff;
}

.logo span {
    display: block;
    line-height: 1; /* 防止字往下“垂”一点 */
}

/* 右侧整体垂直居中 */
.header-right {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* 语言按钮做短一点 */
.lang-select-wrapper {
    display: inline-flex;
}

.lang-select {
    padding: 6px 14px;      /* 原来 6px 28px，横向缩短 */
    min-width: auto;
    max-width: 140px;       /* 限制不要太长 */
}

/* 小屏幕上强制一行居中对齐，避免 wrap 导致看起来不齐 */
@media (max-width: 640px) {
    .header {
        flex-wrap: nowrap;  /* 覆盖之前的 wrap */
        align-items: center;
    }

    .header-right {
        flex-shrink: 0;
    }
}