/* 新增：在线行楷字体定义（CDN直连，无版权，加载快） */

@font-face {
    font-family: 'SanJiXingKai';
    src: url('https://cdn.bootcdn.net/ajax/libs/fonts-cn/1.0.0/sanjixingkai/sanjixingkai.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    /* 优雅加载，不闪屏 */
}


/* 核心：替换全局字体为行楷+调大基础字体至16px，保留后备字体兼容 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'SanJiXingKai', "楷体", "微软雅黑", "Microsoft Yahei", sans-serif;
    font-size: 16px;
    /* 全局基础字体调大，所有继承的文字都会变大 */
}


/* 核心：新壁纸+极轻遮罩+全局布局基底 */

body {
    background: url(../bg.jpg) no-repeat center center;
    /* 注意路径：../回到根目录找bg.jpg */
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh;
    padding: 30px 15px;
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
}


/* 超轻防护遮罩：仅防文字撞色，完全不遮壁纸 */

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: -2;
}


/* 极淡日式装饰：几乎无存在感，仅做全局点缀 */

body::after {
    content: '';
    position: fixed;
    width: 600px;
    height: 350px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    z-index: -1;
    top: -200px;
    right: -200px;
    transform: rotate(20deg);
}


/* 全局通用玻璃卡片：线条完美贴合+基础布局 */

.glass-card {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
    padding: 20px;
    margin: 0 auto 20px;
    max-width: 850px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}


/* 日式顶部线条：完美贴合圆角，无外露 */

.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #94a784;
    z-index: 2;
}


/* 标题区样式 - 调大标题和子标题 */

.title-card {
    text-align: center;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(4px);
    padding-bottom: 15px !important;
}

.title-card h1 {
    font-size: 32px;
    /* 原28px，调大 */
    color: #2d3827;
    font-weight: 500;
    letter-spacing: 4px;
    /* 原3px，稍大更协调 */
    margin-bottom: 12px;
    /* 原10px */
}

.title-card .subtitle {
    color: #4a5843;
    font-size: 15px;
    /* 原13px，调大 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
    /* 原12px */
}


/* 一言语录样式 - 调大语录文字 */

.hitokoto {
    color: #6a7863;
    font-size: 14px;
    /* 原12px，调大 */
    line-height: 1.7;
    padding: 10px 18px;
    /* 原8px15px，内边距稍大 */
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hitokoto i {
    color: #94a784;
    font-size: 13px;
    /* 原11px，调大 */
}

.hitokoto .source {
    color: #849774;
    font-size: 12px;
    /* 原10px，调大 */
    margin-left: 10px;
    /* 原8px */
    opacity: 0.8;
}


/* 提示区样式 - 调大提示文字 */

.tips-card.glass-card {
    background: rgba(255, 255, 255, 0.5);
}

.tips-card .tip-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #3d4a37;
    font-size: 15px;
    /* 原13px，调大 */
    line-height: 1.8;
    margin-bottom: 10px;
    /* 原8px */
}

.tips-card .tip-item:last-child {
    margin-bottom: 0;
}

.tips-card .tip-icon {
    color: #94a784;
    font-size: 16px;
    /* 原14px，调大 */
    margin-top: 3px;
    /* 原2px，对齐文字 */
}

.tips-card .highlight {
    color: #e69880;
    font-weight: 500;
}


/* 输入区样式 - 调大标签和输入框文字 */

.input-card.glass-card {
    background: rgba(255, 255, 255, 0.5);
}

.input-card label {
    display: block;
    color: #3d4a37;
    font-size: 15px;
    /* 原13px，调大 */
    font-weight: 500;
    margin-bottom: 15px;
    /* 原12px */
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-card .label-icon {
    color: #94a784;
}

#videoUrl {
    width: 100%;
    padding: 16px 22px;
    /* 原15px20px，内边距稍大 */
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #e8ece5;
    border-radius: 10px;
    font-size: 16px;
    /* 原14px，调大 */
    outline: none;
    transition: all 0.2s ease;
    color: #2d3827;
}

#videoUrl:focus {
    border-color: #94a784;
    box-shadow: 0 0 0 3px rgba(148, 167, 132, 0.15);
}

#videoUrl::placeholder {
    color: #7a8873;
    font-size: 15px;
    /* 原13px，调大 */
}


/* 选择区样式 - 层级/溢出基础配置 */

.select-card.glass-card {
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
    overflow: visible !important;
    z-index: 10;
}

.select-item {
    flex: 1;
    min-width: 180px;
    position: relative;
    z-index: 20;
    overflow: visible !important;
}

.select-item label {
    display: block;
    color: #3d4a37;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.select-item .label-icon {
    color: #e69880;
}

