/* ============================================================
   视频播放器 + 随机广告插播 · 样式

   【配色体系】
   主色  ：靛蓝 Indigo —— 单一色相，只用不同明度（#4a67e8 → #8aa0ff）
           这是"和谐"的核心：同一界面里主色只能有一个色相。
   底色  ：通透灰蓝 —— 保持明度不刺眼，但提高饱和度（25%→38%），
           让背景是"干净的蓝"而不是"脏的灰"。
   点缀  ：琥珀金 —— 与靛蓝成互补色，只用于广告相关元素，
           互补色对比强烈却不刺眼，是经典搭配。
   阴影  ：统一用带蓝调的深色 rgba(45, 58, 90)，比纯黑灰更通透高级。

   【原则】所有颜色必须走 CSS 变量，禁止散落硬编码色值。
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* ---- 底色：通透灰蓝（提高饱和度，去掉脏灰感）---- */
    --bg:        #dae1f0;
    --bg-soft:   #d3dbec;
    --bg-deep:   #ccd5e8;

    /* ---- 面板层 ---- */
    --panel:     #f6f8fd;
    --panel-2:   #eff2fa;
    --panel-3:   #e4e9f5;
    --line:      #d2d9ea;
    --line-soft: #dbe1ef;

    /* ---- 文字：深板岩，冷调但不死黑 ---- */
    --text:      #1b2331;
    --text-dim:  #55617a;
    --text-faint:#8b96ab;

    /* ---- 主色：靛蓝单色相，四档明度 ---- */
    --accent:      #4a67e8;
    --accent-2:    #6d86f5;
    --accent-3:    #8aa0ff;
    --accent-deep: #3550c8;
    --accent-dim:  rgba(74, 103, 232, .10);
    --accent-ring: rgba(74, 103, 232, .22);
    --accent-glow: rgba(74, 103, 232, .38);

    /* ---- 点缀：琥珀金（广告专用，与靛蓝互补）---- */
    --ad:        #f0a128;
    --ad-2:      #fbc659;
    --ad-dim:    rgba(240, 161, 40, .13);
    --ad-glow:   rgba(240, 161, 40, .45);

    /* ---- 播放器深色画面上的浅色文字 ---- */
    --on-dark:     #f3f6fc;
    --on-dark-dim: #b6c0d4;

    /* ---- 统一阴影色（带蓝调，避免纯黑灰的脏）---- */
    --shadow:    rgba(45, 58, 90, .32);
    --shadow-sm: rgba(45, 58, 90, .16);

    --radius:    16px;
    --radius-sm: 11px;
}

html { -webkit-font-smoothing: antialiased; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--text);
    min-height: 100vh;
    padding: 32px 18px 72px;
    line-height: 1.6;
    /* 背景光晕全部用靛蓝同一色相的不同明度 → 和谐统一 */
    background:
        radial-gradient(1150px 580px at 10% -10%, rgba(74, 103, 232, .13) 0%, transparent 55%),
        radial-gradient(1000px 540px at 90% -6%, rgba(109, 134, 245, .11) 0%, transparent 52%),
        radial-gradient(950px 500px at 50% 110%, rgba(138, 160, 255, .09) 0%, transparent 55%),
        linear-gradient(180deg, #dae1f0 0%, #d4dcec 45%, #ccd5e8 100%);
    background-attachment: fixed;
}

.app { max-width: 980px; margin: 0 auto; }

/* ===== 页脚（备案号）：管局要求悬挂并链接到工信部备案官网 ===== */
.foot {
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
    text-align: center;
    font-size: 12px;
}

.foot a {
    color: var(--text-faint);
    text-decoration: none;
    letter-spacing: .02em;
}

.foot a:hover {
    color: var(--text-dim);
    text-decoration: underline;
}

/* ===== 静态演示声明条：琥珀色 = 点缀色，只用于提示，不抢主视觉 ===== */
.static-note {
    margin-top: 16px;
    padding: 12px 16px;
    background: #fff7e3;
    border: 1px solid #eddcb0;
    border-left: 3px solid #d9a441;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.8;
    color: #7a5a17;
}
.static-note b { color: #64480c; }

/* ===== 顶栏 ===== */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.logo {
    flex: none;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    font-size: 17px;
    color: #fff;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
    border-radius: 13px;
    box-shadow: 0 8px 22px -8px var(--accent-glow),
                inset 0 1px 0 rgba(255, 255, 255, .25);
}
.brand-text { min-width: 0; }
.brand-text h1 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}
.sub {
    margin-top: 3px;
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: .2px;
}
.sub b { color: var(--accent); font-weight: 600; }

