/* 涓嬫媺鑿滃崟鏍峰紡 */
.dropdown {
    position: relative;
}
.about-rect-content {
    width: 100%;
    padding: 20px 32px;
    color: #fff;
}

.contact-title {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 10px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 7.5px;
    line-height: 1.4;
    margin: 6px 0;
}

.contact-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.wechat-icon {
    background: rgba(7, 193, 96, 0.9);
}

.douyin-icon {
    background: rgba(0, 0, 0, 0.45);
}

.dropdown-menu a {
    transition: background 0.18s;
    box-sizing: border-box;
}
.dropdown-menu a:hover {
    background: #e6f7f1;
}
.dropdown.open .dropdown-menu {
    display: block;
}
/* 鍏ㄥ眬鏍峰紡閲嶇疆 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Microsoft YaHei', sans-serif;
}

body {
    background-color: #f4f4f4;
    color: #1f2d36;
    opacity: 1;
    transition: opacity 0.45s ease;
}

body.home {
    background-image: url('images/WechatIMG262.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
    scroll-padding-top: 70px;
}

body.home .hero,
body.home .trend-section,
body.home .about-section,
body.home .about-rect-wrap {
    scroll-snap-align: start;
}

body.page-fade-out {
    opacity: 0;
}

/* 瀵艰埅鏍?*/
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: rgba(28, 87, 71, 0.85);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    z-index: 1000;
    color: rgb(248, 245, 245);
    transition: background-color .28s ease, backdrop-filter .28s ease, box-shadow .28s ease;
}

.navbar.navbar-scrolled {
    background-color: rgba(28, 87, 71, 0.68);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.logo-container {
    display: flex;
    align-items: center;
    /* 鏂板锛氬浐瀹氬搴︼紝闃叉鍙充晶鍙樺寲褰卞搷灞呬腑 */
    min-width: 180px;
}

.logo {
    height: 40px; /* Logo 澶у皬璋冩暣 */
    margin-right: 15px;
    border-radius: 5px;
}

.site-name {
    font-size: 22px;
    font-weight: bold;
    color: #fff;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 48px;
    align-items: center;
    height: 70px;
}

/* 淇敼澶勶細灏?.nav-links a 鏀逛负 .nav-links > li > a */
/* 杩欐牱鍙€変腑瀵艰埅鏍忕殑绗竴绾ч摼鎺ワ紝涓嶄細璇激 dropdown 閲岀殑閾炬帴 */
.nav-links > li > a {
    text-decoration: none;
    color: #fff;
        font-size: 18px !important;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    height: 70px;
    box-sizing: border-box;
    line-height: 70px;
    padding: 0 16px;
}

.nav-links > li > a:hover {
    color: #fff;
    height: 70px;
    line-height: 70px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 16px;
}

.auth-links {
    min-width: 190px;
    max-width: 300px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: -15px;
}

/* 鍙鐩存帴瀛?<a> 鏍囩鐢熸晥锛屼笉褰卞搷涓嬫媺鑿滃崟涓殑閾炬帴 */
.auth-links > a {
    text-decoration: none;
    color: #fff;
    margin: 0 5px;
}

#userAvatar{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-left: 12px;
    vertical-align: middle;
    cursor: pointer;
    display: inline-block;
    object-fit: cover;
}

/* 鐧诲綍鍚庢牱寮忥細娣诲姞杈规鍜岃儗鏅壊 */
.logged-in #userAvatar {
    border: 1.5px solid #fff;
    background-color: #fff;
}

/* 鐢ㄦ埛澶村儚涓嬫媺鑿滃崟 */
.avatar-dropdown-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0; /* 涓嶈鐢╩argin鎷夊紑璺濈 */
}

.avatar-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    min-width: 160px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 3000;
    padding: 6px 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.avatar-dropdown.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.avatar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    margin: 0; /* 閲嶇疆澶栬竟璺濓紝閬垮厤 .auth-links a 鐨?margin 褰卞搷 */
    color: #333 !important; /* 娣诲姞 !important 瑕嗙洊 <a> 鏍囩鐨勭户鎵块鑹?*/
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    transition: background 0.15s;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    box-sizing: border-box; /* 纭繚 padding 涓嶄細澧炲姞鍏冪礌鎬诲搴?*/
}

