* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

body {
    font-family: 'Poppins', sans-serif;
    background:
        /* Noise texture - very subtle */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"),
        /* Gradient background */
        linear-gradient(135deg, #FAF7F2 0%, #F9F2E0 30%, #FFF5E6 60%, #FFE8CC 100%);
    background-attachment: fixed;
    min-height: 100vh;
    overflow-x: hidden;
    padding-top: 0;
}

/* Custom Font - 李旭科书法 */
@font-face {
    font-family: 'LiXukeCalligraphy';
    src: url('fonts/李旭科书法.woff2') format('woff2'),
        url('fonts/李旭科书法.woff') format('woff'),
        url('fonts/李旭科书法.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Navigation Bar - Orange */
.navbar {
    position: fixed;
    top: 40px;
    left: 20px;
    z-index: 1000;
    padding: 0;
    /* 默认使用收缩状态的液体玻璃效果，避免页面加载时的样式闪烁 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
    transition: min-width 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: auto;
    min-width: auto;
    max-width: fit-content;
    will-change: min-width;
    overflow: visible;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.navbar-collapsed {
    width: auto;
    min-width: auto;
    max-width: fit-content;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
}

/* 收缩状态下的文字颜色：日间模式黑色 */
.navbar-collapsed .logo-text {
    color: #000000;
}

.navbar-collapsed .toggle .icon {
    color: #000000;
}

/* 收缩状态：语言切换按钮样式（日间模式黑色文字） */
.navbar-collapsed #button-3 .knobs:before,
.navbar-collapsed:hover #button-3 .knobs:before {
    color: #000000 !important;
    background-color: transparent !important;
}

.navbar-collapsed #button-3 .layer,
.navbar-collapsed:hover #button-3 .layer {
    background-color: transparent !important;
}

.navbar-collapsed #button-3 .checkbox:checked+.knobs:before,
.navbar-collapsed:hover #button-3 .checkbox:checked+.knobs:before {
    color: #000000 !important;
    background-color: transparent !important;
}

.navbar-collapsed #button-3 .checkbox:checked~.layer,
.navbar-collapsed:hover #button-3 .checkbox:checked~.layer {
    background-color: transparent !important;
}

.navbar-collapsed:hover {
    width: auto;
    max-width: fit-content;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.12),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
}

/* 悬浮展开时，日间模式文字为黑色 */
.navbar-collapsed:hover .logo-text {
    color: #000000;
}

.navbar-collapsed:hover .nav-link {
    color: #000000;
}

.navbar-collapsed:hover .nav-link::after {
    background: #000000;
}

.navbar-collapsed:hover .nav-link.active::after {
    background: #000000;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.navbar-collapsed:hover .toggle .icon {
    color: #000000;
}

.navbar-collapsed:hover .toggle {
    background: transparent;
    border: none;
}

.navbar-collapsed:hover .toggle:hover {
    background: transparent;
}


/* 展开状态：与悬浮展开保持一致 */
.navbar-expanded {
    width: auto;
    min-width: 500px;
    max-width: fit-content;
    /* 展开状态使用橙色背景 */
    background: #f4520d;
    border: 1px solid rgba(244, 82, 13, 0.8);
    box-shadow: 0 8px 32px 0 rgba(244, 82, 13, 0.2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 首页和最后一页展开状态：背景透明，文字黑色 */
body.on-welcome-page .navbar-expanded,
body.on-contact-page .navbar-expanded {
    background: transparent;
    border: none;
    box-shadow: none;
}

body.on-welcome-page .navbar-expanded .logo-text,
body.on-welcome-page .navbar-expanded .nav-link,
body.on-contact-page .navbar-expanded .logo-text,
body.on-contact-page .navbar-expanded .nav-link {
    color: #000000;
}

body.on-welcome-page .navbar-expanded .nav-link::after,
body.on-contact-page .navbar-expanded .nav-link::after {
    background: #000000;
}

body.on-welcome-page .navbar-expanded .nav-link.active::after,
body.on-contact-page .navbar-expanded .nav-link.active::after {
    background: #000000;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

/* 首页和最后一页展开时，语言切换和日夜模式图标也变为黑色 */
body.on-welcome-page .navbar-expanded .toggle .icon,
body.on-contact-page .navbar-expanded .toggle .icon {
    color: #000000;
}

body.on-welcome-page .navbar-expanded .toggle,
body.on-contact-page .navbar-expanded .toggle {
    background: transparent;
    border: none;
}

body.on-welcome-page .navbar-expanded .toggle:hover,
body.on-contact-page .navbar-expanded .toggle:hover {
    background: transparent;
}

/* 首页和最后一页展开时，语言切换按钮文字也变为黑色 */
/* 展开状态：日间模式黑色文字 */
.navbar-expanded #button-3 .knobs:before {
    color: #000000 !important;
    background-color: transparent !important;
}

.navbar-expanded #button-3 .checkbox:checked+.knobs:before {
    color: #000000 !important;
    background-color: transparent !important;
}

.navbar-expanded #button-3 .layer {
    background-color: transparent !important;
}

.navbar-expanded #button-3 .checkbox:checked~.layer {
    background-color: transparent !important;
}

/* 首页和最后一页展开状态：使用透明背景和黑色文字 */
body.on-welcome-page .navbar-expanded #button-3 .knobs:before,
body.on-contact-page .navbar-expanded #button-3 .knobs:before {
    color: #000000;
    background-color: rgba(0, 0, 0, 0.15);
}

body.on-welcome-page .navbar-expanded #button-3 .checkbox:checked+.knobs:before,
body.on-contact-page .navbar-expanded #button-3 .checkbox:checked+.knobs:before {
    color: #000000;
    background-color: rgba(0, 0, 0, 0.15);
}

body.on-welcome-page .navbar-expanded #button-3 .layer,
body.on-contact-page .navbar-expanded #button-3 .layer {
    background-color: rgba(0, 0, 0, 0.1);
}

body.on-welcome-page .navbar-expanded #button-3 .checkbox:checked~.layer,
body.on-contact-page .navbar-expanded #button-3 .checkbox:checked~.layer {
    background-color: rgba(0, 0, 0, 0.1);
}

