/* 预设头像样式 */
.preset-avatars {
    padding: 10px;
    background:   var(--is-body);
    border-radius: 12px;
}

.preset-avatar-item {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s ease;
}

.preset-avatar-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.preset-avatar-item.active {
    border-color: #007AFF;
    box-shadow: 0 0 0 2px rgba(0,122,255,0.2);
}

.preset-avatar-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 标签选择框样式 - Checkbox版本 */
.tags-checkbox-wrapper .form-check {
    margin: 0;
}

.tags-checkbox-wrapper .form-check-input {
    margin-top: 0.35em;
    cursor: pointer;
}

.tags-checkbox-wrapper .form-check-input:checked {
    background-color: #007AFF;
    border-color: #007AFF;
}

.tags-checkbox-wrapper .form-check-label {
    font-size: 14px;
    transition: color 0.2s;
}
/* 录制音频按钮样式 */
.record-trigger-btn {
  transition: all 0.3s ease;
  background: #fff;
}

.record-trigger-btn:hover {
  border-color: #007AFF !important;
  background: #f0f7ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.15);
}

/* 换一批按钮样式优化 */
#switchTextBtn {
  background: var(--ios-gray-4);
  border: 1px solid var(--ios-gray-3);
  color: var(--ios-gray-1);
}

#switchTextBtn:hover {
  background: var(--ios-gray-5);
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.tags-checkbox-wrapper .form-check-input:disabled + .form-check-label {
    color: #999;
    cursor: not-allowed;
}

#tags-selected-count {
    font-weight: 500;
}
    /* 步骤导航样式 */
    .steps-nav {
        display: flex;
        gap: 20px;
        padding: 15px 0;
        border-bottom: 2px solid var(--is-body);
    }
    .step {
        display: flex;
        align-items: center;
        gap: 8px;
        opacity: 0.5;
    }
    
    .step.active {
        opacity: 1;
    }
    
    .step-number {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #9b9b9b;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }
    
    .step.active .step-number {
        background: #0d6efd;
        color: white;
    }
    
    /* 上传区域样式已移至 ios-common.css（使用 .ios-upload-area） */
    
    .upload-area-square {
        width: 160px;
        height: 160px;
    }
    
    
    /* 确保普通 form-control 也有填充背景 */
    .form-control {
    background: var(--is-body);
    border: 1px solid var(--is-surface);
        border-radius: 12px;
        padding: 12px 16px;
    }
    
    .form-control:focus {
        background: var(--is-body);
        border-color: #007aff;
        box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
    }
    /* 类型选择样式 */
    .type-selector .btn-check:checked + .btn {
        background: #0d6efd;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .type-selector .btn:hover {
        background: rgba(255,255,255,0.5);
            color: var(--is-font);
    }
    img.card-img-top {
        width: 88px;
        height: 88px;
        border-radius: 50%;
        margin-bottom: 16px;
        object-fit: cover;
    }
    /* 添加到my-clone.php文件的<style>标签内 */
    html, body {
        overflow: hidden; /* 阻止整个页面滚动 */
        height: 100%; /* 确保占满整个视口 */
        margin: 0;
        padding: 0;
    }
    
    /* 中间面板基础样式 */
    .zhongjian {
        height: 88vh;
    }
    
    /* 右侧面板样式 - 新增 */
    .right-panel {
        height: 88vh;
        width: 75%;
    }
    
    .right-panel-card {
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0;
    }
    
    /* 导航区域直接在大区域内，不嵌套框 */
    .right-panel-card > .d-flex.justify-content-between:first-child {
        padding: 20px 20px 0 20px;
    }
    
    /* 音色卡片容器样式 - 修改 */
    .voice-models-container {
        flex: 1;
        overflow-y: auto;
        padding-right: 5px;
        padding: 0 16px;
    }
    
    /* 空状态样式 - 新增 */
    .empty-state {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    /* 主内容卡片样式 */
    .main-content-card {
        height: 85%;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    
    /* 美化滚动条 */
    .main-content-card::-webkit-scrollbar,
    .voice-models-container::-webkit-scrollbar {
        width: 3px;
    }
    
    .main-content-card::-webkit-scrollbar-thumb,
    .voice-models-container::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 3px;
    }
    
    /* 步骤导航固定样式 */
    .fixed-header {
        position: sticky;
        top: 0;
        background: var(--is-surface);
        z-index: 2;
        padding: 20px;
    }
    
    .col-md-8.zhongjian {
        width: 25%;
        background-color: var(--is-surface);
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    
    /* 顶部导航对齐 - 修复按钮文字挤压 */
    .right-panel-card > .d-flex.justify-content-between {
        margin: 0 0 20px 0;
    }
    
    .right-panel-card .d-flex.justify-content-between > div:last-child {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    /* 修复按钮文字挤压 - 确保文字不换行 */
    .right-panel-card .btn-group .btn {
        padding: 8px 16px;
        white-space: nowrap;
        min-width: auto;
    }
    
    .right-panel-card .search-input {
        width: 200px;
        margin: 0;
        display: inline-block;
    }
    
    .upload-area.has-file {
        border-style: solid;
    }
    
    /* 我的音色：固定一行 3 个长方形卡片 */
    .voice-models-container .voice-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
        padding-bottom: 20px;
    }
        .alert-warning {
        background: #fff7ed;
        border: 1px solid #ffedd5;
        color: #c2410c;
        border-radius: 8px;
        padding: 12px;
        font-size: 0.64rem;
        margin: 16px 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .agreement-box {
        background: #f9fafb;
        border-radius: 8px;
        padding: 12px;
        margin: 16px 0;
        color: #4b5563;
        font-size: 14px;
    }
    /* 音频时长进度条样式 */
    .audio-duration-box {
        background-color: var(--is-body);
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
    }
    .duration-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    .duration-progress-container {
        background-color:var(--is-surface);
        border-radius: 10px;
        height: 8px;
        position: relative;
        margin: 10px 0;
    }
    .duration-progress-bar {
        height: 100%;
        border-radius: 10px;
        background-color: #4caf50;
        transition: width 0.3s ease;
    }
    .duration-markers {
        display: flex;
        justify-content: space-between;
        margin-top: 5px;
        color: #888;
        font-size: 12px;
    }
    .duration-marker {
        position: relative;
        text-align: center;
        color: #888;
    }
    .duration-marker::before {
        content: '';
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 10px;
        background-color: #888;
    }
    .duration-hint {
        color: red;
        font-size: 12px;
        margin-top: 5px;
    }
    .duration-ok {
        color: #4caf50;
    }
    .notice {
        background: #f8f9fa;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 12px 16px;
        border-radius: 6px;
        font-size: 14px;
        margin-bottom: 20px;
    }