/* 音频剪切工具 - 与 L4D2 站点统一的透明玻璃风格 */
html,
body.site-embed {
    background: transparent !important;
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

.site-embed header,
.site-embed footer {
    display: none !important;
}

.site-embed main {
    padding-top: 0 !important;
}

.site-embed h2,
.site-embed h3,
.site-embed h4 {
    color: rgba(255, 255, 255, 0.95) !important;
}

.site-embed .text-dark,
.site-embed .text-gray-600,
.site-embed .text-gray-700,
.site-embed .text-gray-500,
.site-embed .text-gray-400,
.site-embed label,
.site-embed p,
.site-embed span,
.site-embed li {
    color: rgba(255, 255, 255, 0.82) !important;
}

.site-embed .bg-white,
.site-embed .bg-gray-50,
.site-embed .bg-gray-100,
.site-embed .bg-gray-200,
.site-embed .bg-primary\/5 {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
}

.site-embed .shadow-sm,
.site-embed .shadow-md,
.site-embed .shadow-lg,
.site-embed .shadow-xl {
    box-shadow: none !important;
}

.site-embed #dropArea {
    border: 2px dashed rgba(255, 255, 255, 0.35) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.site-embed #dropArea:hover,
.site-embed #dropArea.border-primary {
    border-color: rgba(255, 133, 192, 0.7) !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.site-embed button,
.site-embed label.bg-primary,
.site-embed .smart-clip-btn,
.site-embed #addClipBtn,
.site-embed #exportBtn,
.site-embed #clearClipsBtn,
.site-embed #cancelExportBtn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: none !important;
    transform: none !important;
}

.site-embed button:hover,
.site-embed label.bg-primary:hover,
.site-embed .smart-clip-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.site-embed input[type="text"],
.site-embed input[type="number"],
.site-embed select {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.site-embed input[type="range"] {
    accent-color: #ff85c0;
}

.site-embed .text-primary {
    color: #ff85c0 !important;
}

.site-embed .bg-primary\/10 {
    background: rgba(255, 133, 192, 0.18) !important;
}

.site-embed #progressBar,
.site-embed #exportProgressBar,
.site-embed .bg-primary.h-2\.5 {
    background: #ff85c0 !important;
}

.site-embed .timeline-marker {
    background-color: #ff85c0 !important;
}

.site-embed .timeline-selection {
    background-color: rgba(255, 133, 192, 0.22) !important;
}

.site-embed .timeline-handle {
    background-color: #ff85c0 !important;
}

.site-embed .audio-wave {
    background: linear-gradient(90deg, rgba(255, 133, 192, 0.15) 1px, transparent 1px) !important;
    background-size: 10px 100% !important;
}

.site-embed .export-progress-container {
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(6px);
}

.site-embed .export-progress-card,
.site-embed #helpModal > div,
.site-embed #aboutModal > div {
    background: rgba(20, 20, 30, 0.85) !important;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
}

.site-embed #helpModal .border-b,
.site-embed #aboutModal .border-b {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.site-embed .fa {
    color: inherit;
}

.site-embed ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.site-embed ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}

.site-embed ::-webkit-scrollbar-track {
    background: transparent;
}