.nav-container {
    max-width: 100%;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 30px;
    gap: 30px;
    height: 60px;
    min-height: 60px;
    max-height: 60px;
    transition: padding 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        gap 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        justify-content 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: padding, gap, justify-content;
    overflow: visible;
    position: relative;
    box-sizing: border-box;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.navbar-collapsed .nav-container {
    padding: 18px 20px;
    gap: 0;
    justify-content: center;
    height: 60px;
    min-height: 60px;
    max-height: 60px;
}

.navbar-collapsed:hover .nav-container {
    padding: 18px 30px;
    gap: 30px;
    justify-content: space-between;
    height: 60px;
    min-height: 60px;
    max-height: 60px;
}

.navbar-expanded .nav-container {
    padding: 18px 30px;
    gap: 30px;
    justify-content: space-between;
    height: 60px;
    min-height: 60px;
    max-height: 60px;
}

.nav-logo {
    display: flex;
    align-items: center;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.navbar-collapsed .nav-logo {
    transform: scale(0.9);
}

.navbar-expanded .nav-logo {
    transform: scale(1);
}

.logo-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.logo-link:hover {
    transform: scale(1.05);
}

.logo-text {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #F9F2E0;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.logo-image {
    height: 100px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.logo-link:hover .logo-image {
    transform: scale(1.05);
}

/* Logo theme switching */
.logo-dark {
    display: none;
}

body.dark-mode .logo-light {
    display: none;
}

body.dark-mode .logo-dark {
    display: block;
}

@keyframes gradient-shift {

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

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

.logo-link:hover .logo-text {
    transform: scale(1.05);
}

.logo-chinese {
    font-family: 'Poppins', 'Microsoft YaHei', 'SimHei', sans-serif;
    font-size: 26px;
    font-weight: 500;
    color: #F9F2E0 !important;
    letter-spacing: 2px;
    margin-left: 8px;
    position: relative;
    display: inline-block;
    visibility: visible;
    opacity: 1;
    -webkit-text-fill-color: #F9F2E0 !important;
    background: none !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
}


.nav-links {
    display: flex;
    align-items: center;
    gap: 40px;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
        transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
        max-width 0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
        width 0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
        gap 0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
        margin-left 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);
    overflow: visible;
    will-change: opacity, transform, max-width, width;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.navbar-collapsed .nav-links {
    opacity: 0;
    transform: translateX(-20px) scale(0.95);
    max-width: 0;
    width: 0;
    gap: 0;
    margin-left: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        gap 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-collapsed:hover .nav-links {
    opacity: 1;
    transform: translateX(0) scale(1);
    max-width: 1000px;
    width: auto;
    gap: 40px;
    margin-left: 20px;
    pointer-events: auto;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
        transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
        max-width 0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
        width 0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
        gap 0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
        margin-left 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.navbar-expanded .nav-links {
    opacity: 1;
    transform: translateX(0) scale(1);
    max-width: 1000px;
    width: auto;
    gap: 40px;
    margin-left: 20px;
    pointer-events: auto;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
        transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
        max-width 0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
        width 0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
        gap 0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
        margin-left 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.nav-link {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #F9F2E0;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    white-space: nowrap;
    min-width: 60px;
    text-align: center;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: #F9F2E0;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Active/Current page indicator - only underline */
.nav-link.active::after {
    width: 100%;
    height: 3px;
    background: #F9F2E0;
    box-shadow: 0 0 8px rgba(249, 242, 224, 0.6);
}

/* Dropdown Menu for Contact */
.nav-link-dropdown {
    position: relative;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
    background: #1387C0;
    backdrop-filter: blur(50px) saturate(200%);
    -webkit-backdrop-filter: blur(50px) saturate(200%);
    border: 1px solid rgba(19, 135, 192, 0.8);
    border-radius: 50px;
    box-shadow: 0 8px 32px 0 rgba(19, 135, 192, 0.2);
    padding: 12px 30px;
    display: flex;
    align-items: center;
    gap: 40px;
    min-width: auto;
    width: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
    z-index: 1001;
    white-space: nowrap;
}

/* 添加连接区域，防止鼠标移动时菜单消失 */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 15px;
    background: transparent;
}

.nav-link-dropdown:hover .dropdown-menu,
.dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Ensure dropdown is hidden when navbar is collapsed but not hovering on the dropdown */
.navbar-collapsed .dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Only show dropdown when hovering on nav-link-dropdown, even in collapsed navbar */
.navbar-collapsed .nav-link-dropdown:hover .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    background: transparent;
    border: none;
    text-align: center;
    cursor: pointer;
    border-radius: 25px;
    white-space: nowrap;
}

.dropdown-item:hover {
    background: rgba(2, 119, 189, 0.1);
    color: #01579b;
}

.dropdown-item:active {
    transform: scale(0.95);
}

.dropdown-placeholder {
    opacity: 0.6;
    cursor: default;
}

.dropdown-placeholder:hover {
    background: rgba(2, 119, 189, 0.05);
}

.dropdown-icon {
    flex-shrink: 0;
    color: #ffffff;
    transition: color 0.3s ease, transform 0.3s ease;
}

.dropdown-item:hover .dropdown-icon {
    color: #ffffff;
    transform: scale(1.1);
}

.dropdown-text {
    white-space: nowrap;
}

.copy-success {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(2, 119, 189, 0.9);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 15;
    white-space: nowrap;
}

.copy-success.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) translateY(-50px);
}

.copy-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #B22A2A;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 10;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
}

.copy-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #B22A2A;
}

#copyEmailBtn:hover .copy-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

/* 当显示复制成功消息时，隐藏tooltip */
#copyEmailBtn:active .copy-tooltip,
.copy-success.show~.copy-tooltip {
    opacity: 0;
    visibility: hidden;
}

body.dark-mode .copy-tooltip {
    background: #B22A2A;
    color: #ffffff;
}

body.dark-mode .copy-tooltip::after {
    border-top-color: #B22A2A;
}

/* Dark mode support for dropdown */
body.dark-mode .dropdown-menu {
    background: #1387C0;
    border: 1px solid rgba(19, 135, 192, 0.8);
}

body.dark-mode .dropdown-item {
    color: #ffffff;
}

body.dark-mode .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

body.dark-mode .dropdown-icon {
    color: #ffffff;
}

body.dark-mode .dropdown-item:hover .dropdown-icon {
    color: #ffffff;
}

body.dark-mode .dropdown-placeholder:hover {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .copy-success {
    background: rgba(100, 181, 246, 0.9);
    color: #fff;
}


/* Language Toggle Button - Switch Form */
.toggle-button-cover {
    display: flex;
    position: relative;
    width: 36px;
    height: 24px;
    min-width: 36px;
    max-width: 36px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.button-cover {
    height: 24px;
    margin: 0;
    background-color: transparent;
    box-shadow: none;
    border-radius: 4px;
    position: relative;
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    flex-shrink: 0;
}

.button-cover:before {
    counter-increment: button-counter;
    content: counter(button-counter);
    position: absolute;
    right: 0;
    bottom: 0;
    color: #d7e3e3;
    font-size: 12px;
    line-height: 1;
    padding: 5px;
    display: none;
}

.knobs,
.layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.button {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.checkbox {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

.knobs {
    z-index: 2;
}

.layer {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    transition: 0.3s ease all;
    z-index: 1;
}

.button.r,
.button.r .layer {
    border-radius: 100px;
}

#button-3 .knobs:before {
    content: "中文";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    width: 36px;
    height: auto;
    min-width: 36px;
    /* 日间模式默认使用黑色文字，字体与导航栏一致 */
    color: #000000;
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    padding: 0;
    background-color: transparent;
    border-radius: 12px;
    transition: none;
    white-space: nowrap;
}

#button-3 .checkbox:checked+.knobs:before {
    content: "EN";
    /* 移除滑动动画，直接切换内容，保持垂直居中 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    background-color: transparent;
    color: #000000;
    width: 36px;
    min-width: 36px;
}

#button-3 .layer {
    /* 移除背景层，简化设计 */
    background-color: transparent;
}

#button-3 .checkbox:checked~.layer {
    /* 移除背景层，简化设计 */
    background-color: transparent;
}

/* 夜间模式：默认使用灰色背景（与展开和收缩状态保持一致） */
body.dark-mode #button-3 .knobs:before {
    color: #ffffff;
    background-color: transparent;
}

body.dark-mode #button-3 .checkbox:checked+.knobs:before {
    color: #ffffff;
    background-color: transparent;
}

body.dark-mode #button-3 .layer {
    background-color: transparent;
}

body.dark-mode #button-3 .checkbox:checked~.layer {
    background-color: transparent;
}

/* 夜间模式：展开状态使用灰色背景（与收缩状态保持一致） */
body.dark-mode .navbar-expanded #button-3 .knobs:before {
    color: #ffffff !important;
    background-color: transparent !important;
}

body.dark-mode .navbar-expanded #button-3 .checkbox:checked+.knobs:before {
    color: #ffffff !important;
    background-color: transparent !important;
}

body.dark-mode .navbar-expanded #button-3 .layer {
    background-color: transparent !important;
}

body.dark-mode .navbar-expanded #button-3 .checkbox:checked~.layer {
    background-color: transparent !important;
}

/* Theme Toggle Button */
/* Theme Toggle - New Design */
.toggle {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: none;
    line-height: 1;
    transition: all 0.3s ease;
    position: relative;
}

.toggle:hover {
    background: transparent;
    box-shadow: none;
    transform: scale(1.05);
}

.toggle .input {
    display: none;
}

.toggle .icon {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
    transition: transform 500ms;
    line-height: 0.1;
    color: #ffffff;
    width: 20px;
    height: 20px;
}

.toggle .icon--moon {
    transition-delay: 200ms;
}

.toggle .icon--sun {
    transform: scale(0);
}

.toggle #switch:checked+.icon--moon {
    transform: rotate(360deg) scale(0);
}

.toggle #switch:checked~.icon--sun {
    transition-delay: 200ms;
    transform: scale(1) rotate(360deg);
}

/* Disable hover effects when on welcome page */
body.on-welcome-page .nav-link:hover {
    color: #424242;
}

/* Welcome Section */
.welcome-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 120px 40px 40px;
    overflow: hidden;
    background: transparent;
}

.welcome-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(244, 82, 13, 0.3) 20%,
            rgba(244, 82, 13, 0.5) 50%,
            rgba(244, 82, 13, 0.3) 80%,
            transparent 100%);
    box-shadow: 0 1px 3px rgba(244, 82, 13, 0.2);
}

.welcome-layout {
    width: 100%;
    max-width: 1400px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 80px;
    align-items: center;
    min-height: 70vh;
    position: relative;
}

/* Welcome Animation Area - Typewriter */
.welcome-animation-area {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    z-index: 10;
    transform: translateY(-30px);
}

.word-cloud-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Self Introduction Area - Notification Component */
.intro-area {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    transform: translateY(30px);
}

