:root {
    /* 默认主题（亮色） */
    --bg-color: rgba(240, 242, 245, 0.6);
    --text-color: #333333;
    --panel-bg: rgba(255, 255, 255, 0.8);
    --highlight-color: #007bff;
    --border-color: #e1e4e8;
    --button-bg: rgba(255, 255, 255, 0.5);
    --button-hover: rgba(255, 255, 255, 0.7);
    --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    --card-radius: 6px;
}

/* 深色主题 */
[data-theme="dark"] {
    --bg-color: rgba(26, 26, 26, 0.6);
    --text-color: #ffffff;
    --panel-bg: rgba(36, 36, 36, 0.8);
    --highlight-color: #4dabf7;
    --border-color: #404040;
    --button-bg: rgba(60, 60, 60, 0.6);
    --button-hover: rgba(80, 80, 80, 0.8);
    --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Bilibili主题 */
[data-theme="bilibili"] {
    --bg-color: rgba(255, 140, 180, 0.6);
    --text-color: #333333;
    --panel-bg: rgba(255, 255, 255, 0.8);
    --highlight-color: #ff6b9d;
    --border-color: #ff6b9d;
    --button-bg: rgba(255, 107, 157, 0.6);
    --button-hover: rgba(255, 82, 128, 0.8);
    --card-shadow: 0 2px 12px rgba(255, 107, 157, 0.2);
    --card-radius: 6px;
}

/* Win11主题 */
[data-theme="win11"] {
    --bg-color: rgba(127, 188, 235, 0.6);
    --text-color: #333333;
    --panel-bg: rgba(255, 255, 255, 0.8);
    --highlight-color: #0078d7;
    --border-color: #0078d7;
    --button-bg: rgba(0, 120, 215, 0.6);
    --button-hover: rgba(0, 90, 158, 0.8);
    --card-shadow: 0 2px 12px rgba(0, 120, 215, 0.2);
    --card-radius: 6px;
}

/* 酷安主题 */
[data-theme="coolapk"] {
    --bg-color: rgba(173, 218, 149, 0.6);
    --text-color: #333333;
    --panel-bg: rgba(255, 255, 255, 0.8);
    --highlight-color: #5bb72a;
    --border-color: #5bb72a;
    --button-bg: rgba(91, 183, 42, 0.6);
    --button-hover: rgba(74, 143, 34, 0.8);
    --card-shadow: 0 2px 12px rgba(91, 183, 42, 0.2);
    --card-radius: 6px;
}

/* 金色主题 */
[data-theme="gold"] {
    --bg-color: rgba(255, 235, 127, 0.6);
    --text-color: #333333;
    --panel-bg: rgba(255, 255, 255, 0.8);
    --highlight-color: #ffd700;
    --border-color: #ffd700;
    --button-bg: rgba(255, 215, 0, 0.6);
    --button-hover: rgba(229, 193, 0, 0.8);
    --card-shadow: 0 2px 12px rgba(255, 215, 0, 0.2);
    --card-radius: 6px;
}


body {
    margin: 0;
    padding: 15px;
    font-family: Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
    min-height: 100vh;
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative;
    z-index: 0;

    .container {
        display: flex;
        gap: 20px;
        max-width: 1800px;
        margin: 0 auto;
        height: calc(100vh - 40px);
        width: 100%;
        box-sizing: border-box;
    }

    .card {
        background-color: var(--panel-bg);
        border-radius: var(--card-radius);
        box-shadow: var(--card-shadow);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;

        .card-header {
            padding: 20px;
            margin: 0;
            border-bottom: 1px solid var(--border-color);
            background-color: var(--panel-bg);
            width: 100%;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;

            h1, h2, h3 {
                margin: 0;
                color: var(--text-color);
                word-wrap: break-word;
                overflow-wrap: break-word;
            }

            .control-buttons {
                display: flex;
                align-items: center;
                gap: 8px;
                margin: 0;
                flex-wrap: nowrap;
            }
        }

        .card-body {
            padding: 15px;
            flex: 1;
            overflow-y: auto;
            width: 100%;
            box-sizing: border-box;
        }
    }

    .left-panel {
        width: 350px;
        flex-shrink: 0;
        max-width: 100%;

        .search-section {
            margin-bottom: 15px;
            width: 100%;
            box-sizing: border-box;

            h2 {
                font-size: 16px;
                margin: 0 0 10px 0;
                color: var(--text-color);
                font-weight: 600;
            }

            .search-box-wrapper {
                margin: 10px 0;
                width: 100%;
            }

            .control-buttons {
                display: flex;
                align-items: center;
                gap: 8px;
                margin: 10px 0;
                flex-wrap: wrap;

                #current-language {
                    color: var(--highlight-color);
                    font-size: 14px;
                }
            }
        }

        #search-box {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background-color: var(--bg-color);
            color: var(--text-color);
            font-size: 14px;
            transition: border-color 0.3s;
            box-sizing: border-box;

            &:focus {
                outline: none;
                border-color: var(--highlight-color);
            }
        }

        #airport-list {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;

            ul {
                padding-left: 15px;
            }

            .airport {
                background-color: var(--button-bg);
                border: 1px solid var(--border-color);
                box-shadow: var(--card-shadow);
                border-radius: var(--card-radius);
                margin: 8px 0;
                padding: 12px 15px;

                &:hover {
                    background-color: var(--button-hover);
                    transform: translateY(-2px);
                    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
                }
            }

            li {
                padding: 8px 12px;
                margin: 4px 0;
                cursor: pointer;
                border-radius: 6px;
                transition: all 0.3s;
                background-color: var(--bg-color);
                word-wrap: break-word;
                overflow-wrap: break-word;
                font-size: 14px;
                line-height: 1.4;
                border: 1px solid transparent;
                list-style-type: none;
                position: relative;

                &::before,
                &::after {
                    display: none;
                }

                &:hover {
                    background-color: var(--button-hover);
                    transform: translateX(3px);
                    border-color: var(--border-color);
                }

                &:active {
                    transform: translateX(1px);
                }
            }
        }
    }

    .right-panel {
        flex: 1;
        min-width: 0; /* 防止flex子项溢出 */

        .info-card {
            background-color: var(--bg-color);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            width: 100%;
            box-sizing: border-box;

            .info-text {
                margin: 0;
                color: var(--text-color);
                line-height: 1.5;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }
        }

        .pdf-section {
            height: calc(100% - 150px); /* 调整PDF查看器的高度，为其他内容留出空间 */
            background-color: var(--bg-color);
            border-radius: 8px;
            overflow: hidden;
            width: 100%;

            #pdf-viewer {
                width: 100%;
                height: 100%;
                border: none;
                background-color: var(--bg-color);
            }
        }

        #pdf-file-label, #pdf-file-content {
            display: none;
        }
    }

    button {
        padding: 8px 16px;
        border: none;
        border-radius: 8px;
        background-color: var(--button-bg);
        color: var(--text-color);
        cursor: pointer;
        transition: all 0.3s;
        font-size: 14px;
        white-space: nowrap;
        height: 35px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
            background-color: var(--button-hover);
            transform: translateY(-2px);
        }
    }

    a {
        color: var(--highlight-color);
        text-decoration: none;
        transition: color 0.3s;
        word-wrap: break-word;
        overflow-wrap: break-word;

        &:hover {
            color: var(--highlight-color);
            text-decoration: underline;
        }
    }
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: url('../../assets/img/landscape-bg.png') center center/cover no-repeat;
    filter: blur(6px) brightness(0.7);
    pointer-events: none;
    transition: background-image 0.3s;
}


