body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #000;
    color: #fff;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

h1 {
    text-align: center;
    color: #fff;
    margin-bottom: 30px;
}

.control-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
}

.history-toggle {
    order: 1;
    font-size: 18px; /* 稍微增大图标 */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mode-toggle {
    order: 2;
}

.window-buttons {
    display: flex;
    gap: 5px;
    margin: 0 auto;
}

input[type="text"] {
    flex: 1;
    padding: 8px;
    background-color: #333;
    border: 1px solid #444;
    color: #fff;
}

button, select {
    padding: 8px 16px;
    background-color: #333;
    border: 1px solid #444;
    color: #fff;
    cursor: pointer;
}

button:hover, select:hover {
    background-color: #444;
}

.video-container {
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: 100%; /* 确保不溢出 */
    height: 100%;
    min-height: 500px; /* 确保有足够的高度显示两行视频 */
    overflow: hidden; /* 防止内容溢出 */
}

.video-wrapper {
    position: relative;
    background-color: #222;
    height: 100%; /* 确保高度占满父容器 */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 确保控件在底部 */
}

video {
    width: 100%;
    flex: 1; /* 视频占据剩余空间 */
    object-fit: contain; /* 保持视频原始比例，完整显示在窗口内 */
    background-color: #000; /* 添加黑色背景 */
}

.resolution {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 2px 5px;
    font-size: 12px;
    color: #fff;
    border-radius: 3px;
    z-index: 1;
}

/* 新增视频控制样式 */
.video-control {
    display: flex;
    gap: 5px;
    margin-bottom: 20px; /* 增加底部间距 */
    width: 100%;
    max-width: 100%;
    margin-top: 10px; /* 增加与视频的间距 */
}

.video-control input {
    flex: 1;
    padding: 8px;
    background-color: transparent; /* 移除背景色 */
    border: 1px solid #444;
    color: #fff;
    font-size: 14px; /* 增大字体 */
    width: 100%;
    max-width: 100%;
    white-space: nowrap; /* 防止换行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
}

.video-control button {
    padding: 5px 10px;
    background-color: #333;
    border: 1px solid #444;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}

/* 新增窗口按钮样式 */
.window-button {
    padding: 12px 20px;
    font-size: 14px;
    background-color: #333;
    border: 1px solid #444;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.window-button:hover {
    background-color: #444;
    transform: translateY(-1px);
}

.window-button.active {
    background-color: #666;
    border-color: #888;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 新增播放按钮样式 */
.play-button {
    padding: 5px 10px;
    background-color: #007aff; /* 使用iOS风格的蓝色 */
    border: 1px solid #0063cc;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
    font-size: 14px;
}

.play-button:hover {
    background-color: #0063cc;
    transform: translateY(-1px);
}

/* 修改随机按钮样式 */
.random-button {
    padding: 5px 10px;
    background-color: transparent;
    border: 1px solid #444;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
    font-size: 14px;
    opacity: 0.7;
}

.random-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

/* 新增白天模式样式 */
body.light-mode {
    background-color: #ffffff; /* 改为纯白色 */
    color: #1d1d1f;
}

.light-mode .container {
    background-color: #ffffff;
}

.light-mode h1 {
    color: #1d1d1f;
}

.light-mode input[type="text"],
.light-mode button,
.light-mode select {
    background-color: #ffffff;
    border-color: #d2d2d7;
    color: #1d1d1f;
}

.light-mode .video-wrapper {
    background-color: #f8f8f8; /* 稍微深一点的灰色，用于区分 */
}

.light-mode .resolution {
    background-color: rgba(245, 245, 247, 0.7);
    color: #1d1d1f;
}

.light-mode .play-button {
    background-color: #1d1d1f; /* 使用深灰色 */
    border-color: #1d1d1f;
    color: #ffffff;
}

.light-mode .random-button {
    border-color: #d2d2d7;
    color: #1d1d1f;
    background-color: transparent;
}

.light-mode .random-button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* 修改白天模式下的窗口按钮样式 */
.light-mode .window-button {
    background-color: #e0e0e0; /* 未选中状态使用浅灰色 */
    border-color: #d2d2d7;
    color: #1d1d1f;
}

.light-mode .window-button:hover {
    background-color: #d2d2d7;
}

.light-mode .window-button.active {
    background-color: #1d1d1f; /* 选中状态使用深灰色 */
    border-color: #1d1d1f;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 修改模式切换和历史记录按钮的样式 */
.mode-toggle,
.history-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    z-index: 1000;
    transition: all 0.3s ease;
}

.history-toggle {
    right: 70px; /* 将历史记录按钮放在模式切换按钮的左边 */
}

.light-mode .mode-toggle,
.light-mode .history-toggle {
    background-color: rgba(255, 255, 255, 0.7);
    color: #1d1d1f;
}

/* 修改亮点展示模块样式 */
.features-section {
    margin-top: 30px;
    padding: 30px 20px;
    background-color: rgba(34, 34, 34, 0.8);
    border-radius: 8px;
}

.light-mode .features-section {
    background-color: rgba(248, 248, 248, 0.8);
}

.features-section h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 500;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 强制四列布局 */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.feature {
    text-align: center;
    padding: 15px;
    background-color: rgba(51, 51, 51, 0.6);
    border-radius: 6px;
    transition: all 0.3s ease;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.light-mode .feature {
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.feature:hover {
    transform: translateY(-3px);
}

.feature-icon {
    font-size: 24px; /* 缩小图标 */
    margin-bottom: 8px;
    opacity: 0.8;
}

.feature h3 {
    font-size: 16px; /* 缩小标题 */
    margin-bottom: 6px;
    font-weight: 500;
}

.feature p {
    color: #aaa;
    line-height: 1.4;
    font-size: 12px; /* 缩小描述文字 */
    margin: 0;
}

.light-mode .feature p {
    color: #666;
}

/* 响应式布局：在移动端显示为两列 */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 修改历史记录模块样式 */
.history-section {
    margin-top: 30px;
    padding: 20px;
    background-color: rgba(34, 34, 34, 0.8);
    border-radius: 8px;
}

.light-mode .history-section {
    background-color: rgba(248, 248, 248, 0.8);
}

/* 移除历史记录弹窗样式 */
.history-modal {
    display: none;
}

/* 新增空历史记录提示样式 */
.empty-history {
    text-align: center;
    color: #aaa;
    padding: 20px;
}

.light-mode .empty-history {
    color: #666;
}

/* 优化历史记录样式 */
.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    background-color: rgba(51, 51, 51, 0.6);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.light-mode .history-item {
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.history-item:hover {
    transform: translateY(-2px);
}

.history-content {
    flex: 1;
    margin-right: 15px;
    overflow: hidden;
}

.history-url {
    font-size: 14px;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-time {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}

.light-mode .history-url {
    color: #666;
}

.light-mode .history-time {
    color: #999;
}

.history-actions {
    display: flex;
    gap: 8px;
}

.history-action {
    padding: 6px 12px;
    background-color: #444;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
}

.light-mode .history-action {
    background-color: #d2d2d7;
    color: #1d1d1f;
}

.history-action:hover {
    opacity: 0.8;
}

/* 统一亮点展示和历史记录模块的标题样式 */
.features-section h2,
.history-section h2 {
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #fff;
}

.light-mode .features-section h2,
.light-mode .history-section h2 {
    color: #1d1d1f;
}

/* 统一模块的样式 */
.features-section,
.history-section {
    margin-top: 30px;
    padding: 20px;
    background-color: rgba(34, 34, 34, 0.8);
    border-radius: 8px;
}

.light-mode .features-section,
.light-mode .history-section {
    background-color: rgba(248, 248, 248, 0.8);
}

/* 移动端布局优化 */
@media (max-width: 768px) {
    /* 隐藏窗口按钮 */
    .window-buttons {
        display: none;
    }

    /* 强制单窗口布局 */
    .video-container {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr !important;
        min-height: 300px; /* 适当降低高度 */
    }

    /* 调整控制面板布局 */
    .control-panel {
        flex-direction: column;
        gap: 10px;
    }

    /* 调整分享按钮位置 */
    .share-button {
        position: static;
        width: 100%;
        margin: 0;
    }

    /* 调整视频控制栏布局 */
    .video-control {
        flex-direction: row !important; /* 保持水平排列 */
        gap: 5px;
        align-items: center;
    }

    .video-control input {
        flex: 1;
        min-width: 0; /* 防止输入框溢出 */
    }

    .video-control button {
        padding: 5px 10px;
        white-space: nowrap;
    }

    /* 调整代码示例样式 */
    .code-example-section {
        padding: 10px;
    }

    .code-example {
        padding: 10px;
    }

    /* 调整FAQ样式 */
    .faq-section {
        padding: 10px;
    }

    .faq-question span {
        font-size: 14px;
    }

    .faq-answer {
        font-size: 12px;
    }

    /* 移动端隐藏分享按钮 */
    .share-button {
        display: none !important; /* 使用!important确保覆盖内联样式 */
    }
}

/* 新增footer样式 */
.site-footer {
    text-align: center;
    padding: 20px 0;
    margin-top: 30px;
    color: #aaa;
    font-size: 14px;
    border-top: 1px solid #444;
}

.site-footer a {
    color: #aaa;
    text-decoration: none;
}

.site-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.light-mode .site-footer {
    color: #666;
    border-top-color: #d2d2d7;
}

.light-mode .site-footer a {
    color: #666;
}

.light-mode .site-footer a:hover {
    color: #1d1d1f;
}

/* 新增代码示例样式 */
.code-example-section {
    margin-top: 30px;
    padding: 20px;
    background-color: rgba(34, 34, 34, 0.8);
    border-radius: 8px;
}

.code-example-section h2 {
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #fff;
}

.code-example {
    position: relative;
    background-color: #1e1e1e;
    padding: 20px;
    border-radius: 6px;
    overflow-x: auto;
}

.code-example pre[class*="language-"] {
    margin: 0;
    padding: 20px;
    background-color: #1e1e1e;
    border-radius: 6px;
    overflow-x: auto;
}

.code-example button.copy-code-button {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 8px 16px;
    background-color: #444; /* 使用深灰色 */
    border: 1px solid #666; /* 添加边框 */
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
    font-size: 14px;
}

.code-example button.copy-code-button:hover {
    background-color: #555; /* 悬停时稍微变亮 */
    border-color: #777;
}

.light-mode .code-example-section {
    background-color: rgba(248, 248, 248, 0.8);
}

.light-mode .code-example-section h2 {
    color: #1d1d1f;
}

.light-mode .code-example {
    background-color: #f5f5f7;
}

.light-mode .code-example pre {
    color: #1d1d1f;
}

.light-mode .code-example button.copy-code-button {
    background-color: #e0e0e0; /* 白天模式使用浅灰色 */
    border-color: #d2d2d7;
    color: #1d1d1f;
}

.light-mode .code-example button.copy-code-button:hover {
    background-color: #d2d2d7; /* 悬停时稍微变深 */
    border-color: #c0c0c0;
}

/* 新增FAQ样式 */
.faq-section {
    margin-top: 30px;
    padding: 20px;
    background-color: rgba(34, 34, 34, 0.8);
    border-radius: 8px;
}

.faq-section h2 {
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #fff;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    background-color: rgba(51, 51, 51, 0.6);
    border-radius: 6px;
    overflow: hidden;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background-color: rgba(68, 68, 68, 0.6);
}

.faq-question span {
    font-size: 16px;
    color: #fff;
}

.faq-question .faq-toggle {
    font-size: 20px;
    font-weight: bold;
}

.faq-answer {
    display: none;
    padding: 12px;
    background-color: rgba(68, 68, 68, 0.6);
    color: #aaa;
    font-size: 14px;
}

.faq-answer p {
    margin: 0;
}

.light-mode .faq-section {
    background-color: rgba(248, 248, 248, 0.8);
}

.light-mode .faq-section h2 {
    color: #1d1d1f;
}

.light-mode .faq-item {
    background-color: rgba(255, 255, 255, 0.6);
}

.light-mode .faq-question {
    color: #1d1d1f;
}

.light-mode .faq-question:hover {
    background-color: rgba(221, 221, 221, 0.6);
}

.light-mode .faq-answer {
    background-color: rgba(221, 221, 221, 0.6);
    color: #666;
}

/* 修改白天模式下常见问题的文字颜色 */
.light-mode .faq-question span {
    color: #1d1d1f; /* 使用深灰色文字 */
}

.light-mode .faq-question .faq-toggle {
    color: #1d1d1f; /* 使用深灰色文字 */
}

/* 修改分享按钮样式 */
.share-button {
    position: absolute;
    right: 0;
    padding: 8px 12px;
    background-color: transparent;
    border: 1px solid #444;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    color: #fff;
}

.share-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #666;
}

.share-button .tooltip {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background-color: rgba(0, 0, 0, 0.9);
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.share-button:hover .tooltip {
    opacity: 1;
}

.light-mode .share-button {
    border-color: #d2d2d7;
    color: #1d1d1f;
}