/* 新的解析接口选择器样式 */
.api-selector-container {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #e8ece5;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 接口搜索框 */
.api-search {
    position: relative;
    margin-bottom: 15px;
}

.api-search input {
    width: 100%;
    padding: 12px 16px;
    padding-right: 40px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e8ece5;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
}

.api-search input:focus {
    border-color: #94a784;
    box-shadow: 0 0 0 3px rgba(148, 167, 132, 0.15);
}

.api-search .search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #7a8873;
    font-size: 14px;
}

/* 分类标签页 */
.api-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e8ece5;
    padding-bottom: 10px;
}

.tab-button {
    flex: 1;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #e8ece5;
    border-radius: 8px;
    font-size: 14px;
    color: #3d4a37;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'SanJiXingKai', "楷体", "微软雅黑", "Microsoft Yahei", sans-serif;
}

.tab-button:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: #94a784;
}

.tab-button.active {
    background: #94a784;
    color: #fff;
    border-color: #94a784;
}

/* 接口列表 */
.api-list {
    margin-bottom: 15px;
}

.api-tab-content {
    display: none;
}

.api-tab-content.active {
    display: block;
}

/* 普通解析接口一行两个布局 */
#normal-tab {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
    gap: 10px;
}

/* 确保M1907系列保持单列布局 */
#m1907-tab {
    display: block;
}

/* 确保只有活动标签页显示 */
.api-tab-content {
    display: none !important;
}

.api-tab-content.active {
    display: block !important;
}

/* 覆盖活动标签页的显示方式 */
.api-tab-content.active#normal-tab {
    display: grid !important;
}

.api-tab-content.active#m1907-tab {
    display: block !important;
}

/* 接口项 */
.api-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #e8ece5;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.api-item:hover {
    background: rgba(148, 167, 132, 0.1);
    border-color: #94a784;
}

.api-item.selected {
    background: rgba(148, 167, 132, 0.2);
    border-color: #94a784;
}

.api-name {
    flex: 1;
    font-weight: 500;
    color: #2d3827;
}

.api-desc {
    font-size: 12px;
    color: #7a8873;
    margin: 0 10px;
    flex-shrink: 0;
}

.api-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    flex-shrink: 0;
}

.api-badge.recommended {
    background: #94a784;
    color: #fff;
}

/* 当前选中的接口显示 */
.selected-api-display {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #e8ece5;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 14px;
    color: #3d4a37;
}

.selected-api-display span:first-child {
    font-weight: 500;
    margin-right: 5px;
}

#selectedApiText {
    color: #94a784;
    font-weight: 500;
}

/* 新的画质选择器样式 */
.quality-selector-container {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #e8ece5;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 画质列表 */
.quality-list {
    margin-bottom: 15px;
}

/* 画质项 */
.quality-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #e8ece5;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.quality-item:hover {
    background: rgba(148, 167, 132, 0.1);
    border-color: #94a784;
}

.quality-item.selected {
    background: rgba(148, 167, 132, 0.2);
    border-color: #94a784;
}

.quality-name {
    font-weight: 500;
    color: #2d3827;
}

.quality-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.quality-badge.recommended {
    background: #94a784;
    color: #fff;
}

/* 当前选中的画质显示 */
.selected-quality-display {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #e8ece5;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 14px;
    color: #3d4a37;
}

.selected-quality-display span:first-child {
    font-weight: 500;
    margin-right: 5px;
}

#selectedQualityText {
    color: #94a784;
    font-weight: 500;
}


/* ========== 自定义下拉框样式 - 调大文字+适配 ========== */

.custom-select {
    width: 100%;
    position: relative;
    font-size: 16px;
    /* 原14px，调大 */
    z-index: 30;
    overflow: visible !important;
}

.select-trigger {
    width: 100%;
    padding: 16px 22px;
    /* 原15px20px，内边距稍大 */
    padding-right: 45px;
    /* 原40px，适配箭头 */
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #e8ece5;
    border-radius: 10px;
    font-size: 16px;
    /* 原14px，调大 */
    color: #2d3827;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.select-trigger:focus,
.select-trigger.active {
    border-color: #94a784;
    box-shadow: 0 0 0 3px rgba(148, 167, 132, 0.15);
    outline: none;
}

.select-arrow {
    color: #7a8873;
    font-size: 14px;
    /* 原12px，调大 */
    transition: transform 0.2s ease;
}

.select-trigger.active .select-arrow {
    transform: rotate(180deg);
    color: #94a784;
}


/* 下拉选项列表：核心样式，保证能展开+独立定位 */

.select-options {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    width: 300px !important;
    /* 原280px，稍宽适配大文字 */
    max-width: 90vw !important;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e8ece5;
    border-radius: 10px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    z-index: 9999 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    margin-top: 6px;
}

.select-options.open {
    max-height: 380px;
    /* 原350px，稍高适配更多选项 */
    overflow-y: auto;
}


/* 下拉框滚动条样式 */

.select-options::-webkit-scrollbar {
    width: 6px;
}

.select-options::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 3px;
}