/* 电脑端显示逻辑 */
@media (min-width: 769px) {
    .right-panel {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 40px); /* 调整高度以适应视口 */
    }

    .right-panel .card-body {
        flex: 1; /* 允许内容区域扩展 */
        display: flex;
        flex-direction: column;
    }

    .info-card {
        margin-bottom: 15px; /* 添加适当的间距 */
    }

    .pdf-section {
        flex: 1; /* 允许 PDF 区域扩展 */
        min-height: 500px; /* 设置最小高度以确保在没有内容时也可见 */
    }
}

/* 移动端显示逻辑 */
@media (max-width: 768px) {
    body {
        padding: 10px;

        .container {
            flex-direction: column;
            height: 100vh;
        }

        .left-panel {
            max-height: 60vh; /* 左侧面板占屏高比例 */
            width: 100%;
            margin-bottom: 20px;
        }

        .right-panel {
            overflow: visible;

            .pdf-section {
                height: 90vh;
            }
        }
    }

    body::before {
        background: url('../../assets/img/portrait-bg.png') center center/cover no-repeat;
        filter: blur(12px) brightness(0.7);
    }
}

/* 添加下拉列表样式 */
#theme-switch {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background-color: var(--button-bg);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    height: 35px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg SVG namespace SVG namespace ' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
}

#theme-switch:hover {
    background-color: var(--button-hover);
    transform: translateY(-2px);
}

#theme-switch:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--highlight-color);
}

/* 网页创作者整体 */
.creators {
    display: flex;
    flex-wrap: wrap;      /* 换行 */
    align-items: center;
    gap: 8px;             /* 元素间距 */
}

/* 头像 + 名称的容器 */
.creators-list {
    display: flex;
    flex-wrap: wrap;      /* 多个头像+姓名换行 */
    gap: 8px;
}

/* 限制头像大小 */
.creators-list img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

/* 姓名保持不换行 */
.creators-list a {
    white-space: nowrap;
}




/* 备案区块图标样式 */

/* 单个备案项 */
.info-text.creators a {
    display: inline-flex;      /* ✅ 避免内部内容被截断 */
    align-items: center;       /* 图标和文字垂直居中 */
    font-size: 16px;
    color: var(--text-color, #666);
    text-decoration: none;
    white-space: nowrap;       /* ✅ 保证每个 a 标签内部不换行 */
    transition: opacity 0.3s;

    text-decoration: underline;          /* 加下划线 */
    text-decoration-thickness: 1px;      /* 下划线粗细 */
    text-underline-offset: 2px;          /* 下划线与文字的距离 */
}

/* 悬停时轻微透明变化 */
.info-text.creators a:hover {
    opacity: 0.85;
}

/* 图标样式（和上文相同） */
.icp-icon {
    width: 25px;
    height: 25px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 4px;
    border-radius: 3px;
    opacity: 0.9;
    transition: opacity 0.3s, transform 0.3s;
}

.info-text.creators a:hover .icp-icon {
    opacity: 1;
    transform: scale(1.05);
}

/* GitHub头像略大一点（可选） */
.info-text.creators .copyright .icp-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}