.avatar-dropdown-item:hover {
    background: #f0f7f4;
    color: #111 !important; /* 鎮仠鏃朵篃淇濇寔娣辫壊鏂囧瓧 */
}

.avatar-dropdown-item img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Hero 鍖哄煙 */
html, body {
    height: 100%;
}

.hero {
    position: relative;
    width: 100%;
    min-height:100vh;
    background: none;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    isolation: isolate;
}

.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(244, 251, 248, 0) 0%,
        rgba(244, 251, 248, 0.3) 52%,
        rgba(244, 251, 248, 0.78) 82%,
        #f4fbf8 100%
    );
}

/* 鑳屾櫙灞傦細浣跨敤涓や釜灞傝繘琛屼氦鏇挎贰鍏ワ紝閬垮厤鍥為€€鍒板綋鍓嶅浘鐗?*/
.hero-bg {
    position: absolute;
    inset: -2px;
    z-index: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transform: scale(1);
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity .8s ease;
    backface-visibility: hidden;
}


.hero-bg-a { opacity: 1; }

/* 瀵瑰綋鍓嶅彲瑙佸眰搴旂敤鏀惧ぇ鍔ㄧ敾锛堥€氳繃娣诲姞 .zooming 绫昏Е鍙戯級 */
.hero-bg.zooming {
    animation: heroBgZoom var(--hero-zoom-duration, 5s) ease-in-out forwards;
}

@keyframes heroBgZoom {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}


@keyframes heroBgZoom {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #0ba082;
    max-width: 800px;
    padding: 20px;
}

.hero-content h1 {
    font-size: 56px;
    margin-bottom: 20px;
    letter-spacing: 2px;
    animation: heroGlow 3.2s ease-in-out infinite;
}

@keyframes heroGlow {
    0%, 100% { text-shadow: 0 0 0 rgba(11, 160, 130, 0); }
    50% { text-shadow: 0 0 18px rgba(11, 160, 130, 0.28); }
}

.hero-content p {
    font-size: 22px;
    line-height: 1.7;
    margin-bottom: 30px;
    animation: heroSubIn .75s ease .1s both;
}

@keyframes heroSubIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.cta-button{
    display:inline-block;
    background:linear-gradient(135deg, #0ba082 0%, #1c5747 100%);
    color:#fff;
    text-decoration:none;
    padding:14px 40px;
    border-radius:30px;
    font-size:18px;
    font-weight:600;
    transition:all .3s ease;
    box-shadow: 0 6px 20px rgba(11, 160, 130, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2);
    margin-top: 10px;
}
.cta-button:hover{
    transform:translateY(-3px);
    box-shadow: 0 10px 30px rgba(11, 160, 130, 0.45);
    border-color: rgba(255, 255, 255, 0.4);
}
.cta-button:active{
    transform:translateY(-1px);
    box-shadow: 0 5px 15px rgba(11, 160, 130, 0.3);
}

.about-section {
    padding: 48px 20px 80px;
    background: linear-gradient(180deg, #f9fcfb 0%, #eef6f3 100%);
    color: #000;
}

.about-box-wrap {
    max-width: 1160px;
    margin: 0 auto;
}

.about-title {
    font-size: 36px;
    color: #0f4a3a;
    margin-bottom: 18px;
    text-align: left;
    position: relative;
    padding-left: 14px;
    letter-spacing: .5px;
}

.about-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 68%;
    border-radius: 8px;
    background: rgba(28, 87, 71, .92);
}

.about-textbox {
    width: 100%;
    color: #1d2730;
    font-size: 18px;
    line-height: 2;
    white-space: pre-line;
}

.about-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #2e7460;
    margin-bottom: 8px;
    font-weight: 700;
}

.section-kicker::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 4px;
    background: linear-gradient(90deg, #0ba082, rgba(11,160,130,0.15));
}

.content-card {
    background: #fff;
    border: 1px solid rgba(15, 64, 49, 0.12);
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 16px 36px rgba(13, 58, 46, 0.09);
    transition: transform .35s ease, box-shadow .35s ease;
    position: relative;
    overflow: hidden;
}

.content-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 42px rgba(13, 58, 46, 0.14);
}

