/**
 * 德国双元制职业德语学习平台 - C端通用样式 (V1.2.1)
 * 四插件 C端页面共用,遵循「FastAdmin/AdminLTE 原生样式 + 增量补充」规范
 * 全部类名以 pc- 前缀,避免污染框架全局样式;移动端优先
 */
.pc-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 0 60px 0;
    min-height: 100vh;
    background: #f5f6f8;
}

.pc-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #1e3a5f;
    color: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pc-header .pc-header-title {
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-header a {
    color: #fff;
    text-decoration: none;
}

.pc-header .pc-header-back {
    font-size: 14px;
}

/* 头部右侧文字链接(如个人中心页"编辑") */
.pc-header .pc-header-link {
    font-size: 13px;
    min-width: 44px;
    text-align: right;
}

/* 页面辅助提示文字 */
.pc-hint {
    font-size: 12px;
    color: #999;
    margin-top: 6px;
    line-height: 1.6;
}

/* 用户信息卡(个人中心) */
.pc-userinfo {
    display: flex;
    align-items: center;
}

.pc-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    background: #ecf0f1;
    flex-shrink: 0;
}

.pc-userinfo-main {
    flex: 1;
    min-width: 0;
}

.pc-userinfo-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 17px;
    font-weight: 600;
    color: #222;
    margin-bottom: 6px;
}

.pc-userinfo-name .pc-tag {
    margin-left: 8px;
}

.pc-userinfo-sub {
    font-size: 13px;
    color: #666;
    margin-top: 3px;
    word-break: break-all;
}

.pc-body {
    padding: 12px;
}

.pc-card {
    background: #fff;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pc-card-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
}

.pc-empty {
    text-align: center;
    color: #999;
    padding: 40px 0;
}

.pc-empty .pc-empty-icon {
    font-size: 40px;
    color: #ccc;
    margin-bottom: 8px;
}

/* 标签 */
.pc-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 18px;
    color: #fff;
    background: #95a5a6;
}

