.ti-floating {
    align-items: center;
    background: #ffffff;
    border: 1px solid #d7e2ed;
    border-radius: 6px;
    box-shadow: 0 12px 36px rgba(18, 45, 70, .22);
    bottom: 18px;
    display: flex;
    gap: 7px;
    padding: 8px;
    position: fixed;
    right: 18px;
    z-index: 12000;
}

.ti-floating button {
    border: 0;
    border-radius: 4px;
    color: #fff;
    font-weight: 700;
    padding: 8px 11px;
}

.ti-floating .ti-btn-record { background: #d64b4b; }
.ti-floating .ti-btn-play { background: #2f80c0; }
.ti-floating .ti-btn-pause { background: #d9961c; }
.ti-floating .ti-btn-stop { background: #2f8f4e; }
.ti-floating .ti-btn-muted { background: #71869a; }
.ti-floating .ti-count { color: #21384e; font-size: 12px; font-weight: 700; padding: 0 5px; }

.ti-modal-backdrop {
    align-items: center;
    background: rgba(14, 31, 48, .62);
    bottom: 0;
    display: none;
    justify-content: center;
    left: 0;
    padding: 18px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 13000;
}

.ti-modal {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 18px 60px rgba(0,0,0,.30);
    max-height: 88vh;
    max-width: 760px;
    overflow: auto;
    width: 100%;
}

.ti-modal header {
    border-bottom: 1px solid #dfe8f0;
    padding: 15px 18px;
}

.ti-modal header h3 { color: #12304a; margin: 0; }
.ti-modal .ti-modal-body { padding: 18px; }
.ti-modal .ti-modal-actions { border-top: 1px solid #dfe8f0; display: flex; gap: 8px; justify-content: flex-end; padding: 14px 18px; }
.ti-modal label { color: #234463; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.ti-modal input, .ti-modal textarea, .ti-modal select { border: 1px solid #ccd9e4; border-radius: 4px; display: block; margin-bottom: 10px; padding: 8px; width: 100%; }
.ti-modal .ti-list-choice { border: 1px solid #dfe8f0; border-radius: 6px; cursor: pointer; margin-bottom: 8px; padding: 10px; }
.ti-modal .ti-list-choice:hover { background: #f4f8fb; border-color: #2f80c0; }
.ti-modal .ti-list-choice strong { color: #12304a; display: block; }
.ti-modal .ti-list-choice small { color: #66788d; display: block; }

.ti-player-shade {
    background: rgba(5, 13, 24, .60);
    bottom: 0;
    display: none;
    left: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 12500;
}

.ti-player-highlight {
    border: 3px solid #f4b43f;
    border-radius: 6px;
    box-shadow: 0 0 0 9999px rgba(5, 13, 24, .55), 0 0 28px rgba(244, 180, 63, .85);
    display: none;
    pointer-events: none;
    position: fixed;
    z-index: 12520;
}

.ti-player-highlight.ti-pulse {
    animation: tiPulse 1.1s infinite;
}

.ti-player-click {
    background: rgba(244, 180, 63, .45);
    border: 3px solid #f4b43f;
    border-radius: 999px;
    display: none;
    height: 42px;
    margin-left: -21px;
    margin-top: -21px;
    pointer-events: none;
    position: fixed;
    width: 42px;
    z-index: 12525;
}

.ti-player-arrow {
    color: #f4b43f;
    display: none;
    font-size: 54px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    position: fixed;
    text-shadow: 0 2px 6px rgba(0,0,0,.35);
    z-index: 12526;
}

.ti-player-action-label {
    background: #f4b43f;
    border: 2px solid #ffffff;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    color: #2d2300;
    display: none;
    font-size: 15px;
    font-weight: 800;
    padding: 8px 13px;
    pointer-events: none;
    position: fixed;
    z-index: 12527;
}

.ti-player-bubble {
    background: #fff;
    border: 1px solid #dfe8f0;
    border-left: 5px solid #259763;
    border-radius: 6px;
    box-shadow: 0 12px 34px rgba(0,0,0,.25);
    color: #263d54;
    display: none;
    max-width: 360px;
    padding: 13px;
    bottom: 18px;
    left: 18px;
    position: fixed;
    z-index: 12530;
}

.ti-player-bubble strong { color: #12304a; display: block; margin-bottom: 5px; }
.ti-player-bubble p { margin: 0 0 10px; }
.ti-player-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ti-player-actions button { border: 0; border-radius: 4px; color: #fff; font-weight: 700; padding: 7px 10px; }
.ti-player-actions .prev { background:#71869a; }
.ti-player-actions .next { background:#2f8f4e; }
.ti-player-actions .pause { background:#d9961c; }
.ti-player-actions .exit { background:#c94c4c; }

@keyframes tiPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.025); }
}

@media (max-width: 720px) {
    .ti-floating { bottom: 10px; left: 10px; right: 10px; justify-content: center; }
    .ti-player-bubble { left: 12px !important; right: 12px; top: auto !important; bottom: 18px; max-width: none; }
}