.content-card::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11,160,130,0.10) 0%, rgba(11,160,130,0) 70%);
}

.about-side-card,
.trend-side-card {
    background: linear-gradient(165deg, rgba(11,160,130,0.12), rgba(28,87,71,0.08));
    border: 1px solid rgba(28,87,71,0.2);
    border-radius: 14px;
    padding: 18px 18px 16px;
    color: #154235;
    box-shadow: 0 10px 24px rgba(13, 58, 46, 0.10);
}

.about-side-card h3,
.trend-side-card h3 {
    font-size: 21px;
    margin-bottom: 10px;
}

.about-side-card ul,
.trend-side-card ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.about-side-card li,
.trend-side-card li {
    margin: 0;
    line-height: 1.6;
    font-size: 15px;
    padding: 10px 0 10px 26px;
    position: relative;
}

.about-side-card li + li,
.trend-side-card li + li {
    border-top: 1px dashed rgba(21, 66, 53, 0.26);
}

.about-side-card li::before,
.trend-side-card li::before {
    content: "✔";
    position: absolute;
    left: 4px;
    top: 10px;
    color: #0b8b70;
    font-weight: 700;
}

.side-note {
    margin-top: 10px;
    font-size: 13px;
    color: #245648;
    background: rgba(255,255,255,0.65);
    border-radius: 10px;
    padding: 8px 10px;
}

.side-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 10px;
}

.side-tag {
    font-size: 12px;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(28,87,71,0.14);
    color: #1d5b48;
    font-weight: 600;
}

.about-rect-wrap {
    display: block;
    padding: 24px 0;
}

.about-rect {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 260px;
    background-color: rgba(28,87,71,0.85); /* 涓庡鑸爮涓€鑷?*/
    border-radius: 0;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start; /* 鏀逛负椤堕儴瀵归綈锛屼娇鍐呭闈犱笂 */
}

.about-rect-content {
    width: 100%;
    padding: 20px 48px; /* 鍑忓皬涓婅竟璺濅娇鍐呭涓婄Щ */
    color: #fff;
}

.contact-title {
    font-size: 24px; /* 鏀惧ぇ鈥滆仈绯绘垜浠€?*/
    font-weight: 700;
    line-height: 1.85;
    margin-bottom: 12px;
}

.contact-item {
    display: block;
    text-align: left;
    font-size: 18px; /* 涓?about-textbox 淇濇寔涓€鑷?*/
    line-height: 1.85;
    margin: 8px 0;
}

.contact-icon-img {
    width: 14px;
    height: 14px;
    display: inline-block;
    object-fit: contain;
    flex-shrink: 0;
    transition: transform .2s ease;
}

.contact-item:hover .contact-icon-img {
    transform: scale(1.12);
}

.contact-link {
    color: #fff;
    text-decoration: underline;
    display: inline-block;
    text-align: left;
}

/* 鍙嶉椤碉細澧炲ぇ 杩斿洖棣栭〉 閾炬帴 涓?鏍囬 闂磋窛 */
.feedback-page .back-link {
    display: inline-block;
    margin-bottom: 48px;
}

/* 鍙嶉椤垫爣棰樹负榛戣壊 */
.feedback-page h1 {
    color: #000 !important;
}

.contact-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.wechat-icon {
    background: rgba(7, 193, 96, 0.9);
}

.douyin-icon {
    background: rgba(0, 0, 0, 0.45);
}

.trend-section {
    padding: 48px 20px 80px;
    background: linear-gradient(180deg, #f4fbf8 0%, #f9fcfb 100%);
    color: #000;
    position: relative;
}

.trend-section::before {
    content: "";
    position: absolute;
    top: -28px;
    left: 0;
    right: 0;
    height: 56px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(244, 251, 248, 1) 0%,
        rgba(244, 251, 248, 0.5) 48%,
        rgba(244, 251, 248, 0) 100%
    );
}

.trend-section::after,
.about-section::after {
    content: "";
    position: absolute;
    right: 5%;
    bottom: 8%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11,160,130,0.08) 0%, rgba(11,160,130,0) 70%);
    pointer-events: none;
}