.select-options::-webkit-scrollbar-thumb {
    background: #94a784;
    border-radius: 3px;
}

.select-options::-webkit-scrollbar-thumb:hover {
    background: #849774;
}


/* 下拉选项样式 - 调大选项文字 */

.select-option {
    padding: 14px 18px;
    /* 原12px15px，内边距稍大 */
    color: #2d3827;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid rgba(148, 167, 132, 0.1);
    font-size: 15px;
    /* 显式定义，保证大小 */
}

.select-option:last-child {
    border-bottom: none;
}

.select-option:hover {
    background: rgba(148, 167, 132, 0.1);
}

.select-option.selected {
    background: rgba(148, 167, 132, 0.2);
    color: #2d3827;
    font-weight: 500;
}

.select-option.disabled {
    background: #f8faf7;
    color: #7a8873;
    cursor: not-allowed;
}


/* ========== 自定义下拉框样式结束 ========== */


/* 按钮区样式 - 调大按钮文字 */

.btn-card.glass-card {
    background: rgba(255, 255, 255, 0.5);
    padding: 18px 22px;
    /* 原15px20px，内边距稍大 */
    display: flex;
    gap: 20px;
    z-index: 1;
}

.btn-card button {
    flex: 1;
    padding: 16px;
    /* 原15px，内边距稍大 */
    border: none;
    border-radius: 10px;
    font-size: 17px;
    /* 原15px，调大 */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#parseBtn {
    background: #94a784;
    color: #fff;
}

#parseBtn:hover {
    background: #849774;
}

#parseBtn:disabled {
    background: #e8ece5;
    color: #fff;
    cursor: not-allowed;
}

#clearBtn {
    background: #e69880;
    color: #fff;
}

#clearBtn:hover {
    background: #d68870;
}


/* 结果提示样式 - 调大提示文字 */

#result {
    max-width: 850px;
    margin: 0 auto 20px;
    padding: 18px 22px;
    /* 原15px20px，内边距稍大 */
    border-radius: 10px;
    font-size: 16px;
    /* 原14px，调大 */
    line-height: 1.8;
    display: none;
    border: 1px solid #e8ece5;
    align-items: center;
    gap: 12px;
    /* 原10px，图标和文字间距稍大 */
    z-index: 5;
    position: relative;
}

.success {
    background: rgba(240, 245, 237, 0.7);
    color: #4a5843;
    border-color: #e1e9dc;
}

.error {
    background: rgba(252, 240, 237, 0.7);
    color: #a65941;
    border-color: #f5e0da;
}

.result-icon {
    font-size: 18px;
    /* 原16px，调大图标 */
}


/* 播放器样式 */

#playerContainer {
    max-width: 850px;
    width: 100%;
    height: 480px;
    border-radius: 16px;
    overflow: hidden;
    background: #252321;
    display: none;
    margin: 0 auto 20px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    z-index: 999;
    position: relative;
    touch-action: manipulation;
}

#videoPlayer,
#m1907Iframe {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: contain;
}

/* 视频播放器控制按钮样式，确保触摸友好 */
#videoPlayer {
    --plyr-color-main: #94a784;
    --plyr-control-spacing: 10px;
    --plyr-font-size-base: 14px;
    --plyr-font-size-small: 12px;
    --plyr-radius: 8px;
}

/* 全屏样式，全平台兼容 */
:fullscreen #playerContainer,
:-webkit-full-screen #playerContainer,
:-moz-full-screen #playerContainer,
:-ms-fullscreen #playerContainer {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    border-radius: 0;
    border: none;
    margin: 0;
}

/* 确保iframe在全屏时也能正确显示 */
:fullscreen #m1907Iframe,
:-webkit-full-screen #m1907Iframe {
    width: 100%;
    height: 100%;
}

/* 横屏模式下的播放器适配 */
@media (orientation: landscape) and (max-height: 500px) {
    #playerContainer {
        height: 200px;
    }
}


/* 状态+页脚样式 - 调大状态和页脚文字 */

.status-footer {
    max-width: 850px;
    margin: 0 auto;
    z-index: 1;
    position: relative;
}

.status-card {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 15px 22px;
    /* 原12px20px，内边距稍大 */
    font-size: 14px;
    /* 原12px，调大 */
    color: #4a5843;
    text-align: center;
    line-height: 1.8;
    margin-bottom: 18px;
    /* 原15px */
}