.intro-area .notification.welcome-intro {
    opacity: 0;
    transform: translateX(40px) translateZ(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.intro-area .notification.welcome-intro.entered {
    opacity: 1;
    transform: translateX(0) translateZ(0);
}

.notification {
    display: flex;
    flex-direction: column;
    isolation: isolate;
    position: relative;
    width: 28rem;
    min-height: 12rem;
    height: auto;
    background: transparent;
    border-radius: 1.5rem;
    overflow: visible;
    /* allow waving hand to extend above without clipping */
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    --gradient: linear-gradient(to bottom, #1660AB, #1660AB, #1660AB);
    --color: #1660AB;
    box-shadow: none;
    border: none;
}

.notification:before {
    position: absolute;
    content: "";
    inset: 0.0625rem;
    border-radius: 1.4375rem;
    background: transparent;
    z-index: 2;
}

.notification:after {
    position: absolute;
    content: "";
    width: 0.25rem;
    inset: 0.65rem auto 0.65rem 0.5rem;
    border-radius: 0.125rem;
    background: var(--gradient);
    transition: transform 300ms ease;
    z-index: 4;
}

.notification:hover:after {
    transform: translateX(0.15rem);
}

.notititle {
    color: var(--color);
    padding: 0.85rem 0.25rem 0.5rem 1.5rem;
    font-weight: 600;
    font-size: 1.3rem;
    transition: transform 300ms ease;
    z-index: 5;
    font-family: 'Playfair Display', serif;
}

.notification:hover .notititle {
    transform: translateX(0.15rem);
}

.notibody {
    color: #424242;
    padding: 0 1.5rem 1.5rem 1.5rem;
    transition: transform 300ms ease;
    z-index: 5;
    line-height: 1.8;
    font-size: 0.95rem;
    flex: 1;
}

.notification:hover .notibody {
    transform: translateX(0.25rem);
}

@keyframes say-hi {
    to {
        transform: rotate(25deg);
    }
}

/* Wave hand next to the name inside the title */
.notititle .intro-name {
    position: relative;
    display: inline-block;
}

.notititle .intro-name::after {
    content: "👋";
    position: absolute;
    right: -3.3rem;
    /* push to the right of "Xie" */
    top: -1.5rem;
    /* slightly above the baseline for upper-right placement */
    display: block;
    font-size: 2.4rem;
    /* bigger hand */
    opacity: 0;
    transform-origin: 60% 90%;
    transition: opacity 0.2s ease-in-out;
    filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.2));
}

.notification:hover .notititle .intro-name::after {
    opacity: 1;
    animation: say-hi 0.35s linear infinite alternate;
}

.notiglow,
.notiborderglow {
    position: absolute;
    width: 20rem;
    height: 20rem;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle closest-side at center, white, transparent);
    opacity: 0;
    transition: opacity 300ms ease;
}

.notiglow {
    z-index: 3;
}

.notiborderglow {
    z-index: 1;
}

.notification:hover .notiglow {
    opacity: 0.1;
}

.notification:hover .notiborderglow {
    opacity: 0.1;
}


.intro-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    color: #212121;
    margin-bottom: 15px;
    line-height: 1.2;
}

.intro-name {
    color: #1660AB;
    font-style: italic;
}

.intro-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #666;
    margin-bottom: 30px;
    font-weight: 300;
}

.intro-text {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #424242;
    margin-bottom: 40px;
}

.intro-text p {
    margin-bottom: 15px;
}

.intro-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.intro-btn {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    padding: 14px 32px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    border: 2px solid transparent;
}

.intro-btn.primary {
    background: linear-gradient(135deg, #00bcd4, #03a9f4);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.3);
}

.intro-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 188, 212, 0.4);
}

.intro-btn.secondary {
    background: rgba(255, 255, 255, 0.6);
    color: #212121;
    border: 2px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.intro-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Typewriter Effect */
.typewriter-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    /* Modern clean font */
    position: relative;
    z-index: 15;
}

#typewriter-text {
    font-size: clamp(60px, 12vw, 160px);
    font-weight: 700;
    background: linear-gradient(135deg, #f4520d 0%, #1660AB 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
}

.cursor {
    font-size: clamp(60px, 12vw, 160px);
    font-weight: 700;
    color: #f4520d;
    /* Orange cursor */
    animation: blink 1s step-end infinite;
    margin-left: 5px;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Dark Mode Support for Typewriter */
body.dark-mode #typewriter-text {
    background: linear-gradient(135deg, #ff9800 0%, #64b5f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.3));
}

body.dark-mode .cursor {
    color: #ff9800;
}

/* Scroll Reveal Animation */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* Delay variants for staggered animations */
.reveal-on-scroll.delay-100 {
    transition-delay: 0.1s;
}

.reveal-on-scroll.delay-200 {
    transition-delay: 0.2s;
}

.reveal-on-scroll.delay-300 {
    transition-delay: 0.3s;
}

.reveal-on-scroll.delay-400 {
    transition-delay: 0.4s;
}

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Fade up animation for scroll-triggered elements - whole page sections */
.fade-up {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.fade-up-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade in up animation for main Hello word (with center positioning) */
@keyframes fadeInUpMain {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(30px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }
}


/* Floating animation for main word */
@keyframes float {

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

    50% {
        transform: translate(-50%, -50%) translateY(-20px) rotate(1deg);
    }
}

/* Other Sections */
.section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: transparent;
    position: relative;
}

/* Compact layout specifically for About page */
#about.section {
    padding: 30px 20px;
}

/* 下移 Travel 模块下方的红色分割线（通过增加与下一节的间距） */
#about-travel.section {
    margin-bottom: 18px;
    /* 与 About 一致的视觉间距，可按需微调 */
}

/* Book-style divider between sections */
.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(244, 82, 13, 0.3) 20%,
            rgba(244, 82, 13, 0.5) 50%,
            rgba(244, 82, 13, 0.3) 80%,
            transparent 100%);
    box-shadow: 0 1px 3px rgba(244, 82, 13, 0.2);
}

.section:first-child::before {
    display: none;
}

.content-container {
    max-width: 800px;
    text-align: center;
    padding: 40px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.content-container h2 {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    color: #1660AB;
    margin-bottom: 20px;
}

.content-container p {
    font-size: 18px;
    color: #424242;
    line-height: 1.6;
}

/* About Layout */
.about-layout {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 40px;
    align-items: start;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* When About page only shows time-column, center its content horizontally */
#about .about-layout {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0 10px;
    /* align side gutter with Travel */
    max-width: 1200px;
    /* align container width with Travel */
}

/* Time Column (Left) */
.time-column {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* center inner content including cards */
    width: 100%;
    max-width: 1100px;
    /* align inner content width with Travel */
    margin: 0 auto;
}

.time-column h2,
.time-column .time-description {
    text-align: left;
    width: 100%;
}

/* Tighten About header and description spacing */
#about .time-column h2 {
    margin-bottom: 12px;
    font-size: 44px;
    /* slightly larger title within About */
}

#about .time-description {
    margin-bottom: 16px;
    font-size: 26px;
    /* increase paragraph size within About to use space */
}

.time-column h2,
.space-column h2 {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    color: #1660AB;
    margin-bottom: 20px;
}

.time-description,
.space-description {
    font-size: 18px;
    /* slightly larger for better balance */
    color: #424242;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* Make About (time) description larger on desktop for better readability */
.time-description {
    font-size: 24px;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .time-description {
        font-size: 18px;
        /* keep mobile balanced */
    }
}

/* Flip Cards Container */
.flip-cards-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    /* center horizontally */
    align-items: stretch;
    flex-wrap: nowrap;
    /* single row (side-by-side) */
    margin: 0 auto;
    /* center the row in available area */
    max-width: 1180px;
    /* 4*280 + 3*20 = 1180px, keep equal margins */
    padding: 20px 0;
}

/* Make About cards row slightly more compact */
#about .flip-cards-container {
    gap: 16px;
    padding: 10px 0;
    max-width: 1128px;
    /* 4*270 + 3*16 = 1128, keep equal margins */
}

/* New flip animation style (mapped to existing class names) */
.flip-card {
    /* container */
    background-color: transparent;
    width: 280px;
    height: 55vh;
    /* match map height */
    min-height: 450px;
    /* match map min-height */
    perspective: 900px;
    /* from requested design */
    font-family: 'Poppins', sans-serif;
    border-radius: 2rem;
}

/* Compact size for About cards specifically */
#about .flip-card {
    width: 270px;
    height: 48vh;
    min-height: 400px;
}

.flip-card-inner {
    /* card */
    position: relative;
    width: 100%;
    height: 100%;
    background-color: transparent;
    transition: transform 1500ms;
    transform-style: preserve-3d;
    border-radius: 2rem;
}

.flip-card:hover>.flip-card-inner {
    cursor: pointer;
    transform: rotateY(180deg) rotateZ(180deg);
}

.flip-card-front,
.flip-card-back {
    /* front/back */
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 2rem;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    color: #212121;
}

/* First card (2003) - #F0DEBF */
.flip-card:nth-child(1) .flip-card-front,
.flip-card:nth-child(1) .flip-card-back {
    background: #F0DEBF;
    color: #212121;
}

/* Second card (2021) - #F6C12C */
.flip-card:nth-child(2) .flip-card-front,
.flip-card:nth-child(2) .flip-card-back {
    background: #F6C12C;
    color: #212121;
}

