.df-player {
    --df-accent: #ff7b2f;
    --df-accent-2: #ff3d8b;
    --df-bg: rgba(6, 6, 12, 0.88);
    --df-line: rgba(255, 255, 255, 0.14);
    --df-text: #ffffff;
    --df-muted: rgba(255, 255, 255, 0.74);
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--df-line);
    background: #000;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
    outline: none;
    touch-action: manipulation;
}
.df-player video {
    display: block;
    width: 100%;
    height: auto;
    background: #000;
    touch-action: manipulation;
}
.df-player:focus-visible {box-shadow: 0 0 0 3px rgba(255, 123, 47, 0.24), 0 18px 42px rgba(0, 0, 0, 0.36);}

.df-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.3));
}
.df-overlay-btn {
    pointer-events: auto;
    border: none;
    border-radius: 999px;
    width: 74px;
    height: 74px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--df-text);
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
    transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}
.df-overlay-btn:hover,.df-overlay-btn:focus-visible {transform: scale(1.05);background: rgba(10, 10, 18, 0.72);}
.df-overlay-btn.is-hidden {opacity: 0;visibility: hidden;transform: scale(0.92);}

.df-controls {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: linear-gradient(180deg, rgba(16, 16, 24, 0.18), rgba(10, 10, 18, 0.86));
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity 0.18s ease, transform 0.18s ease;
    backdrop-filter: blur(8px);
}
.df-controls.is-hidden {opacity: 0;transform: translateY(8px);pointer-events: none;}

.df-progress {
    position: relative;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    touch-action: none;
}
.df-buffered,.df-played {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
}
.df-buffered {background: rgba(255, 255, 255, 0.2);}
.df-played {background: linear-gradient(90deg, var(--df-accent-2), var(--df-accent));box-shadow: 0 0 18px rgba(255, 123, 47, 0.26);}

.df-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.df-cluster {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.df-btn,.df-extra-button {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
    color: var(--df-text);
    border-radius: 12px;
    min-width: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    backdrop-filter: blur(4px);
}
.df-btn:hover,.df-btn:focus-visible,.df-extra-button:hover,.df-extra-button:focus-visible {background: rgba(255, 255, 255, 0.14);border-color: rgba(255, 255, 255, 0.22);}
.df-btn:active {transform: translateY(1px);}

.df-btn svg,
.df-overlay-btn svg,
.df-extra-button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.df-time {
    color: var(--df-muted);
    font-size: 13px;
    min-width: 92px;
    white-space: nowrap;
    font-weight: 500;
}
.df-volume {display: inline-flex;align-items: center;gap: 8px;}

.df-volume input[type="range"] {
    width: 100px;
    accent-color: var(--df-accent);
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
}
.df-extra-menu {
    position: absolute;
    z-index: 10000;
    background: rgba(12, 12, 20, 0.96);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px;
    min-width: 160px;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
}
.df-extra-menu.show {opacity: 1;visibility: visible;pointer-events: auto;}
.df-menu-section {margin-bottom: 12px;}
.df-menu-section:last-child {margin-bottom: 0;}

.df-menu-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--df-muted);
    margin-bottom: 8px;
    padding-left: 4px;
}
.df-speed-options {display: flex;flex-wrap: wrap;gap: 8px;}

.df-speed-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--df-text);
    border-radius: 40px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.1s ease;
    min-width: 52px;
    text-align: center;
}
.df-speed-btn.active-speed {
    background: var(--df-accent);
    border-color: var(--df-accent);
    color: #000;
    box-shadow: 0 0 8px rgba(255, 123, 47, 0.5);
}
.df-speed-btn:active {transform: scale(0.96);}

.df-menu-screenshot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 40px;
    padding: 8px 12px;
    color: var(--df-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.df-menu-screenshot svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
}
.df-menu-screenshot:active {background: rgba(255, 255, 255, 0.2);}

.df-toast {
    position: absolute;
    top: 14px;
    right: 14px;
    left: auto;
    max-width: calc(100% - 28px);
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);
    color: var(--df-text);
    font-size: 12px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    z-index: 10001;
}
.df-toast.is-visible {opacity: 1;transform: translateY(0);}
.df-player.df-is-playing .df-overlay {pointer-events: none;}

.df-player.df-is-fullscreen,
.df-player:fullscreen,
.df-player:-webkit-full-screen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    background: #000 !important;
    z-index: 9999 !important;
    overflow: hidden !important;
}
.df-player.df-is-fullscreen video,
.df-player:fullscreen video,
.df-player:-webkit-full-screen video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    object-fit: contain;
    background: #000;
    max-height: none !important;
    aspect-ratio: auto;
}
@media (max-width: 760px) {
    .df-controls {
        left: 8px;
        right: 8px;
        bottom: 8px;
        padding: 10px;
        gap: 8px;
    }
    .df-row {flex-direction: column;align-items: stretch;gap: 10px;}
    .df-cluster {width: 100%;justify-content: space-between;}
    .df-progress {order: 0;width: 100%;margin-bottom: 2px;}
    .df-time {min-width: auto;font-size: 12px;}
    .df-volume input[type="range"] {width: 80px;}
    .df-overlay-btn {width: 62px;height: 62px;}
    .df-btn, .df-extra-button {min-width: 40px;min-height: 40px;padding: 0 8px;    }
    .df-extra-menu {min-width: 140px;padding: 10px;    }
    .df-speed-btn {padding: 5px 10px;font-size: 12px;}
}
@media (max-width: 480px) {
    .df-volume input[type="range"] {width: 70px;}
    .df-cluster {gap: 6px;}
}