.trend-box-wrap {
    max-width: 1160px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.trend-title {
    font-size: 36px;
    color: #0f4a3a;
    margin-bottom: 18px;
    text-align: left;
    position: relative;
    padding-left: 14px;
    letter-spacing: .5px;
}

.trend-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 68%;
    border-radius: 8px;
    background: rgba(28, 87, 71, .92);
}

.trend-textbox {
    width: 100%;
    color: #1d2730;
    font-size: 18px;
    line-height: 2;
    white-space: pre-line;
    transition: transform .4s ease, box-shadow .4s ease, opacity .4s ease;
}

.trend-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}

.about-textbox {
    transition: transform .4s ease, box-shadow .4s ease, opacity .4s ease;
}

@media (max-width: 980px) {
    .trend-layout,
    .about-layout {
        grid-template-columns: 1fr;
    }

    .trend-title,
    .about-title {
        font-size: 30px;
    }

    .about-side-card,
    .trend-side-card {
        margin-top: 2px;
    }

    .content-card {
        padding: 22px;
    }

    .trend-section::after,
    .about-section::after {
        width: 140px;
        height: 140px;
        right: 2%;
    }
}

@media (max-width: 640px) {
    .trend-section,
    .about-section {
        padding: 38px 14px 62px;
    }

    .content-card {
        padding: 18px;
        border-radius: 14px;
    }

    .trend-textbox,
    .about-textbox {
        font-size: 16px;
        line-height: 1.9;
    }
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-on-scroll.is-visible .trend-textbox,
.reveal-on-scroll.is-visible .about-textbox {
    box-shadow: 0 12px 30px rgba(13, 58, 46, 0.1);
}

.reveal-on-scroll .content-card,
.reveal-on-scroll .trend-side-card,
.reveal-on-scroll .about-side-card {
    opacity: .88;
    transform: translateY(10px);
    transition: transform .45s ease, opacity .45s ease;
}

.reveal-on-scroll.is-visible .content-card,
.reveal-on-scroll.is-visible .trend-side-card,
.reveal-on-scroll.is-visible .about-side-card {
    opacity: 1;
    transform: translateY(0);
}

/* 鏍囧噯閫熸煡鍖哄煙 */
.standards-section {
    padding: 60px 20px;
    background-color: rgb(12, 12, 12);
    text-align: center;
}

.standards-section h2 {
    font-size: 36px;
    margin-bottom: 40px;
    color: #fff;
}

.standards-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.standard-card {
    background: #0d0d0d;
    border: 1px solid #0c0c0c;
    padding: 30px;
    width: 300px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: left;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #0e0e0e;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.standard-card.basic .card-header { border-color: #4a90e2; }
.standard-card.advanced .card-header { border-color: #f5a623; }

.standard-card h3 {
    margin: 0;
    font-size: 24px;
    color: #fff;
}

.standard-card.basic h3 { color: #fff; }
.standard-card.advanced h3 { color: #fff; }

.score {
    font-size: 22px;
    font-weight: bold;
    color: #fff;
}

.standard-card ul {
    list-style: none;
    padding: 0;
}

.standard-card li {
    font-size: 18px;
    margin-bottom: 10px;
    color: #fff;
    display: flex;
    align-items: center;
}

.standard-card li::before {
    content: "•";
    color: #fff;
    margin-right: 10px;
}
/* 瀵艰埅鎸夐挳锛氭偓娴笅鍒掔嚎鏁堟灉锛堜笅鍒掔嚎涓洪粦鑹诧級*/
.nav-button {
    position: relative;
    color: #fff;
    text-decoration: none;
    padding: 4px 0;
    transition: color .18s ease;
    outline: none;
}

/* 淇敼锛氬皢涓嬪垝绾跨洰鏍囨敼涓?span锛屼娇鍏朵粎瀵瑰簲鏂囧瓧瀹藉害锛屽拷鐣ュ浘鏍?*/
.nav-button span {
    position: relative;
    display: inline-block;
}

.nav-button span::after {
    content: "";
    position: absolute;
    left: 50%;
    /* 淇敼锛氱浉瀵逛簬鏂囧瓧搴曢儴瀹氫綅锛屼笉鍐嶅彈瀵艰埅鏍忛珮搴﹀奖鍝?*/
    bottom: 10px;
    width: 0;
    height: 3px;
    background: #000;
    transform: translateX(-50%);
    transition: width .22s ease;
}

/* 淇敼锛歨over 瑙﹀彂 span 鐨勪吉鍏冪礌 + 瀹藉害鏀逛负 80% (鏂囧瓧瀹藉害) */
.nav-button:hover span::after,
.nav-button:focus span::after {
    width: 80%; /* 鎮ㄥ彲浠ユ牴鎹枩濂芥敼涓?100% */
}

.nav-button.is-active span::after {
    width: 80%;
}

.nav-button.is-active {
    color: #fff;
}

.nav-button:hover,
.nav-button:focus {
    color: #fff;
}

/* 鐧诲綍娉ㄥ唽妯℃€佹鏍峰紡 */
.modal-overlay {
    display: none; /* 榛樿闅愯棌 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* 娣辫壊鍗婇€忔槑閬僵 */
    z-index: 2000; /* 纭繚鍦ㄥ鑸爮涔嬩笂 */
    backdrop-filter: blur(4px); /* 鑳屾櫙妯＄硦鏁堟灉 */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
}

.modal-box {
    background: #fff;
    width: 90%;
    max-width: 420px;
    padding: 32px 40px;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    text-align: center;
}

.modal-overlay.active .modal-box {
    transform: translateY(0);
}

.close-btn {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}

.close-btn:hover {
    color: #333;
}

.modal-header h2 {
    font-size: 26px;
    margin-bottom: 8px;
    color: #222;
}

.modal-header p {
    font-size: 14px;
    color: #666;
    margin-bottom: 28px;
}

#upper-input-group{
    margin-bottom: 0px;
}

#lower-input-group{
    margin-top: 20px;
}

.input-group {
    margin-top: 30px;
    margin-bottom: 10px;
}

.input-group input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 16px;
    background-color: #f9f9f9;
    transition: all 0.2s;
    outline: none;
}

.input-group input:focus {
    border-color: #0b79d0;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(11, 121, 208, 0.1);
}

.submit-btn {
    width: 100%;
    padding: 14px;
    background-color: #0b79d0;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s, transform 0.1s;
    margin-top: 10px;
}

.submit-btn:hover {
    filter: brightness(1.08);
}

.submit-btn:active {
    transform: scale(0.98);
}

.modal-footer {
    margin-top: 24px;
    font-size: 13px;
    color: #888;
}

/* GitHub 登录相关样式 */
.modal-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    gap: 12px;
}

.modal-divider::before,
.modal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: #e0e0e0;
}