/* Third card (now) - #B22A2A */
.flip-card:nth-child(3) .flip-card-front,
.flip-card:nth-child(3) .flip-card-back {
    background: #B22A2A;
    color: #ffffff;
}

/* Fourth card (new) - #BB5799 */
.flip-card:nth-child(4) .flip-card-front,
.flip-card:nth-child(4) .flip-card-back {
    background: #BB5799;
    color: #ffffff;
}

.flip-card-back {
    transform: rotateY(180deg) rotateZ(180deg);
}

.flip-card-title {
    font-size: 2em;
    font-weight: 900;
    text-align: center;
    margin: 0;
    padding: 20px;
}

/* Title colors for each card */
.flip-card:nth-child(1) .flip-card-title {
    color: #212121;
}

.flip-card:nth-child(2) .flip-card-title {
    color: #212121;
}

.flip-card:nth-child(3) .flip-card-title {
    color: #ffffff;
}

.flip-card:nth-child(4) .flip-card-title {
    color: #ffffff;
}

.flip-card-text {
    font-size: 1.1em !important;
    font-weight: 500;
    font-family: 'Poppins', sans-serif !important;
    text-align: center;
    margin: 0;
    padding: 30px;
    line-height: 1.9 !important;
    letter-spacing: 0.05em !important;
    font-style: normal !important;
}

/* Text colors for each card */
.flip-card:nth-child(1) .flip-card-text {
    color: #212121 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.flip-card:nth-child(2) .flip-card-text {
    color: #212121 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.flip-card:nth-child(3) .flip-card-text {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

.flip-card:nth-child(4) .flip-card-text {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Space Column (Right) */
.space-column {
    padding: 20px;
}

/* Travel three-panel layout */
#about-travel .about-layout {
    width: 100%;
    max-width: 1240px;
    /* wider overall width */
    margin: 0 auto;
    padding: 0 12px;
    /* slightly wider side gutter */
    display: block;
    /* override base grid to avoid empty right column */
    grid-template-columns: 1fr !important;
    /* ensure single column layout */
    box-sizing: border-box;
}

/* Travel header styles to match About Me */
.travel-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 44px;
    /* match #about title size */
    color: #1660AB;
    /* same title color as About Me */
    margin-bottom: 12px;
    /* same tightened spacing */
    text-align: left;
}

.travel-header .space-description {
    font-size: 26px;
    /* match About paragraph size within page */
    line-height: 1.7;
    /* slightly tighter to节省空间 */
    color: #424242;
    margin-bottom: 8px;
    /* 更紧凑，给下方三板块留空间 */
    text-align: left;
}

/* Keep Travel paragraph size consistent with About on mobile */
@media (max-width: 768px) {
    .travel-header .space-description {
        font-size: 18px;
    }
}

.travel-grid {
    display: grid;
    grid-template-columns: 7fr 3fr;
    /* 左侧更突出，约70/30 */
    grid-template-rows: 5fr 3fr;
    /* 右侧上:下≈62/38，更自然 */
    gap: 12px;
    width: 100%;
    max-width: 1140px;
    /* 与标题容器一致，保证左侧对齐 */
    margin: 0 auto;
    padding: 0 8px;
    /* 与标题 padding 一致，左侧严丝合缝 */
    min-height: 50vh;
    /* 适度降低整体高度，显得更精致 */
}

/* Travel section spacing - align top distance with About Me red divider */
#about-travel.section {
    padding: 60px 0 24px;
    /* top matches .section default 60px; bottom compact */
}

.travel-panel {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
    background: #ffffff;
}

body.dark-mode .travel-panel.panel-small {
    background: transparent;
}

.panel-large {
    background: #F1ECE0;
    /* largest panel color */
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    /* span two rows */
    padding: 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.panel-medium {
    background: transparent;
    /* remove green; color moves to tilt-card */
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    position: relative;
    perspective: 800px;
    /* for 3D tilt effect */
    /* remove panel background layer to keep only the effect container */
    border: none;
    box-shadow: none;
    min-height: 260px;
    /* 适度提高，避免信息太挤 */
}

.panel-small {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    position: relative;
    /* anchor popover positioning */
    min-height: 160px;
    /* 提升可读性与翻转空间 */
}

.travel-panel.panel-small {
    overflow: visible;
    /* allow popover to render outside panel */
    z-index: 10;
}

.panel-small .stats-container {
    background: none;
    border: none;
    box-shadow: none;
}

/* Flip integration for stats/suggest */
.panel-small .stats-flip {
    width: 100%;
    height: 100%;
    perspective: 1000px;
}

.panel-small .flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.panel-small:hover .flip-inner,
.panel-small .flip-inner:focus-within {
    transform: rotateY(180deg);
}

.panel-small .flip-front,
.panel-small .flip-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    background: transparent;
    justify-content: center;
    padding: 8px;
}

.panel-small .flip-back {
    transform: rotateY(180deg);
}

/* Suggestion Popover for stats */
.stats-suggest-popover {
    position: static;
    /* render inside flip-back */
    min-width: 280px;
    max-width: 360px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    padding: 14px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
    z-index: 5;
}

.stats-suggest-popover::after {
    display: none;
}

.suggest-title {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #212121;
    margin-bottom: 10px;
}

.suggest-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    outline: none;
    font-size: 14px;
    color: #212121;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.suggest-input:focus {
    border-color: #1660AB;
    box-shadow: 0 0 0 3px rgba(22, 96, 171, 0.15);
}

.suggest-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.suggest-list {
    margin-top: 8px;
    max-height: 180px;
    overflow: auto;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    background: #fff;
    display: none;
}

.suggest-item {
    padding: 8px 10px;
    font-size: 14px;
    color: #212121;
    cursor: pointer;
}

.suggest-item:hover {
    background: rgba(22, 96, 171, 0.08);
}

.suggest-error {
    display: none;
    margin-top: 8px;
    color: #d32f2f;
    font-size: 12px;
    font-weight: 600;
}

.suggest-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.suggest-btn.cancel {
    background: #f5f5f5;
    color: #424242;
}

.suggest-btn.cancel:hover {
    background: #eeeeee;
}

.suggest-btn.confirm {
    background: #1660AB;
    color: #fff;
}

.suggest-btn.confirm:hover {
    background: #0f4f86;
}

.suggest-thanks {
    display: none;
    margin-top: 10px;
    color: #1660AB;
    font-weight: 600;
}