.ghost-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 2px 8px -4px var(--shadow-sm);
    transition: border-color .15s, background .15s, box-shadow .15s, transform .05s;
}
.ghost-btn::before {
    content: "↻";
    font-size: 14px;
    color: var(--accent);
    line-height: 1;
    transition: transform .3s ease;
}
.ghost-btn:hover {
    border-color: var(--accent-ring);
    background: var(--panel);
    box-shadow: 0 6px 18px -8px var(--accent-glow);
}
.ghost-btn:hover::before { transform: rotate(180deg); }
.ghost-btn:active { transform: translateY(1px); }

/* ===== 播放器 ===== */
.player {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid rgba(74, 103, 232, .16);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow:
        0 24px 60px -28px var(--shadow),
        0 0 0 1px rgba(255, 255, 255, .5) inset;
    transition: box-shadow .2s ease, transform .2s ease;
}
.player:hover {
    box-shadow:
        0 32px 72px -30px rgba(45, 58, 90, .42),
        0 0 0 1px rgba(255, 255, 255, .6) inset;
    transform: translateY(-2px);
}
.player.fs:hover { transform: none; }
.player video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: block;
    object-fit: contain;
}
/* 底部暗角：让广告角标/跳过按钮始终清晰可读 */
.player::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, .45) 0%,
        rgba(0, 0, 0, 0) 22%
    );
    z-index: 2;
}

/* ===== 自定义控制条 ===== */
.controls {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 100%);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    visibility: hidden;
    z-index: 4;
}
/* 非全屏：鼠标悬停显示；全屏：由 JS 的 hide-ui 类控制自动隐藏 */
.player:hover .controls,
.player:not(.hide-ui) .controls { opacity: 1; transform: translateY(0); visibility: visible; }

/* 广告播放时隐藏自定义控制条，避免与广告层自身的进度条重复 */
.player.ad-playing .controls {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.ctl-btn {
    flex: none;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    font-size: 14px;
    color: var(--on-dark);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 9px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ctl-btn:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .4); }

.ctl-time {
    flex: none;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--on-dark);
    letter-spacing: .2px;
}

.ctl-seek {
    flex: 1;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    outline: none;
    cursor: pointer;
    transition: height .15s ease;
}
/* 悬停时进度条变粗，更有"可交互"的反馈 */
.ctl-seek:hover { height: 6px; }

/* 已播放部分：用 CSS 变量填充渐变（JS 同步 --seek 值） */
.ctl-seek::-webkit-slider-runnable-track {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-3) var(--seek, 0%), rgba(255,255,255,.18) var(--seek, 0%));
}

/* 滑块：平时隐藏，悬停到控制条时才浮现；白色圆点 + 细腻描边 */
.ctl-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px; height: 12px;
    margin-top: -4px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--accent);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
    opacity: 0;
    transform: scale(.7);
    transition: opacity .15s ease, transform .15s ease;
}
.ctl-seek:hover::-webkit-slider-thumb,
.controls:hover .ctl-seek::-webkit-slider-thumb { opacity: 1; transform: scale(1); }

.ctl-seek::-moz-range-thumb {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--accent);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
    opacity: 0;
    transform: scale(.7);
    transition: opacity .15s ease, transform .15s ease;
}
.ctl-seek:hover::-moz-range-thumb,
.controls:hover .ctl-seek::-moz-range-thumb { opacity: 1; transform: scale(1); }

.ctl-seek::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
}
.ctl-seek::-moz-range-progress {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-3));
}

/* 全屏状态：播放器占满屏幕，去掉圆角/边框，容器尺寸自适应 */
.player.fs {
    aspect-ratio: auto;
    width: 100vw;
    height: 100vh;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* ===== 广告层（纯覆盖层） ===== */
.ad-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease;
    z-index: 5;
}
.ad-layer.show { opacity: 1; visibility: visible; }
.ad-layer .skip-btn { pointer-events: auto; }

