/* ============================================================
 * pro-media.css — 媒体分片上传/播放器样式（#40）
 * 严格沿用产品设计令牌：indigo #4F6BED、卡片/线条/圆角，不引入第二套配色
 * ============================================================ */
.media-widget {
  --indigo:#4F6BED; --indigo-600:#3D55D4; --indigo-50:#F2F4FF; --indigo-100:#E8EDFF;
  --ink:#1D1D1F; --ink-2:#6E6E73; --ink-3:#8E8E93;
  --card:#fff; --line:#D2D2D7; --line-2:#E8E8ED; --bg-soft:#F5F5F7;
  --success:#1E7B37; --danger:#FF3B30; --warning:#8A5300;
  --r-lg:14px; --r-xl:14px;
  font-family:inherit; color:var(--ink);
  background:var(--card); border:1px solid var(--line-2);
  border-radius: var(--r-xl); padding: 20px; max-width:760px; margin: 0 auto;
  box-shadow:0 2px 10px rgba(29,29,31,.05);
}
.media-widget *{box-sizing:border-box;}
.mw-title{font-size: 17px;font-weight: 600;margin: 0 0 4px;}
.mw-sub{font-size: 13px;color:var(--ink-3);margin: 0 0 16px;}

/* 拖拽区 */
.mw-drop{
  border:2px dashed var(--line); border-radius: var(--r-lg);
  padding: 32px 16px; text-align:center; cursor:pointer;
  transition: border-color .15s, background .15s; background:var(--bg-soft);
}
.mw-drop:hover,.mw-drop.is-drag{border-color:var(--indigo);background:var(--indigo-50);}
.mw-drop-icon{font-size: 34px;line-height:1;margin-bottom: 8px;color:var(--indigo);}
.mw-drop-t{font-size: 13px;font-weight: 600;}
.mw-drop-s{font-size: 12px;color:var(--ink-3);margin-top: 4px;}

/* 状态条 */
.mw-file{margin-top: 16px;border:1px solid var(--line-2);border-radius: var(--r-lg);padding: 12px 16px;}
.mw-file-head{display:flex;align-items:center;gap: 8px;}
.mw-file-name{font-size: 13px;font-weight: 600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mw-file-size{font-size: 12px;color:var(--ink-3);}
.mw-badge{font-size: 12px;padding: 4px 8px;border-radius: 999px;font-weight: 600;}
.mw-badge.loading{background:var(--indigo-50);color:var(--indigo-600);}
.mw-badge.ok{background:#E8F7EE;color:var(--success);}
.mw-badge.err{background:#FDECEA;color:var(--danger);}
.mw-badge.pause{background:#FFF4E5;color:var(--warning);}

/* 进度条 */
.mw-progress{height:8px;background:var(--line-2);border-radius: 999px;overflow:hidden;margin: 8px 0 8px;}
.mw-progress-bar{height:100%;background:linear-gradient(90deg,var(--indigo),#6B8AFF);border-radius: 999px;width:0;transition: width .2s;}
.mw-meta{display:flex;justify-content:space-between;font-size: 12px;color:var(--ink-3);}
.mw-actions{display:flex;gap: 8px;margin-top: 8px;flex-wrap:wrap;}
.mw-btn{
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  padding: 8px 16px;border-radius: 14px;font-size: 13px;cursor:pointer;transition: all .15s;font-weight: 500;
}
.mw-btn:hover{border-color:var(--indigo);color:var(--indigo);}
.mw-btn.primary{background:var(--indigo);border-color:var(--indigo);color:#fff;}
.mw-btn.primary:hover{background:var(--indigo-600);color:#fff;}
.mw-btn[disabled]{opacity:.5;cursor:not-allowed;}

/* 空态/错误态 */
.mw-empty{padding: 16px;text-align:center;color:var(--ink-3);font-size: 13px;}
.mw-error{background:#FDECEA;color:var(--danger);border-radius: 14px;padding: 8px 12px;font-size: 13px;margin-top: 8px;display:none;}
.mw-error.show{display:block;}

/* 播放器 */
.mw-player{margin-top: 16px;border-radius: var(--r-lg);overflow:hidden;background:#000;aspect-ratio:16/9;position:relative;}
.mw-player video{width:100%;height:100%;display:block;}
.mw-player-poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size: 13px;background:#111;}
.mw-toolbar{display:flex;gap: 8px;align-items:center;margin-top: 8px;flex-wrap:wrap;}
.mw-toolbar select{font-size: 12px;padding: 4px 8px;border:1px solid var(--line);border-radius: 14px;background:#fff;color:var(--ink);}

/* 响应式 */
@media(max-width:640px){
  .media-widget{padding: 16px;}
  .mw-drop{padding: 20px 8px;}
  .mw-actions .mw-btn{flex:1;text-align:center;}
}