body.dark-mode .stats-suggest-popover {
    background: rgba(0, 0, 0, 0.92);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

body.dark-mode .suggest-title {
    color: #e0e0e0;
}

body.dark-mode .suggest-input {
    background: rgba(0, 0, 0, 0.6);
    color: #e0e0e0;
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .suggest-input:focus {
    border-color: #81d4fa;
    box-shadow: 0 0 0 3px rgba(129, 212, 250, 0.15);
}

body.dark-mode .suggest-btn.cancel {
    background: rgba(255, 255, 255, 0.08);
    color: #e0e0e0;
}

body.dark-mode .suggest-btn.cancel:hover {
    background: rgba(255, 255, 255, 0.12);
}

body.dark-mode .suggest-btn.confirm {
    background: #81d4fa;
    color: #0b2a45;
}

body.dark-mode .suggest-btn.confirm:hover {
    background: #a6e0fb;
}

/* Thanks toast above the popover on the right side */
.stats-suggest-toast {
    position: absolute;
    /* inside flip-back top center */
    left: 50%;
    top: 6px;
    transform: translateX(-50%) translateY(-10px);
    background: rgba(22, 96, 171, 0.95);
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    /* horizontal rectangle */
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 6;
    min-width: 260px;
    max-width: 320px;
    text-align: center;
    white-space: normal;
}

.stats-suggest-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

body.dark-mode .stats-suggest-toast {
    background: rgba(129, 212, 250, 0.95);
    color: #0b2a45;
}

/* small arrow for the toast */
.stats-suggest-toast::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: rgba(22, 96, 171, 0.95);
}

body.dark-mode .stats-suggest-toast::after {
    border-top-color: rgba(129, 212, 250, 0.95);
}

/* Tilt effect within green panel (scoped) */
.panel-medium .tilt-container {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
}

.panel-medium .tilt-card {
    position: absolute;
    inset: 0;
    /* fill entire panel area */
    z-index: 0;
    border-radius: 10px;
    /* match travel-panel radius */
    transition: transform 250ms ease, filter 250ms ease, box-shadow 250ms ease;
    background: #117C0D;
    /* use former green as the effect surface color */
    box-shadow: none;
    pointer-events: none;
}

/* Vertical quote layout inside tilt card */
.panel-medium .tilt-card .tilt-text {
    position: absolute;
    color: #F9F2E0;
    letter-spacing: 1.5px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    /* keep hover grid responsive */
    display: none;
    /* hidden by default - language toggles which one shows */
}

.panel-medium .tilt-card .en-quote {
    left: 10px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 22px;
    line-height: 1.5;
    opacity: 0.9;
    writing-mode: horizontal-tb;
    /* horizontal layout for English */
}

.panel-medium .tilt-card .en-quote .author {
    display: block;
    margin-top: 6px;
    font-weight: 600;
}

.panel-medium .tilt-card .zh-quote {
    left: 10px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.55;
    opacity: 0.95;
    writing-mode: horizontal-tb;
    /* horizontal layout for Chinese */
}

/* Show quote by current page language */
html[lang="en"] .panel-medium .tilt-card .en-quote {
    display: block;
}

html[lang="zh-CN"] .panel-medium .tilt-card .zh-quote {
    display: block;
}

/* Author line break spacing for zh quote */
.panel-medium .tilt-card .zh-quote .author {
    display: block;
    margin-top: 6px;
}

@media (max-width: 968px) {
    .panel-medium .tilt-card .en-quote {
        font-size: 22px;
    }

    .panel-medium .tilt-card .zh-quote {
        font-size: 22px;
    }
}

.panel-medium .tilt-tracker {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.panel-medium .tilt-tracker:hover {
    cursor: pointer;
}

.panel-medium .tilt-tracker:hover~.tilt-card {
    filter: brightness(1.06);
}

/* Hide the English extra welcome subline in UI, keep in DOM for SEO */
html[lang="en"] .intro-subline {
    display: none !important;
}

/* Travel title link styling */
.travel-title-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    padding-right: 18px;
    transition: color 0.2s ease;
}

.travel-title-link::after {
    content: '↗';
    position: absolute;
    right: 0;
    top: 2px;
    font-size: 0.9em;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.travel-title-link:hover {
    text-decoration: underline;
}

.travel-title-link:hover::after {
    opacity: 0.85;
    transform: translateY(-2px);
}

/* Make all popup text bold in Travel map only */
#about-travel .leaflet-popup-content,
#about-travel .leaflet-popup-content * {
    font-weight: 700 !important;
}


/* 25 regions tilt mapping */
.panel-medium .tr-1:hover~.tilt-card {
    transform: rotateX(20deg) rotateY(-10deg);
}

.panel-medium .tr-2:hover~.tilt-card {
    transform: rotateX(20deg) rotateY(-5deg);
}

.panel-medium .tr-3:hover~.tilt-card {
    transform: rotateX(20deg) rotateY(0deg);
}

.panel-medium .tr-4:hover~.tilt-card {
    transform: rotateX(20deg) rotateY(5deg);
}

.panel-medium .tr-5:hover~.tilt-card {
    transform: rotateX(20deg) rotateY(10deg);
}

.panel-medium .tr-6:hover~.tilt-card {
    transform: rotateX(10deg) rotateY(-10deg);
}

.panel-medium .tr-7:hover~.tilt-card {
    transform: rotateX(10deg) rotateY(-5deg);
}

.panel-medium .tr-8:hover~.tilt-card {
    transform: rotateX(10deg) rotateY(0deg);
}

.panel-medium .tr-9:hover~.tilt-card {
    transform: rotateX(10deg) rotateY(5deg);
}

.panel-medium .tr-10:hover~.tilt-card {
    transform: rotateX(10deg) rotateY(10deg);
}

.panel-medium .tr-11:hover~.tilt-card {
    transform: rotateX(0deg) rotateY(-10deg);
}

.panel-medium .tr-12:hover~.tilt-card {
    transform: rotateX(0deg) rotateY(-5deg);
}

.panel-medium .tr-13:hover~.tilt-card {
    transform: rotateX(0deg) rotateY(0deg);
}

.panel-medium .tr-14:hover~.tilt-card {
    transform: rotateX(0deg) rotateY(5deg);
}

.panel-medium .tr-15:hover~.tilt-card {
    transform: rotateX(0deg) rotateY(10deg);
}

.panel-medium .tr-16:hover~.tilt-card {
    transform: rotateX(-10deg) rotateY(-10deg);
}

.panel-medium .tr-17:hover~.tilt-card {
    transform: rotateX(-10deg) rotateY(-5deg);
}

.panel-medium .tr-18:hover~.tilt-card {
    transform: rotateX(-10deg) rotateY(0deg);
}

.panel-medium .tr-19:hover~.tilt-card {
    transform: rotateX(-10deg) rotateY(5deg);
}

.panel-medium .tr-20:hover~.tilt-card {
    transform: rotateX(-10deg) rotateY(10deg);
}

.panel-medium .tr-21:hover~.tilt-card {
    transform: rotateX(-20deg) rotateY(-10deg);
}

.panel-medium .tr-22:hover~.tilt-card {
    transform: rotateX(-20deg) rotateY(-5deg);
}

.panel-medium .tr-23:hover~.tilt-card {
    transform: rotateX(-20deg) rotateY(0deg);
}

.panel-medium .tr-24:hover~.tilt-card {
    transform: rotateX(-20deg) rotateY(5deg);
}

.panel-medium .tr-25:hover~.tilt-card {
    transform: rotateX(-20deg) rotateY(10deg);
}

/* Ensure map fills the large panel nicely */
.panel-large .map-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
}

.panel-large .map-container {
    height: 100%;
    min-height: 60px;
    /* 继续降低地图最低高度 */
    border-radius: 8px;
}

.panel-large .map-hint {
    margin-top: 6px;
}

/* Stats inside smallest panel */
.panel-small .stats-container {
    background: none;
    border: none;
    box-shadow: none;
}

@media (max-width: 968px) {
    .travel-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto 160px 160px;
    }

    .panel-large {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        min-height: 420px;
    }

    .panel-medium {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .panel-small {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
}

.map-wrapper {
    position: relative;
    width: 100%;
}

.map-container {
    position: relative;
    width: 100%;
    height: 55vh;
    min-height: 450px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

#map {
    width: 100%;
    height: 100%;
}

.map-hint {
    margin-top: 15px;
    text-align: right;
    font-size: 12px;
    color: #424242;
    line-height: 1.4;
}

body.dark-mode .map-hint {
    color: #e0e0e0;
}

/* Dark mode for timeline */
body.dark-mode .time-column h2,
body.dark-mode .space-column h2 {
    color: #64b5f6;
}

body.dark-mode .time-description,
body.dark-mode .space-description {
    color: #e0e0e0;
}

/* Dark mode for flip cards */
body.dark-mode .flip-card-front {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
}

body.dark-mode .flip-card-back {
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.15);
    color: #eaeaea;
}

body.dark-mode .flip-card-title {
    color: #64b5f6;
}

/* Statistics Container */
.stats-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: transparent;
}

.stat-number {
    font-family: 'Poppins', 'Arial', 'Helvetica', sans-serif;
    font-size: 48px;
    font-weight: 700;
    background: linear-gradient(135deg, #1660AB 0%, #1660AB 50%, #1660AB 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease infinite;
    line-height: 1;
    min-width: 60px;
    text-align: center;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #424242;
    font-weight: 500;
    letter-spacing: 1px;
}

.stat-divider {
    width: 2px;
    height: 60px;
    background: linear-gradient(180deg, transparent, #1660AB, transparent);
    opacity: 0.3;
}

body.dark-mode .stats-container {
    background: transparent;
    border: none;
    box-shadow: none;
}

body.dark-mode .stat-item {
    background: transparent;
}

body.dark-mode .stat-number {
    background: linear-gradient(135deg, #64b5f6 0%, #90caf9 50%, #64b5f6 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.dark-mode .stat-label {
    color: #e0e0e0;
}

body.dark-mode .stat-divider {
    background: linear-gradient(180deg, transparent, #64b5f6, transparent);
}

/* Map Controls */
.map-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.map-control-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0277bd;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.map-control-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: #0277bd;
}

.map-control-btn:active {
    transform: scale(0.95);
}

body.dark-mode .map-control-btn {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.2);
    color: #64b5f6;
}

body.dark-mode .map-control-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: #64b5f6;
}

/* Map Modal (Expanded View) */
.map-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

/* Footer */
.site-footer {
    width: 100%;
    max-width: 1400px;
    margin: 20px auto 40px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #424242;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-link {
    color: #1660AB;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: #0d4477;
    text-decoration: underline;
}

.footer-sep {
    color: #b0b0b0;
}

body.dark-mode .site-footer {
    color: #e0e0e0;
}

body.dark-mode .footer-link {
    color: #81d4fa;
}

body.dark-mode .footer-link:hover {
    color: #b3e5fc;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.map-modal-content {
    position: relative;
    width: 95%;
    height: 95%;
    max-width: 1600px;
    max-height: 1200px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

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

body.dark-mode .map-modal-content {
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.map-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    color: #212121;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.map-modal-close:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: #f44336;
    color: #f44336;
}

body.dark-mode .map-modal-close {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e0e0e0;
}

body.dark-mode .map-modal-close:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: #ff6b6b;
    color: #ff6b6b;
}

.map-expanded {
    width: 100%;
    height: 100%;
    position: relative;
}

.map-expanded .map-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.reset-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    color: #212121;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.reset-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.reset-btn:active {
    transform: scale(0.95) rotate(90deg);
}