/* 左上角：广告标 + 序号 */
.ad-top {
    position: absolute;
    top: 16px; left: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
}
.ad-badge {
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #241800;
    background: linear-gradient(135deg, var(--ad) 0%, var(--ad-2) 100%);
    border-radius: 6px;
    box-shadow: 0 4px 14px -4px var(--ad-glow);
}
.ad-index {
    padding: 4px 11px;
    font-size: 12px;
    color: var(--on-dark);
    background: rgba(10, 14, 20, .55);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    backdrop-filter: blur(8px);
}

/* 左下角：品牌 + 标题 */
.ad-meta {
    position: absolute;
    left: 18px; bottom: 34px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 60%;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .95);
    z-index: 3;
}
.ad-brand {
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ad-2);
    font-weight: 600;
}
.ad-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 右下角：跳过按钮 */
.skip-btn {
    position: absolute;
    right: 16px; bottom: 24px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--on-dark);
    background: rgba(12, 16, 24, .65);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: background .15s, border-color .15s, color .15s;
    z-index: 3;
}
.skip-btn:not(:disabled):hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}
.skip-btn:disabled {
    color: var(--on-dark-dim);
    cursor: default;
}

/* 广告底部进度条 */
.ad-progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, .14);
    z-index: 3;
}
.ad-progress i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--ad), var(--ad-2));
    transition: width .25s linear;
}

/* ===== 蒙层提示 ===== */
.overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(12, 17, 28, .82);
    color: var(--on-dark-dim);
    font-size: 14px;
    z-index: 6;
    transition: opacity .25s;
}
.overlay span {
    display: flex;
    align-items: center;
    gap: 10px;
}
.overlay span::before {
    content: "";
    width: 16px; height: 16px;
    border: 2px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.overlay.hide { opacity: 0; visibility: hidden; }
.overlay.err { color: #f87171; }
.overlay.err span::before { display: none; }

/* ===== 面板 ===== */
.panel {
    margin-top: 20px;
    padding: 22px 24px;
    background: var(--panel);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px -18px var(--shadow-sm);
}
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.panel h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--text);
}
.panel h2::before {
    content: "";
    width: 4px; height: 15px;
    background: linear-gradient(var(--accent), var(--accent-3));
    border-radius: 3px;
}
.chip {
    padding: 4px 13px;
    font-size: 12px;
    font-weight: 500;
    color: var(--accent);
    background: var(--accent-dim);
    border: 1px solid var(--accent-ring);
    border-radius: 999px;
}

/* 插播计划列表 —— 时间轴卡片 */
.plan-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.plan-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--panel-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    font-size: 13px;
    transition: border-color .15s, background .15s, opacity .25s, transform .15s;
}
.plan-list li:hover { border-color: var(--accent-ring); transform: translateX(3px); }
.plan-list .no {
    flex: none;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
    border-radius: 9px;
    box-shadow: 0 3px 10px -3px var(--accent-glow);
}
.plan-list .at {
    flex: none;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    min-width: 62px;
}
.plan-list .t {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}
.plan-list .d {
    flex: none;
    font-size: 11.5px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    padding: 2px 9px;
    background: var(--panel-3);
    border-radius: 6px;
}
.plan-list li.done { opacity: .45; }
.plan-list li.done .no {
    color: var(--text-faint);
    background: var(--panel-3);
    box-shadow: none;
}

.hint {
    margin-top: 16px;
    padding: 12px 16px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-dim);
    background: var(--bg-soft);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
}
.hint b { color: var(--accent); font-weight: 500; }

/* 技术说明 */
.tech dl {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 14px 18px;
    font-size: 12.5px;
    line-height: 1.7;
}
.tech dt {
    color: var(--text-dim);
    font-weight: 500;
    padding-top: 1px;
}
.tech dd { color: var(--text); min-width: 0; word-break: break-word; }
.tech code {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    color: var(--accent);
    background: var(--accent-dim);
    padding: 1px 6px;
    border-radius: 5px;
}
.tech b { color: var(--text); font-weight: 600; }

/* ===== 窄屏适配 ===== */
@media (max-width: 620px) {
    body { padding: 20px 12px 48px; }
    .topbar { flex-wrap: wrap; }
    .brand-text h1 { font-size: 15px; }
    .tech dl { grid-template-columns: 1fr; gap: 4px 0; }
    .tech dt { font-size: 11.5px; margin-top: 8px; }
    .ad-meta { max-width: 52%; }
    .plan-list .d { display: none; }
    .panel { padding: 18px 16px; }
}