footer {
    text-align: center;
    font-size: 13px;
    /* 原11px，调大 */
    color: #6a7863;
    padding: 18px 22px;
    /* 原15px20px，内边距稍大 */
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(4px);
    border-radius: 10px;
}


/* 响应式适配 - 全平台兼容设计 */

/* 平板设备适配 */
@media (max-width: 768px) {
    body {
        padding: 20px 10px;
    }
    .glass-card {
        padding: 18px;
        margin-bottom: 15px;
        border-radius: 12px;
    }
    .title-card h1 {
        font-size: 28px;
        letter-spacing: 3px;
    }
    .title-card .subtitle {
        font-size: 14px;
        flex-wrap: wrap;
        padding: 0 10px;
    }
    .hitokoto {
        font-size: 13px;
        max-width: 90%;
    }
    .tips-card .tip-item {
        font-size: 14px;
        padding: 0 5px;
    }
    .select-card.glass-card {
        gap: 15px;
        flex-direction: column;
    }
    .select-item {
        min-width: 100%;
    }
    .btn-card.glass-card {
        gap: 10px;
        padding: 12px 18px;
    }
    .btn-card button {
        padding: 14px;
        font-size: 15px;
        gap: 6px;
    }
    #playerContainer {
        height: 320px;
        border-radius: 12px;
    }
    #videoUrl,
    .select-trigger {
        padding: 14px 18px;
        border-radius: 8px;
        font-size: 15px;
    }
    .select-trigger {
        padding-right: 40px;
    }
    .select-options {
        width: 90vw !important;
        max-width: 300px !important;
    }
    #result {
        font-size: 15px;
        padding: 16px 20px;
        margin: 0 10px 20px;
    }
    .status-card {
        font-size: 13px;
        padding: 14px 20px;
        margin: 0 10px 18px;
    }
    .status-footer {
        margin: 0 10px;
    }
    footer {
        font-size: 12px;
        padding: 15px 18px;
    }
}

/* 移动设备适配 */
@media (max-width: 480px) {
    body {
        padding: 15px 8px;
    }
    .glass-card {
        padding: 16px;
        margin-bottom: 12px;
        border-radius: 10px;
    }
    .title-card h1 {
        font-size: 24px;
        letter-spacing: 2px;
    }
    .title-card .subtitle {
        font-size: 13px;
        gap: 6px;
    }
    .hitokoto {
        font-size: 12px;
        padding: 8px 15px;
        max-width: 95%;
    }
    .tips-card .tip-item {
        font-size: 13px;
        gap: 8px;
        line-height: 1.7;
    }
    .input-card label {
        font-size: 14px;
    }
    #videoUrl {
        padding: 12px 16px;
        font-size: 14px;
    }
    .select-item label {
        font-size: 14px;
    }
    .select-trigger {
        padding: 12px 16px;
        padding-right: 35px;
        font-size: 14px;
    }
    .btn-card.glass-card {
        gap: 8px;
        padding: 10px 15px;
    }
    .btn-card button {
        padding: 12px;
        font-size: 14px;
        gap: 5px;
    }
    #playerContainer {
        height: 260px;
        border-radius: 10px;
        margin: 0 8px 15px;
    }
    .select-options {
        max-height: 300px;
        width: 85vw !important;
        max-width: 280px !important;
    }
    .select-option {
        padding: 12px 15px;
        font-size: 14px;
    }
    #result {
        font-size: 14px;
        padding: 14px 18px;
        margin: 0 8px 15px;
    }
    .status-card {
        font-size: 12px;
        padding: 12px 18px;
        margin: 0 8px 15px;
        line-height: 1.7;
    }
    .status-footer {
        margin: 0 8px;
    }
    footer {
        font-size: 11px;
        padding: 12px 15px;
    }
}

/* 超小屏幕适配 */
@media (max-width: 360px) {
    .title-card h1 {
        font-size: 22px;
        letter-spacing: 1px;
    }
    .title-card .subtitle {
        font-size: 12px;
    }
    #playerContainer {
        height: 220px;
    }
    .btn-card button {
        font-size: 13px;
        padding: 10px;
    }
}

/* 横屏设备适配 */
@media (orientation: landscape) and (max-height: 500px) {
    #playerContainer {
        height: 200px;
    }
    .glass-card {
        padding: 12px;
        margin-bottom: 10px;
    }
    .title-card h1 {
        font-size: 20px;
        margin-bottom: 8px;
    }
    .title-card .subtitle {
        font-size: 12px;
        margin-bottom: 10px;
    }
}