.reset-btn svg {
    width: 20px;
    height: 20px;
}

.custom-marker {
    background: transparent;
    border: none;
}

.current-location-marker {
    z-index: 1000;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.1);
    }
}

.pulse-circle {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.1;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.3;
        transform: scale(1);
    }
}

.marker-info {
    margin-top: 20px;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #212121;
    display: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.marker-info strong {
    display: block;
    margin-bottom: 5px;
    color: #f44336;
    font-size: 16px;
}

/* Flight route marker styles */
.flight-route-marker {
    background: transparent;
    border: none;
    text-align: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Dark Mode Styles */
body.dark-mode {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 20%, #0f3460 40%, #1a1a2e 60%, #16213e 80%, #0f3460 100%);
}

body.dark-mode .navbar {
    /* 夜间模式默认也使用收缩状态的液体玻璃效果，避免页面加载时的样式闪烁 */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

/* 收缩状态：液体玻璃效果 */
body.dark-mode .navbar-collapsed {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

/* 收缩状态下的文字颜色：夜间模式白色 */
body.dark-mode .navbar-collapsed .logo-text {
    color: #ffffff;
}

body.dark-mode .navbar-collapsed .toggle .icon {
    color: #ffffff;
}

/* 夜间模式：收缩状态语言切换按钮样式（灰色背景，确保优先级高于默认样式） */
body.dark-mode .navbar-collapsed #button-3 .knobs:before,
body.dark-mode .navbar-collapsed:hover #button-3 .knobs:before {
    color: #ffffff !important;
    background-color: transparent !important;
}

body.dark-mode .navbar-collapsed #button-3 .layer,
body.dark-mode .navbar-collapsed:hover #button-3 .layer {
    background-color: transparent !important;
}

body.dark-mode .navbar-collapsed #button-3 .checkbox:checked+.knobs:before,
body.dark-mode .navbar-collapsed:hover #button-3 .checkbox:checked+.knobs:before {
    color: #ffffff !important;
    background-color: transparent !important;
}

body.dark-mode .navbar-collapsed #button-3 .checkbox:checked~.layer,
body.dark-mode .navbar-collapsed:hover #button-3 .checkbox:checked~.layer {
    background-color: transparent !important;
}

/* 悬浮展开时，夜间模式保持液体玻璃效果和白色文字 */
body.dark-mode .navbar-collapsed:hover {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.15) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
}

body.dark-mode .navbar-collapsed:hover .logo-text {
    color: #ffffff;
}

body.dark-mode .navbar-collapsed:hover .nav-link {
    color: #ffffff;
}

body.dark-mode .navbar-collapsed:hover .nav-link::after {
    background: #ffffff;
}

