.TTSPlugin,
.TTSPlugin * {
    fill: inherit;
    box-sizing: border-box
}

[data-dark-mode] .TTSPlugin {
    color: #fff
}

.TTSPlugin .hidden {
    display: none
}

.TTSPlugin svg {
    fill: transparent
}

.TTSPlugin-Modal {
    background-color: rgba(0, 0, 0, .4);
    bottom: 0;
    display: flex;
    flex-direction: column;
    left: 0;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    z-index: 9999
}

.TTSPlugin .Modal-content {
    background-color: #fff;
    border-radius: 10px;
    margin: auto;
    max-height: 100vh;
    max-width: 80%;
    overflow: hidden;
    padding: 2px 20px;
    position: relative;
    width: 600px
}

[data-dark-mode] .TTSPlugin .Modal-content {
    background-color: #333
}

.TTSPlugin .Close-modal {
    fill: #333;
    background-color: initial;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 700;
    height: 50px;
    position: absolute;
    right: -3px;
    top: -3px;
    vertical-align: middle;
    width: 50px
}

[data-dark-mode] .TTSPlugin .Close-modal,
[data-dark-mode] .TTSPlugin .Close-modal svg {
    fill: #fff
}

.TTSPlugin .Close-modal:hover {
    fill: #ff4500
}

.TTSPlugin .Close-modal>svg {
    height: 26px;
    position: relative;
    top: 2px;
    width: 26px
}

.TTSPlugin select {
    border-radius: 30px;
    font-size: large;
    max-width: 90%;
    padding: 5px 10px
}

[data-dark-mode] .TTSPlugin select {
    background-color: #333;
    color: #fff
}

.TTSPlugin .styled-btn {
    border: 1px solid darkred;
    border-radius: 20px;
    cursor: pointer;
    font-size: .9em;
    font-weight: 700;
    padding: 10px 25px;
    text-transform: uppercase
}

.TTSPlugin .styled-btn,
[data-dark-mode] .TTSPlugin .styled-btn {
    background-color: red;
    color: #fff
}

.TTSPlugin .styled-btn:hover {
    background-color: darkred;
    color: #fff
}

/* ========== 右侧固定，距离右边框2px，30px宽度 ========== */
.TTSPlugin-Playback-buttons-bar {
    background-color: transparent !important;
    position: fixed !important;
    right: 2px !important;
    left: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    padding: 0 !important;
    pointer-events: none;
    z-index: 999;
    width: 30px !important;
    margin: 0 !important;
}

/* 按钮组主容器 - 使用 space-evenly 实现均匀分布 */
.TTSPlugin-Playback-buttons-bar>span {
    background-color: rgba(255, 0, 0, 0.8) !important;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-evenly !important;
    padding: 0 !important;
    pointer-events: auto;
    width: 30px !important;
    margin: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    height: 210px !important;
}

/* 所有按钮统一样式 - 确保无额外边距 */
.TTSPlugin-Playback-buttons-bar button {
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 15px !important;
    transition: background-color 0.2s;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
}

/* 
 * 按钮顺序（根据实际 DOM 结构调整）
 * 当前顺序：播放 → 前进 → 后退 → 回到开头 → 设置
 */
.TTSPlugin-Playback-buttons-bar .Play-btn { order: 0 !important; }           /* 播放 → 第1位 */
.TTSPlugin-Playback-buttons-bar button:nth-child(4) { order: 1 !important; } /* 前进 → 第2位 */
.TTSPlugin-Playback-buttons-bar button:nth-child(2) { order: 2 !important; } /* 后退 → 第3位 */
.TTSPlugin-Playback-buttons-bar button:first-child { order: 3 !important; }  /* 回到开头 → 第4位 */
.TTSPlugin-Playback-buttons-bar button:nth-child(5) { order: 4 !important; } /* 设置 → 第5位 */

/* 所有按钮内的 SVG 强制居中 */
.TTSPlugin-Playback-buttons-bar button svg {
    display: block !important;
    margin: 0 auto !important;
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
}

/* 播放按钮的 SVG 单独微调位置 */
.TTSPlugin .Play-btn svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    margin: 0 auto !important;
    position: relative !important;
    left: 1px !important;
}

/* 播放按钮整体垂直微调（向上移动11px，约0.5厘米） */
.TTSPlugin .Play-btn {
    background-color: transparent !important;
    border: none !important;
    border-radius: 15px !important;
    height: 30px !important;
    width: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    transform: translateY(-11px) !important;  /* 向上移动21px（约0.5厘米） */
}

.TTSPlugin-Playback-buttons-bar button:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.TTSPlugin .Play-btn:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
}

/* 隐藏占位span和链接区域 */
.TTSPlugin-Playback-buttons-bar>span>span,
.TTSPlugin-Playback-buttons-bar .TTSPlugin-link {
    display: none !important;
}

/* 图标颜色 */
.TTSPlugin-Playback-buttons-bar button svg {
    fill: #fff !important;
    stroke: none;
}

.TTSPlugin-Playback-buttons-bar button:hover svg {
    fill: #ffaa00 !important;
}

/* ========== 以下保留原有功能样式 ========== */
.TTSPlugin-Highlight {
    background-color: #ff0
}

.TTSPlugin-Blink {
    color: #fff
}

.TTSPlugin-Blink,
[data-dark-mode] .TTSPlugin-Highlight {
    background-color: #000
}

.TTSPlugin .Voice-list-element {
    border-radius: 20px;
    display: flex;
    margin: 1px 0;
    padding: 5px 10px
}

.TTSPlugin .Voice-list-element[selected] {
    background-color: #add8e6
}

.TTSPlugin .Allowed-for-publishing:after {
    color: green;
    content: "";
    margin-left: 6px
}

[data-dark-mode] .TTSPlugin .Voice-list-element[selected] {
    background-color: #000
}

.TTSPlugin .Voice-list-element span {
    fill: #20b2aa;
    cursor: pointer;
    display: inline-block;
    line-height: 1.6em;
    margin: 0 5px;
    overflow: hidden;
    vertical-align: middle;
    white-space: nowrap
}

.TTSPlugin .Voice-list-element span:first-child {
    flex: 1 1
}

.TTSPlugin .Voice-list-element span:hover {
    fill: #ff4500;
    color: #ff4500
}

.TTSPlugin .Voice-list-element .Top-btn-svg {
    fill: #20b2aa;
    vertical-align: middle
}

.TTSPlugin .Voice-list-element .Top-btn-svg:hover {
    fill: #ff4500
}

.TTSPlugin .Close-modal svg {
    fill: #000
}

.TTSPlugin button {
    fill: #fff
}

.TTSPlugin button:hover {
    fill: #ff4500
}