/* ==========================================================================
云课堂 · 设计系统 app.css
移动端优先 (Mobile-first)。全部组件以 yk- 前缀命名，类名契约不可更改。
主色 #ff6a00 与 保持一致。
无外部依赖：系统字体栈、纯 CSS，无框架、无 webfont。
========================================================================== */
/* --------------------------------------------------------------------------
1. 设计令牌 (Design Tokens)
-------------------------------------------------------------------------- */
:root{
/* —— 颜色 —— */
--yk-primary: #ff6a00; /* 主色（与 theme-color 一致，勿改） */
--yk-primary-d: #d95400; /* 主色加深：按压 / 描边 */
--yk-primary-l: #ff8f3c; /* 主色减淡：渐变浅端 */
--yk-primary-soft: #fff2e6; /* 主色背景块 */
--yk-primary-soft2:#fff8f2; /* 更浅的主色背景 */
--yk-grad: linear-gradient(135deg,#ff6a00 0%,#ff9a2e 100%);
--yk-ink1: #1a1a1a; /* 墨色一级：标题 */
--yk-ink2: #555555; /* 墨色二级：正文 */
--yk-ink3: #9a9a9a; /* 墨色三级：辅助 / 元信息 */
--yk-line: #ededed; /* 分隔线 */
--yk-line2: #f4f4f4; /* 更浅分隔线 */
--yk-bg: #f4f5f7; /* 页面背景 */
--yk-surface:#ffffff; /* 卡片 / 面 */
--yk-success:#1a7f37; --yk-success-bg:#e8f7ed;
--yk-warn: #a86a00; --yk-warn-bg: #fff6e0;
--yk-error: #d92d20; --yk-error-bg: #ffeceb;
--yk-vip: #c8942a; /* VIP 金 */
--yk-lock: #b4b4b4; /* 锁定灰 */
/* —— 字号阶梯 —— */
--yk-fs-11:11px; --yk-fs-12:12px; --yk-fs-13:13px; --yk-fs-14:14px;
--yk-fs-16:16px; --yk-fs-18:18px; --yk-fs-20:20px; --yk-fs-24:24px;
/* —— 间距阶梯 —— */
--yk-sp-1:4px; --yk-sp-2:8px; --yk-sp-3:12px; --yk-sp-4:16px;
--yk-sp-5:20px; --yk-sp-6:24px; --yk-sp-7:32px;
/* —— 圆角 —— */
--yk-r-sm:8px; --yk-r-md:12px; --yk-r-lg:16px; --yk-r-pill:999px;
/* —— 阴影 —— */
--yk-sh-card:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
--yk-sh-pop: 0 8px 28px rgba(0,0,0,.16);
--yk-sh-btn: 0 3px 10px rgba(255,106,0,.28);
--yk-sh-hd: 0 2px 10px rgba(0,0,0,.12);
/* —— 过渡时长 —— */
--yk-t-fast:.15s; --yk-t-base:.22s; --yk-t-slow:.32s;
--yk-ease:cubic-bezier(.22,.61,.36,1);
/* —— 布局 —— */
--yk-page:760px; /* 内容最大宽度 */
--yk-hd-h:56px;
--yk-safe-t:env(safe-area-inset-top,0px);
--yk-safe-b:env(safe-area-inset-bottom,0px);
--yk-safe-l:env(safe-area-inset-left,0px);
--yk-safe-r:env(safe-area-inset-right,0px);
}
/* --------------------------------------------------------------------------
2. 基础重置
-------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
"Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:var(--yk-fs-14);
line-height:1.6;
color:var(--yk-ink2);
background:var(--yk-bg);
-webkit-tap-highlight-color:transparent;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--yk-primary);outline-offset:2px;border-radius:4px}
/* 可横向滚动容器：隐藏滚动条（webkit + firefox） */
.yk-noscroll{scrollbar-width:none;-ms-overflow-style:none}
.yk-noscroll::-webkit-scrollbar{display:none;width:0;height:0}
/* --------------------------------------------------------------------------
3. 布局
-------------------------------------------------------------------------- */
.yk-wrap{max-width:var(--yk-page);margin:0 auto;padding:0 var(--yk-sp-3);width:100%}
.yk-wrap--full{padding:0}
.yk-main{
padding-bottom:calc(var(--yk-sp-6) + var(--yk-safe-b));
min-height:60vh;
}
.yk-main--bar{padding-bottom:calc(72px + var(--yk-safe-b))}
.yk-sec{
background:var(--yk-surface);
border-radius:var(--yk-r-md);
margin:var(--yk-sp-3) 0;
overflow:hidden;
}
.yk-sec--plain{background:transparent;border-radius:0}
.yk-sec-hd{
display:flex;align-items:center;gap:var(--yk-sp-2);
padding:var(--yk-sp-3) var(--yk-sp-3) var(--yk-sp-2);
font-size:var(--yk-fs-16);font-weight:700;color:var(--yk-ink1);
position:relative;
}
.yk-sec-hd::before{
content:"";width:4px;height:16px;border-radius:2px;
background:var(--yk-grad);flex:0 0 auto;
}
.yk-sec-hd small{font-size:var(--yk-fs-12);font-weight:400;color:var(--yk-ink3)}
.yk-sec-hd .sp{margin-left:auto;font-size:var(--yk-fs-12);font-weight:400;color:var(--yk-ink3)}
/* 页脚 */
.yk-foot{
background:#282828;color:#8b8b8b;text-align:center;
padding:var(--yk-sp-5) var(--yk-sp-3) calc(var(--yk-sp-5) + var(--yk-safe-b));
font-size:var(--yk-fs-12);line-height:1.8;margin-top:var(--yk-sp-4);
}
.yk-foot a{color:#b8b8b8}
.yk-foot a:active{color:var(--yk-primary)}
/* 面包屑 */
.yk-crumb{
display:flex;align-items:center;gap:6px;flex-wrap:wrap;
padding:var(--yk-sp-2) var(--yk-sp-3);
font-size:var(--yk-fs-12);color:var(--yk-ink3);
background:var(--yk-surface);border-bottom:1px solid var(--yk-line);
}
.yk-crumb a{color:var(--yk-primary)}
.yk-crumb .sep{color:#cfcfcf}
/* --------------------------------------------------------------------------
4. 头部 / 导航 / 页签
-------------------------------------------------------------------------- */
.yk-hd{
position:sticky;top:0;z-index:50;
background:var(--yk-grad);
color:#fff;
padding-top:var(--yk-safe-t);
box-shadow:var(--yk-sh-hd);
}
.yk-hd-top{
display:flex;align-items:center;justify-content:space-between;gap:var(--yk-sp-3);
padding:var(--yk-sp-2) var(--yk-sp-3);
min-height:var(--yk-hd-h);
max-width:var(--yk-page);margin:0 auto;
}
.yk-logo{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.yk-logo b{display:block;font-size:19px;font-weight:800;letter-spacing:.5px}
.yk-logo i{display:block;font-size:var(--yk-fs-11);font-style:normal;opacity:.92;margin-top:2px}
.yk-hd-actions{display:flex;align-items:center;gap:var(--yk-sp-2);flex:0 0 auto}
.yk-hd-actions a{
font-size:var(--yk-fs-12);padding:6px 12px;border-radius:var(--yk-r-pill);
background:rgba(255,255,255,.22);min-height:32px;display:inline-flex;align-items:center;
transition:background var(--yk-t-fast) var(--yk-ease);
}
.yk-hd-actions a:active{background:rgba(255,255,255,.38)}
.yk-hd-actions .un{font-size:var(--yk-fs-12);opacity:.95;padding:0 2px;
max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yk-nav{
display:flex;align-items:stretch;
overflow-x:auto;-webkit-overflow-scrolling:touch;
border-top:1px solid rgba(255,255,255,.22);
max-width:var(--yk-page);margin:0 auto;
scrollbar-width:none;
/* 边缘渐隐提示 */
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
}
.yk-nav::-webkit-scrollbar{display:none;width:0;height:0}
.yk-nav-item{
flex:0 0 auto;display:inline-flex;align-items:center;
padding:11px 15px;font-size:var(--yk-fs-14);color:#fff;opacity:.9;
white-space:nowrap;position:relative;
transition:background var(--yk-t-fast) var(--yk-ease),opacity var(--yk-t-fast);
}
.yk-nav-item:active{background:rgba(0,0,0,.14)}
.yk-nav-item.on{opacity:1;font-weight:700;background:rgba(0,0,0,.16)}
.yk-nav-item.on::after{
content:"";position:absolute;left:15px;right:15px;bottom:5px;height:3px;
border-radius:3px;background:#fff;
}
/* --------------------------------------------------------------------------
5. Hero / Stats
-------------------------------------------------------------------------- */
.yk-hero{
background:var(--yk-grad);color:#fff;
padding:var(--yk-sp-5) var(--yk-sp-4) var(--yk-sp-6);
position:relative;overflow:hidden;
}
.yk-hero::after{
content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;
border-radius:50%;background:rgba(255,255,255,.12);
}
.yk-hero h1{font-size:var(--yk-fs-24);font-weight:800;letter-spacing:.5px;position:relative}
.yk-hero p{font-size:var(--yk-fs-12);opacity:.95;margin-top:6px;position:relative}
.yk-stats{
display:grid;grid-template-columns:repeat(3,1fr);gap:var(--yk-sp-2);
padding:0 var(--yk-sp-3) var(--yk-sp-4);
background:var(--yk-grad);color:#fff;
}
.yk-stats .item{
background:rgba(255,255,255,.14);border-radius:var(--yk-r-sm);
padding:var(--yk-sp-2) var(--yk-sp-1);text-align:center;
}
.yk-stats b{display:block;font-size:var(--yk-fs-18);font-weight:800;line-height:1.2}
.yk-stats span{display:block;font-size:var(--yk-fs-11);opacity:.9;margin-top:2px}
/* --------------------------------------------------------------------------
6. 卡片栅格
-------------------------------------------------------------------------- */
.yk-grid{
display:grid;grid-template-columns:repeat(2,1fr);
gap:var(--yk-sp-3);padding:var(--yk-sp-3);
}
@media(min-width:560px){.yk-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:800px){.yk-grid{grid-template-columns:repeat(4,1fr)}}
.yk-card{
background:var(--yk-surface);border-radius:var(--yk-r-md);overflow:hidden;
box-shadow:var(--yk-sh-card);display:flex;flex-direction:column;
transition:transform var(--yk-t-fast) var(--yk-ease),box-shadow var(--yk-t-fast);
will-change:transform;
}
.yk-card:active{transform:scale(.975);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.yk-card-th{
position:relative;width:100%;aspect-ratio:4/3;
background:
linear-gradient(110deg,#f0f0f0 8%,#f7f7f7 18%,#f0f0f0 33%) #f0f0f0;
background-size:200% 100%;overflow:hidden;
}
.yk-card-th img{width:100%;height:100%;object-fit:cover;display:block}
/* 缩略图角标 */
.yk-card-th .corner{
position:absolute;right:6px;bottom:6px;font-size:var(--yk-fs-11);
background:rgba(0,0,0,.66);color:#fff;padding:2px 7px;border-radius:var(--yk-r-pill);
display:inline-flex;align-items:center;gap:3px;
}
.yk-card-bd{padding:var(--yk-sp-2) 10px 10px;display:flex;flex-direction:column;flex:1}
.yk-card-t{
font-size:var(--yk-fs-14);font-weight:600;color:var(--yk-ink1);line-height:1.4;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;min-height:2.8em;
}
.yk-card-meta{
display:flex;align-items:center;flex-wrap:wrap;gap:8px;
margin-top:var(--yk-sp-2);font-size:var(--yk-fs-11);color:var(--yk-ink3);
}
.yk-card-meta em{font-style:normal;display:inline-flex;align-items:center;gap:3px}
.yk-card-meta .dot{width:3px;height:3px;border-radius:50%;background:#d5d5d5}
/* 徽标 */
.yk-tag{
display:inline-flex;align-items:center;gap:3px;
font-size:var(--yk-fs-11);line-height:1;
padding:3px 8px;border-radius:var(--yk-r-pill);
background:var(--yk-primary-soft);color:var(--yk-primary);font-weight:600;
vertical-align:middle;
}
.yk-tag-vip{background:linear-gradient(135deg,#f7d778,#c8942a);color:#5a3d00}
.yk-tag-lock{background:#ededed;color:#8b8b8b}
.yk-tag-audio{background:#e8f0ff;color:#2f6bd8}
/* 卡片标签行 */
.yk-card-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:var(--yk-sp-2)}
/* --------------------------------------------------------------------------
7. 按钮
-------------------------------------------------------------------------- */
.yk-btn{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
min-height:44px;padding:0 var(--yk-sp-5);
font-size:var(--yk-fs-16);font-weight:600;line-height:1;
border:1px solid transparent;border-radius:var(--yk-r-sm);
background:var(--yk-surface);color:var(--yk-ink1);
cursor:pointer;-webkit-user-select:none;user-select:none;
transition:transform var(--yk-t-fast) var(--yk-ease),background var(--yk-t-fast),box-shadow var(--yk-t-fast),opacity var(--yk-t-fast);
white-space:nowrap;
}
.yk-btn:active{transform:scale(.97)}
.yk-btn[disabled],.yk-btn.is-disabled{opacity:.5;pointer-events:none}
.yk-btn-primary{background:var(--yk-grad);color:#fff;box-shadow:var(--yk-sh-btn)}
.yk-btn-primary:active{background:var(--yk-primary-d);box-shadow:none}
.yk-btn-ghost{background:var(--yk-surface);color:var(--yk-primary);border-color:var(--yk-primary)}
.yk-btn-ghost:active{background:var(--yk-primary-soft)}
.yk-btn-sm{
height:34px;min-height:34px; /* 显式高度：避免被 flex 父容器 align-items:stretch 拉伸 */
padding:0 var(--yk-sp-3);font-size:var(--yk-fs-13);border-radius:var(--yk-r-sm);
}
.yk-btn-block{display:flex;width:100%}
/* 紧凑控件的触摸热区扩展：视觉保持紧凑，命中区补足到 44px（iOS HIG / Android 48dp 同源思路）
⚠️ 仅用于移动端触控组件；桌面后台表格（.yk-admin-act）刻意不扩，避免跨行拦截点击 */
.yk-btn-sm,.yk-chip,.yk-pager-item,.yk-hd-actions a,.yk-hd-btn,.yk-hd-search{position:relative}
.yk-btn-sm::after,.yk-chip::after,.yk-pager-item::after,.yk-hd-actions a::after,
.yk-hd-btn::after,.yk-hd-search::after{
content:"";position:absolute;left:0;right:0;top:50%;
transform:translateY(-50%);height:46px;min-height:100%;
/* 纯命中区，不参与绘制与布局 */
}
/* --------------------------------------------------------------------------
8. 胶囊筛选
-------------------------------------------------------------------------- */
.yk-chips{
display:flex;gap:var(--yk-sp-2);
overflow-x:auto;-webkit-overflow-scrolling:touch;
padding:var(--yk-sp-2) var(--yk-sp-3);
scrollbar-width:none;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%);
}
.yk-chips::-webkit-scrollbar{display:none;width:0;height:0}
.yk-chips--wrap{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
.yk-chip{
flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
min-height:36px;padding:0 15px;font-size:var(--yk-fs-13);color:var(--yk-ink2);
background:#f6f6f6;border:1px solid transparent;border-radius:var(--yk-r-pill);
white-space:nowrap;cursor:pointer;
transition:background var(--yk-t-fast),color var(--yk-t-fast),border-color var(--yk-t-fast);
}
.yk-chip:active{background:#ededed}
.yk-chip.on{background:var(--yk-primary);color:#fff;font-weight:600;border-color:var(--yk-primary)}
/* 胶囊内的课程数（）与胶囊组的组标签 */
.yk-chip em{
font-style:normal;font-weight:400;margin-left:4px;
font-size:var(--yk-fs-11);opacity:.72;
}
.yk-chip.on em{opacity:.9}
.yk-chips > em{
flex:0 0 auto;align-self:center;
font-style:normal;font-size:var(--yk-fs-12);color:var(--yk-ink3);
white-space:nowrap;
}
/* --------------------------------------------------------------------------
9. 通用列表
-------------------------------------------------------------------------- */
.yk-list{background:var(--yk-surface);border-radius:var(--yk-r-md);overflow:hidden}
.yk-li{
display:flex;align-items:center;gap:var(--yk-sp-3);
padding:var(--yk-sp-3);min-height:52px;
border-bottom:1px solid var(--yk-line2);
transition:background var(--yk-t-fast) var(--yk-ease);
}
.yk-li:last-child{border-bottom:0}
.yk-li:active{background:#fafafa}
.yk-li-no{
flex:0 0 auto;width:30px;height:30px;border-radius:var(--yk-r-sm);
background:#f2f2f2;color:var(--yk-ink3);
display:flex;align-items:center;justify-content:center;
font-size:var(--yk-fs-12);font-weight:600;
}
.yk-li-t{
flex:1;min-width:0;font-size:var(--yk-fs-14);color:var(--yk-ink1);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.yk-li-meta{
flex:0 0 auto;font-size:var(--yk-fs-11);color:var(--yk-ink3);
display:inline-flex;align-items:center;gap:6px;
}
.yk-li--link::after{
content:"";flex:0 0 auto;width:7px;height:7px;
border-right:1.5px solid #cfcfcf;border-bottom:1.5px solid #cfcfcf;
transform:rotate(-45deg);margin-left:2px;
}
/* --------------------------------------------------------------------------
10. 播放器
-------------------------------------------------------------------------- */
.yk-player{background:var(--yk-surface);border-radius:0 0 var(--yk-r-md) var(--yk-r-md);overflow:hidden}
.yk-player-box{
position:relative;width:100%;aspect-ratio:16/9;background:#000;
overflow:hidden;
}
.yk-player-box video,.yk-player-box iframe{
position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000;
}
.yk-player-box .lock{
position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:6px;background:rgba(0,0,0,.72);color:#fff;text-align:center;padding:var(--yk-sp-4);
font-size:var(--yk-fs-13);backdrop-filter:blur(2px);
}
.yk-player-box .lock b{font-size:var(--yk-fs-16)}
.yk-player-box .lock svg{width:40px;height:40px;opacity:.9}
.yk-player-head{padding:var(--yk-sp-3) var(--yk-sp-3) var(--yk-sp-2)}
.yk-player-head h1{font-size:var(--yk-fs-18);font-weight:700;color:var(--yk-ink1);line-height:1.4}
.yk-player-meta{
display:flex;flex-wrap:wrap;gap:var(--yk-sp-3);
padding:0 var(--yk-sp-3) var(--yk-sp-3);
font-size:var(--yk-fs-12);color:var(--yk-ink3);
}
.yk-player-meta em{font-style:normal;display:inline-flex;align-items:center;gap:3px}
.yk-player-desc{
padding:0 var(--yk-sp-3) var(--yk-sp-3);font-size:var(--yk-fs-13);
color:var(--yk-ink2);line-height:1.75;
}
/* 课时列表 */
.yk-episodes{background:var(--yk-surface);border-radius:var(--yk-r-md);margin:var(--yk-sp-3) 0;overflow:hidden}
.yk-ep-hd{
display:flex;align-items:center;gap:var(--yk-sp-2);
padding:var(--yk-sp-3);font-size:var(--yk-fs-16);font-weight:700;color:var(--yk-ink1);
border-bottom:1px solid var(--yk-line);position:relative;
}
.yk-ep-hd::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--yk-grad)}
.yk-ep-hd small{margin-left:auto;font-size:var(--yk-fs-12);font-weight:400;color:var(--yk-ink3)}
.yk-ep{
display:flex;align-items:center;gap:var(--yk-sp-3);
padding:var(--yk-sp-3);min-height:52px;
border-bottom:1px solid var(--yk-line2);
transition:background var(--yk-t-fast) var(--yk-ease);
}
.yk-ep:last-child{border-bottom:0}
.yk-ep:active{background:#fafafa}
.yk-ep.on{background:var(--yk-primary-soft2)}
.yk-ep-no{
flex:0 0 auto;width:30px;height:30px;border-radius:var(--yk-r-sm);
background:#f2f2f2;color:var(--yk-ink3);
display:flex;align-items:center;justify-content:center;font-size:var(--yk-fs-12);font-weight:600;
}
.yk-ep.on .yk-ep-no{background:var(--yk-primary);color:#fff}
.yk-ep-t{
flex:1;min-width:0;font-size:var(--yk-fs-14);color:var(--yk-ink1);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.yk-ep-du{flex:0 0 auto;font-size:var(--yk-fs-11);color:var(--yk-ink3)}
.yk-ep-lock{
flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;
font-size:var(--yk-fs-11);color:#8b8b8b;background:#ededed;
padding:3px 8px;border-radius:var(--yk-r-pill);
}
.yk-ep-lock.on{background:var(--yk-error-bg);color:var(--yk-error)}
.yk-ep.is-locked .yk-ep-t{color:var(--yk-ink3)}
/* --------------------------------------------------------------------------
11. 进度 / 继续学习
-------------------------------------------------------------------------- */
.yk-progress{
width:100%;height:4px;background:#ededed;border-radius:var(--yk-r-pill);overflow:hidden;
}
.yk-progress-bar{
display:block;height:100%;width:0;border-radius:inherit;
background:var(--yk-grad);transition:width var(--yk-t-slow) var(--yk-ease);
}
.yk-continue{
display:flex;gap:var(--yk-sp-3);align-items:center;
padding:var(--yk-sp-3);background:var(--yk-surface);
border-radius:var(--yk-r-md);box-shadow:var(--yk-sh-card);
}
.yk-continue-th{
flex:0 0 auto;width:96px;aspect-ratio:16/9;border-radius:var(--yk-r-sm);
overflow:hidden;background:#f0f0f0;position:relative;
}
.yk-continue-th img{width:100%;height:100%;object-fit:cover}
.yk-continue-th .play{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,.28);
}
.yk-continue-th .play i{
width:0;height:0;border-left:14px solid #fff;
border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px;
}
.yk-continue-bd{flex:1;min-width:0}
.yk-continue-bd h3{
font-size:var(--yk-fs-14);font-weight:600;color:var(--yk-ink1);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.yk-continue-bd p{font-size:var(--yk-fs-12);color:var(--yk-ink3);margin:3px 0 7px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* --------------------------------------------------------------------------
12. 表单
-------------------------------------------------------------------------- */
.yk-form{display:flex;flex-direction:column;gap:var(--yk-sp-4)}
.yk-field{display:flex;flex-direction:column;gap:6px}
.yk-field > label,.yk-field > span{font-size:var(--yk-fs-13);color:var(--yk-ink2);font-weight:500}
.yk-field .hint{font-size:var(--yk-fs-11);color:var(--yk-ink3)}
.yk-input,.yk-select{
width:100%;min-height:44px;padding:0 var(--yk-sp-3);
font-size:var(--yk-fs-16);color:var(--yk-ink1);
background:#fafafa;border:1px solid #e2e2e2;border-radius:var(--yk-r-sm);
transition:border-color var(--yk-t-fast),background var(--yk-t-fast),box-shadow var(--yk-t-fast);
-webkit-appearance:none;appearance:none;
}
.yk-input::placeholder{color:#bcbcbc}
.yk-input:focus,.yk-select:focus{
outline:none;border-color:var(--yk-primary);background:#fff;
box-shadow:0 0 0 3px rgba(255,106,0,.14);
}
.yk-select{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;
}
.yk-input.is-error,.yk-select.is-error{border-color:var(--yk-error);background:#fff8f8}
.yk-err,.yk-ok{
display:flex;align-items:center;gap:6px;
padding:10px var(--yk-sp-3);border-radius:var(--yk-r-sm);
font-size:var(--yk-fs-13);line-height:1.5;
}
.yk-err{background:var(--yk-error-bg);color:var(--yk-error)}
.yk-ok{background:var(--yk-success-bg);color:var(--yk-success)}
.yk-note{
background:var(--yk-warn-bg);color:var(--yk-warn);
padding:10px var(--yk-sp-3);border-radius:var(--yk-r-sm);font-size:var(--yk-fs-12);line-height:1.6;
}
/* --------------------------------------------------------------------------
13. 空态 / 加载 / 骨架
-------------------------------------------------------------------------- */
.yk-empty{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:var(--yk-sp-2);padding:var(--yk-sp-7) var(--yk-sp-4);text-align:center;color:var(--yk-ink3);
}
.yk-empty-ic{
width:64px;height:64px;color:#d8d8d8;margin-bottom:var(--yk-sp-1);
}
.yk-empty-ic svg{width:100%;height:100%}
.yk-empty b{font-size:var(--yk-fs-14);color:var(--yk-ink2);font-weight:600}
.yk-empty p{font-size:var(--yk-fs-12);color:var(--yk-ink3)}
.yk-loading{
display:flex;align-items:center;justify-content:center;gap:var(--yk-sp-2);
padding:var(--yk-sp-6);color:var(--yk-ink3);font-size:var(--yk-fs-13);
}
.yk-loading::before{
content:"";width:18px;height:18px;border-radius:50%;
border:2px solid #e6e6e6;border-top-color:var(--yk-primary);
animation:yk-spin .7s linear infinite;
}
@keyframes yk-spin{to{transform:rotate(360deg)}}
.yk-skeleton{
border-radius:var(--yk-r-sm);
background:linear-gradient(100deg,#eee 10%,#f6f6f6 22%,#eee 34%);
background-size:200% 100%;
animation:yk-shimmer 1.4s ease-in-out infinite;
}
.yk-skeleton--text{height:14px;margin:8px 0;border-radius:4px}
.yk-skeleton--th{aspect-ratio:4/3;width:100%;border-radius:0}
@keyframes yk-shimmer{0%{background-position:150% 0}100%{background-position:-50% 0}}
/* --------------------------------------------------------------------------
14. 浮层：底部抽屉 / Toast
-------------------------------------------------------------------------- */
.yk-sheet-mask{
position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:80;
opacity:0;visibility:hidden;transition:opacity var(--yk-t-base) var(--yk-ease),visibility var(--yk-t-base);
}
.yk-sheet-mask.on{opacity:1;visibility:visible}
.yk-sheet{
position:fixed;left:0;right:0;bottom:0;z-index:81;
background:var(--yk-surface);
border-radius:var(--yk-r-lg) var(--yk-r-lg) 0 0;
box-shadow:var(--yk-sh-pop);
transform:translateY(100%);
transition:transform var(--yk-t-base) var(--yk-ease);
padding-bottom:var(--yk-safe-b);
max-height:82vh;overflow-y:auto;
}
.yk-sheet.on{transform:translateY(0)}
.yk-sheet::before{
content:"";display:block;width:36px;height:4px;border-radius:2px;background:#dcdcdc;
margin:var(--yk-sp-2) auto var(--yk-sp-1);
}
.yk-sheet-hd{
padding:var(--yk-sp-2) var(--yk-sp-4) var(--yk-sp-2);
font-size:var(--yk-fs-16);font-weight:700;color:var(--yk-ink1);text-align:center;
}
.yk-sheet-bd{padding:0 var(--yk-sp-4) var(--yk-sp-4)}
.yk-sheet-ft{padding:var(--yk-sp-3) var(--yk-sp-4) var(--yk-sp-4)}
.yk-toast{
position:fixed;left:50%;top:calc(104px + var(--yk-safe-t));
transform:translateX(-50%) translateY(-8px);
background:rgba(28,28,28,.94);color:#fff;
padding:10px 18px;border-radius:var(--yk-r-pill);
font-size:var(--yk-fs-13);z-index:95;max-width:80vw;text-align:center;
opacity:0;pointer-events:none;
transition:opacity var(--yk-t-base) var(--yk-ease),transform var(--yk-t-base) var(--yk-ease);
box-shadow:var(--yk-sh-pop);
}
.yk-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
/* --------------------------------------------------------------------------
15. 分页 / 分隔线
-------------------------------------------------------------------------- */
.yk-pager{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:var(--yk-sp-2);padding:var(--yk-sp-4) var(--yk-sp-3);
}
.yk-pager-item{
min-width:38px;min-height:38px;padding:0 10px;
display:inline-flex;align-items:center;justify-content:center;
font-size:var(--yk-fs-13);color:var(--yk-ink2);
background:var(--yk-surface);border:1px solid var(--yk-line);
border-radius:var(--yk-r-sm);
transition:background var(--yk-t-fast),color var(--yk-t-fast),border-color var(--yk-t-fast);
}
.yk-pager-item:active{background:#f2f2f2}
.yk-pager-item.on{background:var(--yk-primary);color:#fff;border-color:var(--yk-primary);font-weight:700}
.yk-pager-item.is-disabled{opacity:.45;pointer-events:none}
.yk-divider{
position:relative;height:1px;background:var(--yk-line);
margin:var(--yk-sp-4) var(--yk-sp-3);
}
.yk-divider--text{
height:auto;background:none;display:flex;align-items:center;gap:var(--yk-sp-3);
color:var(--yk-ink3);font-size:var(--yk-fs-12);
}
.yk-divider--text::before,.yk-divider--text::after{content:"";flex:1;height:1px;background:var(--yk-line)}
/* --------------------------------------------------------------------------
16. 底部固定播放条
-------------------------------------------------------------------------- */
.yk-playbar{
position:fixed;left:0;right:0;bottom:0;z-index:60;
background:rgba(255,255,255,.97);
-webkit-backdrop-filter:saturate(180%) blur(12px);
backdrop-filter:saturate(180%) blur(12px);
border-top:1px solid var(--yk-line);
padding:var(--yk-sp-2) var(--yk-sp-3) calc(var(--yk-sp-2) + var(--yk-safe-b));
padding-left:calc(var(--yk-sp-3) + var(--yk-safe-l));
padding-right:calc(var(--yk-sp-3) + var(--yk-safe-r));
box-shadow:0 -2px 12px rgba(0,0,0,.05);
}
.yk-playbar-btns{display:flex;align-items:center;gap:var(--yk-sp-2);min-width:0}
/* flex-basis:0 + min-width:0：窄屏时可收缩，不会因文字 nowrap 把整条撑出视口 */
.yk-playbar .yk-btn{flex:1 1 0;min-width:0}
.yk-prev,.yk-next{
flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:var(--yk-r-sm);
background:#f4f4f4;color:var(--yk-ink2);border:0;cursor:pointer;
transition:background var(--yk-t-fast);
}
.yk-prev:active,.yk-next:active{background:#e9e9e9}
.yk-prev[disabled],.yk-next[disabled]{opacity:.4;pointer-events:none}
.yk-prev svg,.yk-next svg{width:18px;height:18px}
.yk-speed{
flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
min-width:52px;height:44px;padding:0 10px;
font-size:var(--yk-fs-13);font-weight:600;color:var(--yk-vip);
background:var(--yk-warn-bg);border:0;border-radius:var(--yk-r-sm);cursor:pointer;
}
.yk-speed:active{background:#ffeec4}
/* --------------------------------------------------------------------------
17. 小工具 / 文本工具类
-------------------------------------------------------------------------- */
.yk-pad{padding:var(--yk-sp-3)}
.yk-pad-x{padding-left:var(--yk-sp-3);padding-right:var(--yk-sp-3)}
.yk-mt-2{margin-top:var(--yk-sp-2)}
.yk-mt-3{margin-top:var(--yk-sp-3)}
.yk-mb-3{margin-bottom:var(--yk-sp-3)}
.yk-muted{color:var(--yk-ink3)}
.yk-center{text-align:center}
.yk-row{display:flex;align-items:center;gap:var(--yk-sp-2)}
.yk-grow{flex:1;min-width:0}
.yk-clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yk-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* --------------------------------------------------------------------------
18. 播放页专用
-------------------------------------------------------------------------- */
/* 播放器左上「目录」返回键：浮在视频上，半透明黑底胶囊 */
.yk-play-back{
position:absolute;left:var(--yk-sp-2);top:var(--yk-sp-2);z-index:2;
display:inline-flex;align-items:center;justify-content:center;gap:4px;
height:32px;padding:0 12px;
font-size:var(--yk-fs-12);color:#fff;font-weight:600;line-height:1;
background:rgba(0,0,0,.55);border:0;border-radius:var(--yk-r-pill);
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
cursor:pointer;white-space:nowrap;
transition:background var(--yk-t-fast) var(--yk-ease);
}
.yk-play-back:active{background:rgba(0,0,0,.75)}
.yk-play-back svg{width:14px;height:14px}
/* 自身已 absolute，只加命中区、不改 position */
.yk-play-back::after{
content:"";position:absolute;left:0;right:0;top:50%;
transform:translateY(-50%);height:44px;
}
/* 「自动播放下一集」整行 */
.yk-playopt{
display:flex;align-items:center;gap:var(--yk-sp-2);
min-height:44px;padding:0 var(--yk-sp-3);
font-size:var(--yk-fs-13);color:var(--yk-ink2);
background:var(--yk-surface);cursor:pointer;
-webkit-user-select:none;user-select:none;
transition:background var(--yk-t-fast) var(--yk-ease);
}
.yk-playopt:active{background:#fafafa}
.yk-playopt input[type="checkbox"]{
flex:0 0 auto;width:18px;height:18px;margin:0;
accent-color:var(--yk-primary);
}
/* --------------------------------------------------------------------------
19. 课程详情页
-------------------------------------------------------------------------- */
/* 主播放按钮：48px 高、圆角加大 */
.yk-detail-play{
height:48px;min-height:48px;
font-size:var(--yk-fs-16);
border-radius:var(--yk-r-md);
}
/* 封面角标：详情页集数 + 首页卡片集数（共用同一套视觉） */
.yk-detail-cnt,.yk-card-ep{
position:absolute;right:6px;bottom:6px;z-index:1;
display:inline-flex;align-items:center;gap:3px;
font-size:var(--yk-fs-11);line-height:1;
padding:3px 7px;border-radius:var(--yk-r-pill);
background:rgba(0,0,0,.62);color:#fff;white-space:nowrap;
pointer-events:none;
}
/* 封面底部进度条轨道，内部 为主色填充（宽度由主程序内联给出） */
.yk-card-prog{
position:absolute;left:0;right:0;bottom:0;height:3px;z-index:1;
background:rgba(0,0,0,.2);
}
.yk-card-prog i{
display:block;height:100%;width:0;
background:var(--yk-primary);
border-radius:0 var(--yk-r-pill) var(--yk-r-pill) 0;
}
/* VIP 标记（课程页） */
.yk-vip{
display:inline-flex;align-items:center;gap:3px;
font-size:var(--yk-fs-11);font-weight:700;line-height:1;
padding:3px 8px;border-radius:var(--yk-r-pill);
background:linear-gradient(135deg,#f7d778,#d4af37);color:#5a3d00;
}
/* 音频课标记：18×18 圆形 */
.yk-ep-badge{
flex:0 0 auto;
width:18px;height:18px;border-radius:var(--yk-r-pill);
background:var(--yk-primary-soft);color:var(--yk-primary);
display:inline-flex;align-items:center;justify-content:center;
font-size:10px;font-weight:700;line-height:1;
}
/* 警告型提示条：橙色系 */
.yk-note-warn{
background:var(--yk-primary-soft);
border:1px solid #ffd8b3;
color:#a04a00;
padding:10px var(--yk-sp-3);
border-radius:var(--yk-r-sm);
font-size:var(--yk-fs-12);
line-height:1.6;
}
/* --------------------------------------------------------------------------
20. 选集浮层
-------------------------------------------------------------------------- */
.yk-sheet-ep{
display:flex;align-items:center;justify-content:space-between;
gap:var(--yk-sp-3);
min-height:44px;padding:var(--yk-sp-2) 0;
font-size:var(--yk-fs-13);color:var(--yk-ink1);
border-bottom:1px solid var(--yk-line2);
transition:background var(--yk-t-fast) var(--yk-ease);
}
.yk-sheet-ep:last-child{border-bottom:0}
.yk-sheet-ep:active{background:#fafafa}
/* 左侧文案可省略号截断，右侧时长不参与伸缩 —— 不依赖具体子元素类名 */
.yk-sheet-ep > *:first-child{
flex:1 1 auto;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.yk-sheet-ep > *:last-child{
flex:0 0 auto;font-size:var(--yk-fs-11);color:var(--yk-ink3);
}
.yk-sheet-ep.is-locked{
color:var(--yk-ink3);opacity:.6;
pointer-events:none;cursor:default;
}
/* 浮层右上关闭：无边框文字按钮 */
.yk-sheet-x{
position:absolute;right:var(--yk-sp-1);top:var(--yk-sp-1);z-index:1;
display:inline-flex;align-items:center;justify-content:center;
min-width:44px;min-height:44px;padding:0;
background:none;border:0;cursor:pointer;
font-size:var(--yk-fs-13);color:var(--yk-primary);
}
.yk-sheet-x:active{opacity:.6}
/* --------------------------------------------------------------------------
21. 头部 / 页脚 / 表单 补充
-------------------------------------------------------------------------- */
/* 头部按钮：比 .yk-hd-actions a 更自包含，可独立使用 */
.yk-hd-btn{
display:inline-flex;align-items:center;justify-content:center;gap:4px;
min-height:32px;padding:0 12px;
font-size:var(--yk-fs-12);color:#fff;line-height:1;
background:rgba(255,255,255,.22);border:0;border-radius:var(--yk-r-pill);
cursor:pointer;white-space:nowrap;
transition:background var(--yk-t-fast) var(--yk-ease);
}
.yk-hd-btn:active{background:rgba(255,255,255,.4)}
.yk-hd-btn svg{width:14px;height:14px}
/* 搜索按钮：描边弱化版 */
.yk-hd-search{
display:inline-flex;align-items:center;justify-content:center;gap:4px;
min-height:32px;padding:0 12px;
font-size:var(--yk-fs-12);color:#fff;line-height:1;
background:transparent;border:1px solid rgba(255,255,255,.6);
border-radius:var(--yk-r-pill);
cursor:pointer;white-space:nowrap;
transition:background var(--yk-t-fast) var(--yk-ease),border-color var(--yk-t-fast);
}
.yk-hd-search:active{background:rgba(255,255,255,.2)}
.yk-hd-search svg{width:14px;height:14px}
/* 页脚副行：更小更淡 */
.yk-foot-sub{
font-size:var(--yk-fs-11);
color:#6f6f6f;
line-height:1.7;
margin-top:4px;
}
/* 小号下拉（后台） */
.yk-select-sm{
height:34px;min-height:34px;
font-size:var(--yk-fs-13);
padding:0 28px 0 var(--yk-sp-2);
background-position:right 9px center;
border-radius:var(--yk-r-sm);
}
/* 搜索行：input 弹性 + 按钮固定，min-width:0 防溢出 */
.yk-search-row{
display:flex;align-items:center;gap:var(--yk-sp-2);
padding:var(--yk-sp-3);
max-width:100%;
}
.yk-search-row .yk-input,
.yk-search-row input{flex:1 1 auto;min-width:0}
.yk-search-row .yk-btn,
.yk-search-row button{flex:0 0 auto}
/* 表单副标题 */
.yk-form-sub{
font-size:var(--yk-fs-12);
color:var(--yk-ink3);
line-height:1.6;
}
/* --------------------------------------------------------------------------
22. 分页 / 表格 / 后台
-------------------------------------------------------------------------- */
/* 上一页 / 下一页：更宽、次要色 */
.yk-pager-nav{
padding:0 14px;
color:var(--yk-ink3);
}
.yk-pager-nav.on{color:#fff}
/* 省略号：无底无边框、不可点 */
.yk-pager-dot{
padding:0;min-width:24px;
background:none;border-color:transparent;
color:var(--yk-ink3);
pointer-events:none;cursor:default;
}
.yk-pager-dot::after{display:none}
/* 表格横向滚动容器：溢出被裁在容器内，不外泄到页面 */
.yk-table-wrap{
width:100%;max-width:100%;
overflow-x:auto;-webkit-overflow-scrolling:touch;
border-radius:var(--yk-r-md);
background:var(--yk-surface);
scrollbar-width:none;-ms-overflow-style:none;
}
.yk-table-wrap::-webkit-scrollbar{display:none;width:0;height:0}
.yk-table-wrap table{min-width:100%}
/* 单元格不逐字换行：窄屏由容器横向滚动承载，而不是把列挤成「学/段」两行 */
.yk-table-wrap th,.yk-table-wrap td{white-space:nowrap}
/* 继续观看列表：纵向堆叠（移动端零横向溢出） */
.yk-continues{
display:flex;flex-direction:column;gap:var(--yk-sp-3);
padding:var(--yk-sp-3);
max-width:100%;
}
/* 后台操作列：不换行、内部控件小号化、按钮不撑满 */
.yk-admin-act{
white-space:nowrap;
text-align:right;
}
.yk-admin-act > * + *{margin-left:6px}
.yk-admin-act form{display:inline}
.yk-admin-act .yk-btn,
.yk-admin-act button{
display:inline-flex;align-items:center;justify-content:center;
width:auto;min-height:34px;padding:0 10px;
font-size:var(--yk-fs-12);vertical-align:middle;
}
.yk-admin-act .yk-input,
.yk-admin-act .yk-select,
.yk-admin-act input{
display:inline-block;width:auto;min-width:0;
min-height:34px;padding:0 8px;
font-size:var(--yk-fs-13);vertical-align:middle;
}
/* 页面级操作区 */
.yk-actions{
display:flex;flex-wrap:wrap;align-items:center;
gap:var(--yk-sp-3);
padding:var(--yk-sp-4) 0;
max-width:100%;
}
/* --------------------------------------------------------------------------
23. 移动端专治 & 无障碍
-------------------------------------------------------------------------- */
/* 触摸设备上恢复可点区域语义 */
a,button,[role="button"],.yk-chip,.yk-nav-item,.yk-pager-item{touch-action:manipulation}
/* 尊重系统「减少动态效果」 */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
.yk-skeleton{animation:none;background:#eee}
.yk-loading::before{animation:none;border-top-color:#e6e6e6}
}
/* 窄屏（≤360px，如 iPhone SE）：压缩播放条内边距，保证 4 个控件仍在一行内 */
@media (max-width:360px){
.yk-playbar .yk-btn{padding-left:12px;padding-right:12px}
.yk-playbar-btns{gap:6px}
.yk-speed{min-width:46px;padding:0 6px}
}
/* 悬停设备才启用 hover 效果（避免移动端粘滞） */
@media (hover:hover){
.yk-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.1);transform:translateY(-2px)}
.yk-li--link:hover{background:#fafafa}
.yk-btn-primary:hover{background:var(--yk-primary-d)}
.yk-btn-ghost:hover{background:var(--yk-primary-soft)}
.yk-chip:hover{background:#ededed}
.yk-chip.on:hover{background:var(--yk-primary)}
.yk-pager-item:hover{border-color:var(--yk-primary);color:var(--yk-primary)}
.yk-pager-item.on:hover{color:#fff}
.yk-nav-item:hover{opacity:1}
}
/* 平板 / 桌面：内容居中留白，页脚与头部内边距更舒展 */
@media (min-width:768px){
body{font-size:var(--yk-fs-14)}
.yk-hero{padding:var(--yk-sp-6) var(--yk-sp-6) var(--yk-sp-7)}
.yk-hero h1{font-size:28px}
.yk-sec{margin:var(--yk-sp-4) 0}
}