body.dark-mode .navbar-collapsed:hover .nav-link.active::after {
    background: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

body.dark-mode .navbar-collapsed:hover .toggle .icon {
    color: #ffffff;
}

body.dark-mode .navbar-collapsed:hover .toggle {
    background: transparent;
    border: none;
}

body.dark-mode .navbar-collapsed:hover .toggle:hover {
    background: transparent;
}


body.dark-mode .nav-link {
    color: #F9F2E0;
}

body.dark-mode .nav-link::after {
    background: #F9F2E0;
}

body.dark-mode .nav-link.active::after {
    background: #F9F2E0;
    box-shadow: 0 0 8px rgba(249, 242, 224, 0.7);
}

body.dark-mode .logo-text {
    color: #F9F2E0;
}

body.dark-mode .logo-chinese {
    color: #F9F2E0 !important;
    -webkit-text-fill-color: #F9F2E0 !important;
}

body.dark-mode .toggle {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

body.dark-mode .toggle:hover {
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}

body.dark-mode .toggle .icon {
    color: #ffffff;
}

/* 夜间模式：展开状态使用橙色背景 */
body.dark-mode .navbar-expanded {
    background: #b83508;
    border: 1px solid rgba(184, 53, 8, 0.6);
    box-shadow: 0 8px 32px 0 rgba(184, 53, 8, 0.15);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 夜间模式：首页和最后一页展开状态 */
body.dark-mode.on-welcome-page .navbar-expanded,
body.dark-mode.on-contact-page .navbar-expanded {
    background: transparent;
    border: none;
    box-shadow: none;
}

body.dark-mode.on-welcome-page .navbar-expanded .logo-text,
body.dark-mode.on-welcome-page .navbar-expanded .nav-link,
body.dark-mode.on-contact-page .navbar-expanded .logo-text,
body.dark-mode.on-contact-page .navbar-expanded .nav-link {
    color: #ffffff;
}

body.dark-mode.on-welcome-page .navbar-expanded .nav-link::after,
body.dark-mode.on-contact-page .navbar-expanded .nav-link::after {
    background: #ffffff;
}

body.dark-mode.on-welcome-page .navbar-expanded .nav-link.active::after,
body.dark-mode.on-contact-page .navbar-expanded .nav-link.active::after {
    background: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* 夜间模式：首页和最后一页展开时，语言切换和日夜模式图标 */
body.dark-mode.on-welcome-page .navbar-expanded .toggle .icon,
body.dark-mode.on-contact-page .navbar-expanded .toggle .icon {
    color: #ffffff;
}

body.dark-mode.on-welcome-page .navbar-expanded .toggle,
body.dark-mode.on-contact-page .navbar-expanded .toggle {
    background: transparent;
    border: none;
}

body.dark-mode.on-welcome-page .navbar-expanded .toggle:hover,
body.dark-mode.on-contact-page .navbar-expanded .toggle:hover {
    background: transparent;
}

/* 夜间模式：首页和最后一页展开时，语言切换按钮 */
body.dark-mode.on-welcome-page .navbar-expanded #button-3 .knobs:before,
body.dark-mode.on-contact-page .navbar-expanded #button-3 .knobs:before {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode.on-welcome-page .navbar-expanded #button-3 .checkbox:checked+.knobs:before,
body.dark-mode.on-contact-page .navbar-expanded #button-3 .checkbox:checked+.knobs:before {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode.on-welcome-page .navbar-expanded #button-3 .layer,
body.dark-mode.on-contact-page .navbar-expanded #button-3 .layer {
    background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode.on-welcome-page .navbar-expanded #button-3 .checkbox:checked~.layer,
body.dark-mode.on-contact-page .navbar-expanded #button-3 .checkbox:checked~.layer {
    background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .welcome-section {
    background: rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.3);
}

body.dark-mode .section {
    background: rgba(0, 0, 0, 0.15);
}

body.dark-mode .content-container {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

body.dark-mode .content-container h2 {
    color: #81d4fa;
}

body.dark-mode .content-container p {
    color: #e0e0e0;
}

body.dark-mode .about-text h2 {
    color: #81d4fa;
}

body.dark-mode .about-text p {
    color: #e0e0e0;
}

body.dark-mode .space-content p {
    color: #e0e0e0;
}


body.dark-mode .marker-info {
    background: rgba(0, 0, 0, 0.7);
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .reset-btn {
    background: rgba(0, 0, 0, 0.7);
    color: #e0e0e0;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .reset-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #ffffff;
}

body.dark-mode .intro-content {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

body.dark-mode .intro-title {
    color: #e0e0e0;
}

body.dark-mode .intro-name {
    color: #81d4fa;
}

body.dark-mode .intro-subtitle {
    color: #b0b0b0;
}

/* Dark mode for notification component */
body.dark-mode .notification {
    background: transparent;
    border: none;
    box-shadow: none;
}

body.dark-mode .notification:before {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.dark-mode .notititle {
    color: #81d4fa;
}

body.dark-mode .notibody {
    color: #e0e0e0;
}

body.dark-mode .intro-text {
    color: #d0d0d0;
}

/* Dark mode for printer component */
body.dark-mode .printer-wrapper {
    --printer-color: rgba(255, 255, 255, 0.15);
    --printer-color-2: rgba(255, 255, 255, 0.1);
    --receipt-color: rgba(30, 30, 30, 0.95);
}

body.dark-mode .receipt {
    color: #e0e0e0;
    background-color: var(--receipt-color);
}

body.dark-mode .receipt-subheader {
    border-bottom-color: #555;
}

body.dark-mode .printer-display {
    background-color: rgba(0, 0, 0, 0.9);
    border-color: var(--printer-color-2);
}

body.dark-mode .intro-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

body.dark-mode .intro-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .word-cloud-item {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .word-main {
    color: #ff6b6b;
    text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
}

body.dark-mode .word-1,
body.dark-mode .word-2,
body.dark-mode .word-3,
body.dark-mode .word-4,
body.dark-mode .word-5,
body.dark-mode .word-6,
body.dark-mode .word-7,
body.dark-mode .word-8,
body.dark-mode .word-9,
body.dark-mode .word-11,
body.dark-mode .word-12,
body.dark-mode .word-14,
body.dark-mode .word-15,
body.dark-mode .word-19,
body.dark-mode .word-20,
body.dark-mode .word-22 {
    color: rgba(144, 238, 144, 0.9);
}

body.dark-mode .word-10,
body.dark-mode .word-13,
body.dark-mode .word-16,
body.dark-mode .word-17,
body.dark-mode .word-18,
body.dark-mode .word-21,
body.dark-mode .word-23,
body.dark-mode .word-24,
body.dark-mode .word-25,
body.dark-mode .word-26,
body.dark-mode .word-27 {
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive Design */
@media (max-width: 968px) {
    .welcome-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .welcome-animation-area {
        height: 500px;
    }

    .intro-area {
        padding: 20px;
    }

    .intro-content {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .navbar {
        top: 10px;
        left: 10px;
        right: 10px;
        border-radius: 30px;
    }

    .nav-container {
        padding: 10px 20px;
        gap: 20px;
    }

    .nav-links {
        gap: 15px;
    }

    .nav-link {
        font-size: 18px;
    }

    .about-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .time-column,
    .space-column {
        padding: 15px;
    }

    .time-column h2,
    .space-column h2 {
        font-size: 32px;
    }

    .flip-cards-container {
        gap: 15px;
        flex-wrap: wrap;
        /* mobile: allow wrapping */
    }

    .flip-card {
        width: 240px;
        height: 45vh;
        /* match mobile map height */
        min-height: 350px;
        /* match mobile map min-height */
        flex: 0 0 auto;
    }

    .flip-card-title {
        font-size: 1.8em;
        padding: 15px;
    }

    .flip-card-text {
        font-size: 1.2em !important;
        padding: 25px;
        letter-spacing: 0.03em !important;
        line-height: 1.85 !important;
        font-family: 'Cormorant Garamond', 'Playfair Display', 'Cinzel', serif !important;
        font-style: italic !important;
    }


    .map-container {
        height: 45vh;
        min-height: 350px;
    }

    .map-controls {
        top: 10px;
        right: 10px;
        gap: 8px;
    }

    .map-control-btn {
        width: 36px;
        height: 36px;
    }

    .logo-text {
        font-size: 22px;
        letter-spacing: 1.5px;
    }

    .logo-chinese {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .welcome-section {
        padding: 100px 20px 40px;
    }

    .welcome-layout {
        gap: 30px;
    }

    .welcome-animation-area {
        height: 450px;
    }

    .intro-content {
        padding: 25px;
    }

    .intro-title {
        font-size: clamp(28px, 6vw, 40px);
    }

    .intro-subtitle {
        font-size: 18px;
    }

    .intro-text {
        font-size: 15px;
    }

    .intro-buttons {
        flex-direction: column;
    }

    .intro-btn {
        width: 100%;
        text-align: center;
    }

    .word-cloud-item {
        font-size: clamp(12px, 2vw, 22px) !important;
    }

    .word-main {
        font-size: clamp(40px, 8vw, 90px) !important;
    }

    .yin-yang-loader {
        flex-direction: column;
        gap: 30px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .yin-yang-quote {
        min-width: auto;
        max-width: 100%;
        font-size: clamp(16px, 4vw, 22px);
        text-align: center;
        padding: 15px;
    }

    .notification {
        width: 24rem;
        min-height: 10rem;
        height: auto;
        font-size: 14px;
    }

    .notititle {
        font-size: 1.1rem;
        padding: 0.7rem 0.25rem 0.4rem 1.2rem;
    }

    .notibody {
        padding: 0 1.2rem 1.2rem 1.2rem;
        font-size: 0.9em;
        line-height: 1.8;
    }

    .about-layout {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 20px;
    }

    .map-wrapper {
        margin-bottom: 40px;
    }

    .map-container {
        height: 50vh;
        min-height: 350px;
    }

    .map-hint {
        position: relative;
        bottom: auto;
        right: auto;
        margin-top: 10px;
        text-align: left;
        max-width: 100%;
    }

    .about-text h2 {
        font-size: 32px;
    }

    .space-content p {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 12px;
    }

    .stats-container {
        gap: 20px;
        margin-top: 15px;
    }

    .stat-divider {
        height: 50px;
    }

    .stat-number {
        font-size: 36px;
    }

    .stat-label {
        font-size: 12px;
    }
}

/* Music Section */
#about-music.section {
    padding: 60px 0 24px;
}

#about-music .travel-header.music-text-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    max-width: 50%;
    margin-left: 0;
    margin-right: auto;
}

#about-music .travel-header.music-text-header h2 {
    text-align: left;
}

#about-music .travel-header.music-text-header .space-description {
    text-align: left;
}

.music-content {
    margin-top: -40px;
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
}

.music-chart-container {
    background: transparent;
    border-radius: 12px;
    padding: 20px 0 10px 0;
    box-shadow: none;
    border: none;
    transition: all 0.3s ease;
    margin-bottom: 0;
    max-width: 100%;
}

.music-chart-container:hover {
    transform: translateY(-2px);
}

.music-data-source {
    text-align: right;
    font-size: 12px;
    color: #999;
    opacity: 0.6;
    margin-top: -10px;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

/* Photo Gallery Section */
#photo-gallery.section {
    padding: 80px 0;
    background: transparent;
    overflow: hidden;
}

.gallery-container {
    width: 100%;
    max-width: 100vw;
}

.gallery-header {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
    position: relative;
}

.gallery-title {
    font-family: 'Playfair Display', serif;
    font-size: 44px;
    font-weight: 700;
    color: #1660AB;
    text-align: center;
    margin: 0;
}

.gallery-more-link {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #8a7a6a;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gallery-more-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #8b7355;
    transition: width 0.3s ease;
}

.gallery-more-link:hover {
    color: #8b7355;
}

.gallery-more-link:hover::after {
    width: 100%;
}

.more-link-arrow {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
    transform: rotate(-45deg);
    display: inline-block;
    vertical-align: middle;
}

.gallery-more-link:hover .more-link-arrow {
    transform: rotate(-45deg) translateX(3px) translateY(-3px);
}

body.dark-mode .gallery-more-link {
    color: #b8a99a;
}

body.dark-mode .gallery-more-link:hover {
    color: #d4c4b0;
}

body.dark-mode .gallery-more-link::after {
    background: #d4c4b0;
}

.gallery-scroll-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
}

.gallery-track {
    display: flex;
    gap: 30px;
    animation: scroll-left 40s linear infinite;
    will-change: transform;
}

.gallery-track:hover {
    animation-play-state: paused;
}

.gallery-item {
    flex-shrink: 0;
    width: auto;
    height: 500px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.5);
}

.gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    z-index: 10;
}

.gallery-item img {
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: contain;
    display: block;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Dark Mode */
body.dark-mode .gallery-title {
    color: #81d4fa;
}

body.dark-mode .gallery-item {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    background: rgba(0, 0, 0, 0.3);
}

body.dark-mode .gallery-item:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* Gallery to Melody Button */
.gallery-nav-button {
    text-align: center;
    margin-top: 40px;
}

.gallery-to-melody-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #8b7355 0%, #6b5a4a 100%);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(139, 115, 85, 0.3);
}

.gallery-to-melody-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 115, 85, 0.4);
    background: linear-gradient(135deg, #9b8365 0%, #7b6a5a 100%);
}

.gallery-to-melody-btn .btn-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.gallery-to-melody-btn:hover .btn-icon {
    transform: translateX(4px);
}

body.dark-mode .gallery-to-melody-btn {
    background: linear-gradient(135deg, #6b5a4a 0%, #4a3a2a 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .gallery-to-melody-btn:hover {
    background: linear-gradient(135deg, #7b6a5a 0%, #5a4a3a 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .gallery-header {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-bottom: 30px;
    }

    .gallery-title {
        font-size: 32px;
        margin-bottom: 0;
    }

    .gallery-more-link {
        font-size: 13px;
    }

    .gallery-item {
        width: auto;
        height: 350px;
    }

    .gallery-track {
        gap: 20px;
    }
}

body.dark-mode .music-data-source {
    color: #888;
    opacity: 0.5;
}

/* Music Animation - DVD Bounce Effect */
#about-music {
    position: relative;
    overflow: hidden;
}

.music-animation-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 10;
}

.music-loader {
    width: 150px;
    height: 40px;
    border-radius: 50%;
    position: fixed;
    background-color: green;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.music-loader-text {
    position: absolute;
    left: 5%;
    bottom: 55%;
    color: green;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 4em;
    font-weight: 900;
    font-style: italic;
    line-height: 1;
}

.music-loader-subtext {
    position: absolute;
    top: 30%;
    left: 21%;
    color: black;
    font-size: 0.5em;
    font-weight: 800;
    letter-spacing: 10px;
    z-index: 1;
}

/* Dark mode for music section */
body.dark-mode .music-chart-container {
    background: transparent;
    border: none;
    box-shadow: none;
}

body.dark-mode .music-chart-container:hover {
    box-shadow: none;
}

/* Responsive */
@media (max-width: 768px) {
    .music-chart-container {
        padding: 20px 15px;
    }
}

/* Contact Section - Yin Yang Loader */
.contact-section {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 100vh;
    padding-bottom: 180px;
}

.yin-yang-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    min-height: 200px;
    flex-wrap: wrap;
}

.yin-yang {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: linear-gradient(90deg, white 50%, black 50%);
    animation: rotate 4s linear infinite;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
}

.yin-yang:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

.yin-yang::before,
.yin-yang::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.yin-yang::before {
    top: 0;
    background: black;
}

.yin-yang::after {
    bottom: 0;
    background: white;
}

.dot {
    position: absolute;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    animation: pulse 4s ease-in-out infinite;
}

.dot.white {
    background: white;
    top: 75px;
}

.dot.black {
    background: black;
    bottom: 75px;
}

.yin-yang-quote {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
    font-family: 'Cormorant Garamond', 'Playfair Display', 'Cinzel', serif;
    font-size: clamp(18px, 2.5vw, 28px);
    font-weight: 400;
    font-style: italic;
    line-height: 1.9;
    color: #2c3e50;
    text-align: left;
    padding: 20px;
    letter-spacing: 0.3px;
    text-transform: none;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    opacity: 0;
    animation: fadeInQuote 1.5s ease forwards;
    animation-delay: 0.5s;
}

@keyframes fadeInQuote {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

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

body.dark-mode .yin-yang-quote {
    color: #e5e7eb;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

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

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.1);
    }
}

/* Dark mode for yin-yang */
body.dark-mode .yin-yang {
    background: linear-gradient(90deg, #1f2937 50%, #f9fafb 50%);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

body.dark-mode .yin-yang:hover {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
}

body.dark-mode .yin-yang::before {
    background: #f9fafb;
}

body.dark-mode .yin-yang::after {
    background: #1f2937;
}

body.dark-mode .dot.white {
    background: #1f2937;
}

body.dark-mode .dot.black {
    background: #f9fafb;
}

.contact-container {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

body.dark-mode .contact-section {
    background: transparent !important;
}

body.dark-mode .contact-container {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Contact Card - New Design */
.contact-card {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    max-width: 28rem;
    margin: 0 auto;
}

.contact-btn {
    padding: 1.25rem;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    aspect-ratio: 1;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(to top right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-btn:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: scale(1.1) rotate(3deg);
    border-color: rgba(255, 255, 255, 0.3);
}

.contact-btn:active {
    transform: scale(0.95) rotate(0deg);
}

.contact-btn-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.7s ease-out;
}

.contact-btn:hover .contact-btn-shine {
    transform: translateX(100%);
}

.contact-btn-content {
    position: relative;
    z-index: 10;
}

.contact-icon {
    width: 1.75rem;
    height: 1.75rem;
    fill: currentColor;
    transition: color 0.3s;
}

/* Email Button - Green Theme */
.contact-btn-email {
    border-color: rgba(34, 197, 94, 0.2);
}

.contact-btn-email:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.5);
    background: linear-gradient(to top right, rgba(34, 197, 94, 0.1), rgba(0, 0, 0, 0.4));
}

.contact-btn-email .contact-icon {
    color: rgb(34, 197, 94);
}

.contact-btn-email:hover .contact-icon {
    color: rgb(74, 222, 128);
}

.contact-btn-email .contact-btn-shine {
    background: linear-gradient(to right, transparent, rgba(74, 222, 128, 0.2), transparent);
}

/* GitHub Button - Indigo Theme */
.contact-btn-github {
    border-color: rgba(99, 102, 241, 0.2);
}

.contact-btn-github:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(99, 102, 241, 0.3);
    border-color: rgba(99, 102, 241, 0.5);
    background: linear-gradient(to top right, rgba(99, 102, 241, 0.1), rgba(0, 0, 0, 0.4));
    transform: scale(1.1) rotate(2deg);
}

.contact-btn-github .contact-icon {
    color: rgb(99, 102, 241);
}

.contact-btn-github:hover .contact-icon {
    color: rgb(129, 140, 248);
}

.contact-btn-github .contact-btn-shine {
    background: linear-gradient(to right, transparent, rgba(129, 140, 248, 0.2), transparent);
}

/* LinkedIn Button - Blue Theme */
.contact-btn-linkedin {
    border-color: rgba(59, 130, 246, 0.2);
}

.contact-btn-linkedin:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
    background: linear-gradient(to top right, rgba(59, 130, 246, 0.1), rgba(0, 0, 0, 0.4));
    transform: scale(1.1) rotate(-2deg);
}

.contact-btn-linkedin .contact-icon {
    color: rgb(59, 130, 246);
}

.contact-btn-linkedin:hover .contact-icon {
    color: rgb(96, 165, 250);
}

.contact-btn-linkedin .contact-btn-shine {
    background: linear-gradient(to right, transparent, rgba(96, 165, 250, 0.2), transparent);
}

/* Dark mode for contact buttons */
body.dark-mode .contact-btn {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(to top right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4));
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

body.dark-mode .contact-btn:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Responsive design for contact card */
@media (max-width: 768px) {
    .contact-card {
        max-width: 100%;
        gap: 1rem;
    }

    .contact-btn {
        padding: 1rem;
        width: 4rem;
        height: 4rem;
    }

    .contact-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* Highlight text effect */
.contact-highlight {
    margin: 20px 0;
    text-align: center;
}

.highlight-text {
    position: relative;
    display: inline-block;
    font-size: 24px;
    font-weight: 600;
    color: #0277bd;
    padding: 0 10px;
    z-index: 1;
}

.highlight-text::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0.7em;
    background: linear-gradient(90deg, #ffd54f 0%, #ffeb3b 30%, #fff176 60%, #ffeb3b 100%);
    opacity: 0.7;
    z-index: -1;
    border-radius: 4px;
    animation: highlight-sweep 2.5s ease-in-out infinite;
}

@keyframes highlight-sweep {
    0% {
        width: 0;
        left: 0;
        opacity: 0.5;
    }

    50% {
        width: 100%;
        left: 0;
        opacity: 0.8;
    }

    100% {
        width: 0;
        left: 100%;
        opacity: 0.5;
    }
}

body.dark-mode .highlight-text {
    color: #64b5f6;
}

body.dark-mode .highlight-text::before {
    background: linear-gradient(90deg, #ffa726 0%, #ffb74d 30%, #ffcc80 60%, #ffb74d 100%);
}

/* Email wrapper */
.contact-email-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    font-size: 18px;
}

/* Contact email container with copy functionality */
.contact-email-container {
    position: relative;
    display: inline-block;
}

.contact-email {
    color: #0277bd;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.contact-email:hover {
    color: #01579b;
    text-decoration: underline;
}

/* Contact page copy success message */
.contact-copy-success {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(2, 119, 189, 0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    z-index: 15;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.contact-copy-success.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-10px);
}

body.dark-mode .contact-copy-success {
    background: rgba(100, 181, 246, 0.9);
    color: #fff;
}

/* Contact page copy tooltip */
.contact-copy-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #B22A2A;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-family: 'Poppins', sans-serif;
}

.contact-copy-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #B22A2A;
}

#contactEmailBtn:hover .contact-copy-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

/* Hide tooltip when showing success message or when clicking */
#contactEmailBtn:active .contact-copy-tooltip,
.contact-copy-success.show~.contact-copy-tooltip,
#contactEmailBtn:has(.contact-copy-success.show) .contact-copy-tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
}

body.dark-mode .contact-email {
    color: #64b5f6;
}

body.dark-mode .contact-email:hover {
    color: #90caf9;
}

body.dark-mode .contact-copy-tooltip {
    background: #B22A2A;
    color: #ffffff;
}

body.dark-mode .contact-copy-tooltip::after {
    border-top-color: #B22A2A;
}

body.dark-mode .contact-copy-success {
    background: rgba(100, 181, 246, 0.9);
    color: #fff;
}

/* Logo crop inside flip card */
.flip-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flip-card-logo img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    /* crop to center */
    object-position: center;
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

body.dark-mode .flip-card-text {
    color: #e0e0e0 !important;
    font-family: 'Cormorant Garamond', 'Playfair Display', 'Cinzel', serif !important;
    font-style: italic !important;
    letter-spacing: 0.05em !important;
    line-height: 1.9 !important;
}