.modal-divider span {
    color: #999;
    font-size: 14px;
    font-weight: 500;
}

.github-login-btn {
    width: 100%;
    padding: 14px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s, transform 0.1s, background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.github-login-btn:hover {
    background-color: #1a1a1a;
    filter: brightness(1.1);
}

.github-login-btn:active {
    transform: scale(0.98);
}

.qq-login-btn {
    width: 100%;
    padding: 14px;
    background-color: #0c66eb;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s, transform 0.1s, background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.qq-login-btn:hover {
    background-color: #0a4fb8;
    filter: brightness(1.1);
}

.qq-login-btn:active {
    transform: scale(0.98);
}

.avatar-dropdown-userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0 10px 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 6px;
}
.avatar-dropdown-userinfo img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.avatar-dropdown-userinfo #dropdownUsername {
    font-size: 15px;
    color: #222;
    font-weight: 700;
    word-break: break-all;
    text-align: center;
}

/* Plus浼氬憳鎸夐挳鏍峰紡 */
.plus-member-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    display: none; /* 榛樿闅愯棌 */
    align-items: center;
    justify-content: center;
    background: #fcc887; /* 娴呮鑹?*/
    border: none;
    border-radius: 14px;
    padding: 8px 18px;
    margin-right: 20px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.plus-member-btn:hover {
    background: #ffc267; /* 鎮诞鏃惰緝娣辨鑹?*/
}

.plus-member-btn span {
    display: inline-block;
    letter-spacing: 1px;
    color: #f57c00;
}
/* ===== 全局 Toast 提示 ===== */
#toast {
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 30, 40, 0.88);
    color: #fff;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    white-space: pre-wrap;
    max-width: 380px;
    text-align: center;
    line-height: 1.5;
    transition: opacity .22s, transform .22s;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}
#toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(6px);
}