.pc-tag-primary { background: #337ab7; }
.pc-tag-purple  { background: #8e44ad; }
.pc-tag-success { background: #18bc9c; }
.pc-tag-warning { background: #f39c12; }
.pc-tag-info    { background: #5bc0de; }
.pc-tag-orange  { background: #e67e22; }
.pc-tag-danger  { background: #e74c3c; }
.pc-tag-default { background: #bdc3c7; }

.pc-tag-vip {
    background: linear-gradient(90deg, #f6b73c, #e67e22);
    font-weight: 600;
}

/* 按钮 */
.pc-btn {
    display: inline-block;
    padding: 8px 18px;
    border: none;
    border-radius: 5px;
    background: #337ab7;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
}

.pc-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.pc-btn-block {
    display: block;
    width: 100%;
}

.pc-btn-success { background: #18bc9c; }
.pc-btn-warning { background: #f39c12; }
.pc-btn-danger  { background: #e74c3c; }
.pc-btn-gray    { background: #95a5a6; }

/* 表单 */
.pc-form-group {
    margin-bottom: 16px;
}

.pc-form-group label {
    display: block;
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
}

.pc-input,
.pc-textarea {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
    background: #fff;
}

.pc-input:focus,
.pc-textarea:focus {
    border-color: #337ab7;
    outline: none;
}

/* 选项(习题) */
.pc-exercise-options .pc-option {
    display: flex;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    background: #fff;
}

.pc-exercise-options .pc-option input {
    margin: 3px 8px 0 0;
}

.pc-option-text {
    font-size: 14px;
    color: #333;
    flex: 1;
}

.pc-option-cn {
    font-size: 12px;
    color: #999;
    margin-left: 6px;
}

/* 习题三段式:音标 -> 德语原文 -> 中文翻译 */
.pc-phonetic {
    font-size: 12px;
    color: #8e8e8e;
    margin-bottom: 4px;
}

.pc-german {
    font-size: 16px;
    color: #222;
    font-weight: 500;
    line-height: 1.6;
}

.pc-translate-cn {
    font-size: 14px;
    color: #666;
    margin-top: 4px;
    line-height: 1.6;
}

.pc-exercise-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.pc-exercise-score {
    font-size: 13px;
    color: #e67e22;
}

.pc-exercise-audio {
    margin-bottom: 10px;
}

.pc-exercise-audio audio {
    width: 100%;
}

.pc-exercise-analysis {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
    font-size: 13px;
    color: #888;
}

/* 进度条 */
.pc-progress {
    height: 8px;
    background: #ecf0f1;
    border-radius: 4px;
    overflow: hidden;
}

.pc-progress .pc-progress-bar {
    height: 100%;
    background: #18bc9c;
    border-radius: 4px;
    transition: width 0.3s;
}

.pc-progress-done .pc-progress-bar {
    background: #337ab7;
}

/* 学情统计页:模块分布 */
.pc-module-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f2f2f2;
    font-size: 13px;
}

.pc-module-row:last-child {
    border-bottom: none;
}

.pc-module-meta {
    color: #888;
}

/* 学情统计页:学习进度列表 */
.pc-progress-row {
    padding: 10px 0;
    border-bottom: 1px solid #f2f2f2;
}

.pc-progress-row:last-child {
    border-bottom: none;
}

.pc-progress-head {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.pc-progress-head .pc-tag {
    margin-right: 8px;
}

.pc-progress-name {
    flex: 1;
    font-size: 13px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

/* 统计卡片 */
.pc-stats-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -6px;
}

.pc-stats-col {
    width: 50%;
    padding: 6px;
    box-sizing: border-box;
}

.pc-stats-item {
    background: #fff;
    border-radius: 8px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pc-stats-item .pc-stats-num {
    font-size: 24px;
    font-weight: 700;
    color: #1e3a5f;
}

.pc-stats-item .pc-stats-label {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

/* 状态标签渲染 */
.pc-status-done {
    color: #18bc9c;
}

.pc-status-learning {
    color: #95a5a6;
}

.pc-status-pending {
    color: #f39c12;
}

.pc-status-pass {
    color: #18bc9c;
}

.pc-status-reject {
    color: #95a5a6;
}

/* 页脚 */
.pc-footer {
    text-align: center;
    color: #bbb;
    font-size: 12px;
    padding: 16px 0;
}

/* ============================================================
   german_course C端:等级列表 / 课程列表 / 课程详情
   ============================================================ */
/* 等级卡片 */
.pc-level-card {
    cursor: pointer;
}

.pc-level-card:active {
    transform: scale(0.99);
}

.pc-level-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.pc-level-code {
    font-size: 20px;
    font-weight: 700;
    color: #1e3a5f;
    margin-right: 8px;
}

.pc-level-name {
    font-size: 14px;
    color: #555;
    margin-right: 8px;
}

.pc-level-count {
    margin-left: auto;
    font-size: 12px;
    color: #999;
}

/* 解锁条件明细(等级页 + 晋升条件) */
.pc-unlock-rules {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
}

.pc-unlock-rule {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #333;
    padding: 3px 0;
}

.pc-unlock-fail {
    color: #e74c3c;
}

.pc-unlock-icon {
    width: 18px;
    flex-shrink: 0;
    font-weight: 700;
}

.pc-unlock-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-unlock-actual {
    font-size: 12px;
    color: #999;
    margin-left: 8px;
}

.pc-unlock-fail .pc-unlock-actual {
    color: #e74c3c;
}

/* 课程卡片(列表) */
.pc-course-card {
    cursor: pointer;
}

.pc-course-card:active {
    transform: scale(0.99);
}

.pc-course-head {
    display: flex;
    align-items: center;
}

.pc-course-title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-course-cover {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    border-radius: 6px;
    margin-top: 10px;
}

/* 课节树(课程详情) */
.pc-lesson-tree {
    margin-top: 4px;
}

.pc-lesson-row {
    display: flex;
    align-items: center;
    padding: 10px 4px;
    border-bottom: 1px solid #f2f2f2;
    cursor: pointer;
}

.pc-lesson-row:last-child {
    border-bottom: none;
}

.pc-lesson-row:active {
    background: #f9f9f9;
}

.pc-lesson-index {
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    background: #ecf0f1;
    color: #666;
    font-size: 12px;
    flex-shrink: 0;
    margin-right: 10px;
}

.pc-lesson-done .pc-lesson-index {
    background: #18bc9c;
    color: #fff;
}

.pc-lesson-main {
    flex: 1;
    min-width: 0;
}

.pc-lesson-title {
    display: block;
    font-size: 14px;
    color: #333;
}

.pc-lesson-done .pc-lesson-title {
    color: #18bc9c;
}

.pc-lesson-summary {
    display: block;
    font-size: 12px;
    color: #999;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-lesson-meta {
    font-size: 12px;
    color: #999;
    flex-shrink: 0;
    margin: 0 8px;
}

/* ============================================================
   german_course C端:资源内容页(8 类资源)
   ============================================================ */
.pc-content-card {
    margin-bottom: 12px;
}

.pc-content-head {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.pc-content-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-content-duration {
    font-size: 12px;
    color: #999;
    flex-shrink: 0;
    margin-left: 8px;
}

.pc-content-body {
    margin-top: 6px;
}

.pc-content-desc {
    font-size: 12px;
    color: #888;
    margin-top: 8px;
    line-height: 1.6;
}

/* 音视频/图片媒体 */
.pc-media video,
.pc-media audio {
    width: 100%;
    display: block;
}

.pc-media-image img {
    width: 100%;
    border-radius: 6px;
    display: block;
}

/* 习题模块容器 */
.pc-exercise-box {
    margin-top: 6px;
}

/* ============================================================
   german_course C端:晋升记录
   ============================================================ */
.pc-promo-row {
    padding: 10px 0;
    border-bottom: 1px solid #f2f2f2;
}

.pc-promo-row:last-child {
    border-bottom: none;
}

.pc-promo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pc-promo-main {
    font-size: 14px;
    color: #333;
}

/* ============================================================
   german_course C端:职业树
   ============================================================ */
.pc-career-group {
    margin-bottom: 12px;
}

.pc-career-parent {
    font-size: 14px;
    font-weight: 600;
    color: #1e3a5f;
    padding: 6px 0;
    border-bottom: 1px solid #f2f2f2;
}

.pc-career-children {
    display: flex;
    flex-wrap: wrap;
    padding-top: 8px;
}

.pc-career-item {
    display: inline-block;
    padding: 6px 14px;
    margin: 0 8px 8px 0;
    border: 1px solid #dcdfe6;
    border-radius: 16px;
    font-size: 13px;
    color: #333;
    background: #fff;
    cursor: pointer;
}

.pc-career-item:active {
    background: #ecf0f1;
}

.pc-career-active {
    border-color: #18bc9c;
    background: #18bc9c;
    color: #fff;
}

/* ============================================================
   german_exercise C端:题库列表页 + 练习页
   ============================================================ */
/* 题型筛选条(横向可滚动) */
.pc-ex-filter {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pc-ex-tab {
    flex-shrink: 0;
    padding: 6px 14px;
    margin-right: 8px;
    border-radius: 16px;
    font-size: 13px;
    color: #666;
    background: #f0f2f5;
    cursor: pointer;
    white-space: nowrap;
}

.pc-ex-tab:last-child {
    margin-right: 0;
}

.pc-ex-tab-active {
    background: #337ab7;
    color: #fff;
}

/* 搜索区 */
.pc-ex-search {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.pc-ex-search .pc-input {
    flex: 1;
    margin-right: 8px;
}

/* 习题列表卡片 */
.pc-exercise-card {
    cursor: pointer;
}

.pc-exercise-card:active {
    transform: scale(0.99);
}

/* 分页条 */
.pc-ex-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pc-ex-pager-info {
    font-size: 13px;
    color: #666;
}

/* 练习页提示 */
.pc-ex-tip {
    text-align: center;
}